Display:Table Versus Using Tables

display:table versus using tables

If the information being displayed on the forum is tabular, then don't be afraid to use a table if it makes sense semantically.

For general page layout, personally I wouldn't use it. I'd stick to the typical block-level div layouts and floats. IE7 does not support display:table and there are other caveats, such as the fact that it will expand in width based on content. For the future, I look forward to when flexbox is fully supported.

I do occasionally use display:inline-block for centering dynamic list items and the like.

Why should I use display:table instead of table

What's the benefits of structuring my site with divs and apply the display:table property ( display:tr, display:tr).

None whatsoever in my opinion, except that you take away compatibility with older browsers. The idea that using DIVs with display: table-* is somehow better than <table>s is idiotic IMO, and the result of totally misguided hysteria against table elements. (Not attacking you @Nimo, just criticizing some people who have taken the "tables are evil" meme too far.)

Tables are supposed to be used to represent tabular data, not to be misused for layouting.

There are, however, certain abilities that tables have that are still very hard to simulate using pure CSS. You either need massive hacks and sometimes even JavaScript based workarounds to make those things work.

You should design your layouts in a way that don't rely on those abilities.

In some rare cases, you do need them. But then, it doesn't matter whether you use a proper <table><tr> or a brain-dead <div style="display: table"><div style="display: table-row"> (which one is more semantic and better readable by the way?)

If you need display: table-* for your layout, you have one of those rare cases at hand, or you have painted yourself in a corner anyway. Either way, with a <table>, you at least get consistent browser support.

html table vs css display table

The display table let the element behave like a element without using a HTML table element, so probably you will have more flexibility on your development. So you will have the benefits of a table and the flexibility of development without table, becase tables are always difficult and and hard to work

css display:table vs html table , Which is more appropriate to use?

There's not a whole lot of advantages to using table markup for page layout other than for someone that doesn't want to learn proper HTML/CSS and/or is using some sort of WYSIWYG editor.

You definitely want to use tables for tabular data, however, as there are a lot of good accessibility reasons.

The advantages of CSS for page layout (over tables) is:

• presentation is separated from content (which often means less HTML to deal with)
• presentation is more flexible when updating
• presentation is a lot easier to tailor to various devices/screens

The css display property of 'table' allows your your CSS to act more like a traditional table. This gives you the benefits of CSS, but lets you use your older table logic.

If you are well versed in CSS, about the only time you'd really want to leverage display: table is when you run into situations where you want to handle vertical centering of content...something that CSS in general seems to fail at. Do note that display: table, like a lot of CSS, does not work in older versions of IE.

What is the difference between the table element and CSS display:table

Yes, there are differences between using <table> and using <div style="display:table">.

Differences in styling

Every element has its own default set of styles. Changing one style property (in this case, display) doesn't change the other properties, so you'll have to put those in explicitly if you want to emulate a real table.

Property in table in div (with display:table)  
border-spacing 2px 0px  
box-sizing border-box¹ content-box  
border-color #808080² same as currentColor  
Property in caption in div (with display:table-caption)  
text-align center start  
Property in tbody in div (with display:table-row-group)
vertical-align middle baseline  
border-color #808080² same as currentColor  
Property in th in div (with display:table-cell)  
font-weight 700 400  
padding: 1px 0px  
text-align center start  
vertical-align middle baseline  
Property in td in div (with display:table-cell)  
padding: 1px 0px  
vertical-align middle baseline  

¹ Mozilla only

² Chrome only

So a stylesheet for a proper CSS table needs to contain at least the following:

.table {display:table; border-spacing:2px;}
.caption {display: table-caption; text-align:center;}
.colgroup {display:table-column-group}
.col {display:table-column}
.thead {display:table-header-group; vertical-align:middle;}
.tbody {display:table-row-group; vertical-align:middle;}
.tfoot {display:table-footer-group; vertical-align:middle;}
.tr {display:table-row;}
.th {display:table-cell; vertical-align:middle; padding:1px;
     text-align:center; font-weight:700;}
.td {display:table-cell; vertical-align:middle; padding:1px;}

Differences in attributes

Table elements have more attributes than plain divs.

table  
border Draws outset border, and inset borders around all cells 
sortable Enables a sorting interface for the table  
colgroup  
span Number of columns spanned by the element  
col  
span Number of columns spanned by the element  
th  
colspan Number of columns that the cell is to span  
rowspan Number of rows that the cell is to span  
headers The header cells for this cell  
scope Specifies which cells the header cell applies to  
abbr Alternative label to use for the header cell  
sorted Column sort direction and ordinality  
td  
colspan Number of columns that the cell is to span  
rowspan Number of rows that the cell is to span  
headers The header cells for this cell  

Differences in markup

In tables, the elements colgroup, thead, tbody, tfoot, tr, th and td have optional end tags. With div, you have no such luxury and you will need to write out all end tags in full.

In addition, tbody also has an optional start tag. That means a table with only tr and no tbody elements in the markup will have a tbody in the DOM tree.

This may not seem to matter much, but there are subtle differences in the results under some circumstances.

Given the above CSS and the following markup

<table>
 <tr>
  <td style="vertical-align:inherit">1</td>
  <td>1<br>2</td>
 </tr>
</table>
<hr>
<div class="table">
 <div class="tr">
  <div class="td" style="vertical-align:inherit">1</div>
  <div class="td">1<br>2</div>
 </div>
</div>

the table cells in the actual table will be vertically aligned to the middle (because they inherit from the tbody), but not in the CSS table, where there is no tbody to inherit from. Keep that in mind when writing your HTML.

Differences in the JavaScript interface

Table nodes have more properties:

createCaption(), deleteCaption(), createTHead(), deleteTHead(), createTFoot(), deleteTFoot(), createTBody(), insertRow(), deleteRow(), caption, tHead, tFoot, tBodies[], rows[], border, frame, rules, summary, width, bgColor, cellPadding, cellSpacing which, hopefully, speak for themselves.

That's about it. Differences in performance are negligible.

Actual table Vs. Div table

It is semantically incorrect to simulate data tables with divs and in general irrelevant to performance as rendering is instant. The bottle neck comes from JavaScript or extremely long pages with a lot of nested elements which usually in the old days is 100 nested tables for creating layouts.

Use tables for what they are meant to and div's for what they are meant to. The display table-row and cell properties are to utilize div layouts more then creating tables for data representations. Look at them as a layout columns and rows same as those you can find in a newspaper or a magazine.

Performance wise you have couple of more bytes with the div example, lol :)

CSS display table vs normal HTML Table

The problem is with: .body and .footer divs. You don't assign style for them so they are rendered as "display: block"'s and break your layout. I added "display: table-row-group;" to .body, and "display: table-footer-group;" to .footer. This fixed it.

Example: http://jsfiddle.net/6Lyvm/9/

Is it bad use display: table; to organise a layout into 2 columns?

There are two essential arguments for not using tables:

1. Semantic markup.
2. Avoiding tag soup. (too many tags)

So, your method is not really violating either of those goals. However, you should check this code in IE7 and IE6 - you are likely to see some inconsistencies there.

As was mentioned - don't worry about sticking to these rules too tightly. They are guidelines, and you should use the right tool for the job you are doing. What is important here is knowing what the various techniques are best for, and when to use them. Sometimes, using a table is the best tool for what you are trying to do, sometimes it is not.

---

Related Topics