What verifiable reasons were there for adding display: table- * to the CSS spec?
I realized that some layouts are easier to achieve now that display: table-*
CSS is available to us (like the Holy Grail layout ), but what were the reasons why we decided to add these display options to the CSS standard , given the notorious historical hatred of table layouts in HTML.
Any links to discussions, mailing list entries, specs, etc. would be great!
I am not looking for reasons to use options or opinions / assumptions regarding the motivations of the standards body. Rather, why and by whom it was decided to include it in the standard had merit.
Thank.
source to share
The problem was not that the table layouts were bad, but those tables were used for the layout. This made it difficult to identify the actual tables (i.e. Tabular Data) and which were tables used only for layout.
Adding table- * in CSS meant we could traverse the table based on the table - * in CSS and only keep the semantic tables in HTML (i.e. the actual table data)
Here is the earliest link to this I could find in the W3-mail archives - https://lists.w3.org/Archives/Public/www-style/1998Aug/0091.html . ( "display: table" as table replacement for layout )
There is a link to an older thread and you can trace it all the way back, but the above provides enough context. Excerpt
There are many pages where blocks of content are for visual purposes using HTML tables. This structure is assumed to be deprecated in HTML 4.0, but in practice it is difficult to develop an appropriate CSS construct, especially if Tables based did not take into account the exact width of the cell.
However, in the CSS2 specification http://www.w3.org/TR/REC-CSS2/visuren.html#value-inst-table , the possible values for the display property are listed below:
table, inline-table, table-row-group, table-column,
table-column-group, table-header-group, table-footer-group, table-row, table-cell and table-caption
source to share
... given the notorious historical hatred of table layouts in HTML.
This is exactly it. The HTML element is table
semantically intended to hold nothing more than tabular data; page layouts, forms, lists, etc. is almost always not tabular data.
The HTML401 spec says:
Tables should not be used solely as a means of arranging document content, as they can present problems when rendering to non-visual media. In addition, when used with graphics, these tables can force users to scroll horizontally to view a table designed on a large display system. To minimize these problems, authors should use style sheets for layout control, not tables .
CSS display is table-*
not intended only for use with tabular data. It was designed as a way to create layouts in the same way as an HTML element table
, otherwise with rows and columns. A CSS style table shouldn't contain tabular data at all as it doesn't matter - it's purely visual.
The HTML approach is not semantically valid. CSS approach.
As a side note: the HTML5 spec allows an element table
to be used for layout, but only if specified role=presentation
:
Tables should not be used as layout aids . Historically, many Internet authors have tables in HTML to control their page layout , making it difficult to extract tabular data from such documents . In particular, users of accessibility tools such as screen readers are likely to find it very difficult to navigate the pages with the tables used for the layout. If a table is to be used for layout, it must be marked with the role = "presentation" attribute so that the user agent correctly represents the assistive technology table and correctly communicates the author's intent to tools that want to extract tabular data from the document.
source to share
First, for purely practical reasons: CSS needs a way to describe layout elements <table>
. Without rendering rules table-*
in browsers, there had to be a special case for the layout of such elements.
notorious historical hatred of table based layouts
There are two problems with using layout tables.
- Invalid semantics. This is not a problem if you are not using the element
<table>
but are usingdisplay: table
. You can have a table-like layout without requiring table semantics. - Rendering speed. This is not a problem as long as you don't use tables that are too large or use
table-layout: fixed
.
Thus, CSS addresses both issues.
source to share