-vqwfg
Last Updated: February 25, 2016
·
33.97K
· sergiotapia
Avatar mario

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?

4 Responses
Add your response

65

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.

over 1 year ago ·
1136
527657 350954588303809 1195162128 n

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.

over 1 year ago ·
1267
F36a3d6a839ba2562c08af5793e68748

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.

over 1 year ago ·
3172

Your version does not look good in FF.

over 1 year ago ·