HackerNews - Now without Table or Center elements!
I kid, I kid.
Last week I posted a thread on HackerNews asking why the website used tables for layout. I even noticed they were using the <center> tag.
http://news.ycombinator.com/item?id=4370206
It seemed so strange to me that a website that is so cutting edge for developers would use web constructs plucked right out of a geocities website.
All HN needed now was some spinning skull GIF's and it was Angelfire City.
This morning was a slow day at work so instead of walking around the office I decided to rewrite the Hacker News website using HTML and CSS - the right way. (Or so I tried! - If I screwed up let me know!)
http://jsbin.com/ewufof/3/edit
The reason behind this was a commenter in the original HN thread that asked what the point was behind not using tables. "Tables just make it look right and is easier to position." The age old argument. Granted, he said he wasn't a web developer; he was a more down to the metal developer, wrestling with C on embedded systems.
Since he (and so many others) are all about the numbers, how's this for a number:
Original HN website: 26087 characters long.
My rewrite: 3587 characters long.
That is some massive savings. This will not only be lighter down the wire, but the browser will render it faster because it has less to do.
And it can be made even shorter with some more advanced wizardry.
The point I'm trying to make is that using <table> elements for layout is bad and you should feel bad for using them. If you tried modifying something in original HN it would take a long time.
In my example, just change some CSS rule and it'll ripple to all that apply.
Do you think you can make it any shorter?
Written by Sergio Tapia Gutierrez
Related protips
5 Responses
I agree with you. Tables are also said to render slower than div, or at least it was when PCs were not as powerful as today's. Tables are only necessary if there is the need to show data in a grid like or table format.
I see the following problems with tables:
1. The browser will render a table only after reach the end of the </table> tag (this does not occurs with css, render time efficiency);
2. Ugly. Tables are not meant to build layouts;
3. Mistakes, they will happen when using tables for layouts.
Use tables to show data, not to render layouts for web pages.
Let's not forget that it slows down rendering and parsing time for scraper clients too, since it has to deal with over 10x the size of content, and then adds unnecessary load to the backend web servers because the web processes are stuck delivering larger content.
Your version does not look good in FF.
Nice! I recently looked into HN's html and was appalled. Have you tried redoing a comment thread?
