Quick Protip #1 - HTML
Use table's instead of div's to organize the layout of your pages.
Reasoning:
Many page designs use a columned approach. Divs and tables are treated very similar in all the top 5 browsers. Divs are design to simply separate information, where as tables are design specifically to organize information into columns and rows. As a result, you need much less HTML/CSS to get the columned design you want.
Cheers!
-Nick
Thanks for reading
If you enjoyed what I wrote, consider upvoting this protip or endorsing me.
If you want to see more of my stuff, you can see other protips I have written or visit my profile.
Written by Nicholas Jordon
Related protips
5 Responses
Until you have to change your design, or support mobile platforms... Then, it becomes a nightmare as you have to drop everything and do it again using CSS.
@alixaxel Last I checked, changing the design of a website would require you to rewrite the most of the design anyway, unless you are talking about minor updates, in which case... table can have classes, IDs, etc.. so there shouldn't be a real difference. Additionally I am not aware of a mobile device that does not support tables, in fact considering that they were introduced in HTML 3.0 I don't think there is any type of browser currently available that does not support them. Lastly, even if they are not usable in a situation, it doesn't take long to replace them, so I really have no idea what you are fussing about.
@projectcleverweb sure, tables are rendered in mobile browsers but the experience is not optimized for the screen size or orientation. If you design your website using table cells, you wont be able to hide or position a specific cell via CSS properties for instance. You end up with a rigid structure and to change the way it renders you really have to change a lot of HTML. Don't get me wrong, CSS can be frustrating (not so much nowadays if you design for A+ browsers) and it's still easier to do some stuff using tables, but I don't think that's the way to go anymore.
Personally, I'm looking forward to designing websites with the CSS FlexBox model.
@alixaxel admittedly I actually hadn't heard of the flexbox module yet. I did a quick bit of research on it, and it's very interesting. Related Note: I'm not against it (if anything I am definitely for it) but at the same time both css3 & htm5 are still relatively new. I doubt I am telling you anything new, but more or less my point is that not enough time has passed to ensure that the amount of users who won't have support for html5/css3 is minimal. So basically, until a couple years from now (or until Microsoft gets their head out of their rear), I personally avoid using too much html5/css3 elements. But to be fair I haven't yet taken the time to test the backward compatibly/effects of flexbox.
Tables are specifically for holding tabular data - they describe how the data is made up of columns and rows. Your page layout doesn't have any intrinsic column or row nature to them, so tables aren't suitable.
If you want a div to be displayed like a table, then put that information in the place that display information belongs: CSS. Use display: [table, table-row, table-column, table-cell, etc...] to get you divs (or other semantically appropriate tags) to display like they're tables.
