I've always disliked the idea of using the CSS property of
display:table. Using it feels like an ugly hack and I always prefer to use a direct
<table> tag instead. Of course, I use it only when necessary and always prefer a non-
<table> based layout when possible. But for those occasions when a table is the only choice, I prefer the tag not the CSS. Naturally I've been reproached several times about this. In a recent discussion with Toni Leigh I finally managed to define my feelings about this issue well enough to make an argument out of it, so I'd like to present it here and hear what you guys think.
In HTML every tag can be thought of containing three distinct properties - functionality, layout and semantics.
Functionality is what the tag does. An
<a href=""> redirects the user when clicked. An
<input type="text"> creates a textbox. A
<div> wraps a block of content so that it can be manipulated further as a whole. An
<img> shows a picture. Etc.
Layout is what the tag looks like (and sounds like, if you're using a screen reader). This contains things like colors, borders, spacings, fonts, etc.
Semantics is what the tag means (or represents). It could be a menu item, a blog post, a photograph, a design element, etc.
The meat of the issue
In modern HTML the layout is the province of CSS, while both functionality and semantics are dependent of the tag name and occasionally a few attributes, which has the side effect of intertwining them. People try very hard to keep these two domains (layout and functionality/semantics) separated, so that the necessities of one would not affect the other. For that reason using a
<table> for layout is scoffed, because that imposes a semantic change where only a layout change should be. And the preferred workaround is to use
display: table as an alternative for achieving table-like layout effects but without the semantic changes that come along with the
<table> tag. (Preemptive retort: no, a
<table> doesn't make a bigger tag soup. You get all the same tags with
display:table too, they're just all called
The reason this feels so "wrong" to me is because I see the
display:table as a CSS property which changes the functionality of a tag. It's like using CSS to change an
<a> to a
<form> or an
<input type="text"> into a
<button> or something (well, if it was possible). As far as I'm aware it's the only CSS property with such an effect. Everything else really does affect only layout, but
display:table does more. For this reason it feels like it shouldn't even be in CSS. In particular:
- New kind of relationships between tag sizes are created. In non-tabular layouts, only parent-child relationships between tags are able to affect each other. In a table, other tags in the same row/column can affect a cell's size, as well as the total width/height of the entire table.
- To make it worse, you get colspans/rowspans (CSS browser support flaky at the moment, but it's getting there)
display:table-headerelement will be printed on every page, when printing the document.
- You get vertical alignment of text and border collapse.
And probably others I haven't thought of. Well, I guess they are sort of layout features, but they are a whole world apart from anything else that CSS can do. Treating some markup like a table switches the browser into a completely different mode, which is why I think it's a different functionality, not just layout.
What do you think? Can all the changes that
display:table brings be counted only as layout, or is it a change of functionality as well?