Tables are the black sheep of HTML. Overused and misused for years, they were finally corralled into orderly pens by the CSS lords in their blue beanies, with only numbers and charts to keep them company. While I'm not suggesting we let them run wild again, I do think their purpose can be broader, if you're willing to bend the definition a bit.
If your first reaction to that is, indignantly, “No! Use flexbox!” I’m gonna stop you right there. Unlike lots of bloggers and dreamers out there, we have to make our sites look great in IE 8 and sometimes IE 7 (don’t get me started) every day. So unfortunately, new technologies (that determine major layout) are relegated to playground status, and we are left using the least common denominator.
With that requirement established, I propose that table behavior is very useful for a number of reasons. Emphasis on behavior. I am not recommending you throw <table>s around in your markup, that would be going backwards. <table> is for tabular data only. What we can use, however, is display:table; and display:table-cell;. Thus, every reference of “table” or “cell” from here forward is referring not to a <table> or <td> element, but to any element with CSS causing it to render as such. That said, here are the reasons. Four, to be exact.
1) Column widths dynamically determined by content size
This is the table’s unmatched advantage. No other element can automatically adjust a set of boxes relative to each other according to what is inside them. This has a few sub-benefits as well, and they are as follows:
- Set the width of none, one or many cells, and the rest will adjust with what space is left.
- Set
width:100%on one cell and it will push out and fill up as much space as the other cells will allow. “Will allow” because table cells are selfish and won’t get smaller than their content lets them. Use this to your advantage by settingwhite-space:nowrap;to prevent line breaks. - No need to know how many cells are in a row, thus no need to set a width. 100 ÷ 4 = 25%. 100 ÷ who knows = who cares.
I’ll give you two examples to illustrate these three points.
Example 1: Say I need social network buttons next to a search box. According to points 1 and 2, I don’t have to readjust the layout if the client wants to add more networks. It’s also responsive! (More on that later.)
Example 2: Point 3 often comes in handy with navigation. We hook our navigation up to WordPress’ menus, so we need to be prepared if a client modifies their navigation.
2) Equal length column borders
There are other solutions, yes, but tables are the quickest and most effective. Don’t you dare use a background image. Shame on you, making your mobile users download an image for a petty border! You could set a margin equal to the negative of your border width (border-right-width: 2px; margin-right -2px;), but that would throw off your column widths. Which you would have to set explicitly (see Advantage 1).
3) Tables are responsive!
Tables on tablets! Give a table a percentage width (my tables have 100% width 90% of the time), and the dynamically adjusted cell widths discussed in Advantage 1 carry right on through to any screen size. A good example of this is the responsive website we built for Harrell’s Fertilizer. Resize your browser and watch the main navigation bar.
4) Center vertically in the unknown
The CSS guru himself talks about this. Yes, it’s “gross,” but it solves the problem the quickest, most efficiently, with least tweaking and in the most browsers possible.
Remember, the biggest reasons we’re doing all of this are browser support and “the unknown.” If you’re certain the number of columns won’t change and/or you don’t care about IE 7 or 8 (or even 9 in some cases), then I encourage you to use any other methods than these. Otherwise, don’t be afraid of “tables.”
