Actual Table VS. Div Table

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 :)

Why use divs over tables for a TABLE?

Nowadays, tabular data can be formatted nicely with divs and flex box css model. Not 100% as with table, but very close. Additionally, table elements (especially tr) can be styled with css to achieve responsive behavior for mobiles and tablets. At least in most modern web browsers.

So I'd use tables when you need to keep 'rubber' columns (proportionally stretching table heading and table body columns) and use divs when you can make columns with already known width and when semantics is not that important.

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.

Why is using DIVs or spans tags better than using a table layout?

It's mostly about the semantics, I think. A <table> is built to represent tabular data, and using it to lay out elements violates that. Also, anything that can be done with <table> can be done just as easily or easier with CSS 99.9% of the time. It's not that much easier in the other cases, and like you say, it makes markup ugly and hard to follow. It also violates the separation of content, behaviour, and presentation fundamental to web development.

Complicated form table vs div

I would go the div route. As long as you're careful of your widths when you apply floats, it's actually pretty straightforward to get the layouts to work properly in different screen resolutions.

Here are a few rules:

1. Set a max width on your form or your form's wrapper element. If you want to float elements on one row make sure their width's added together does not exceed this width.
2. If you are adding horizontal padding/margins to your floated elements remember that these add to the total width of the element.
3. Avoid mixing percentage widths with pixel padding and margins. Apply the percentage width to a parent element and the pixel padding/margins to a child element.
4. Use clearing elements between your rows of elements to keep everything in line.

As to the markup, you can use the form elements along with CSS to create a semantic structure:

<fieldset>
    <legend>Fieldset Title</legend>

    <label for="input1">Input 1:</label>
    <span><input type="text" id="input1" name="input1"/></span>
    <label for="input2">Input 2:</label>
    <span><input type="text" id="input2" name="input2"/></span>

    <br/>

    <label for="input3">Input 3:</label>
    <span><input type="text" id="input3" name="input3"/></span>
    <label for="input4">Input 4:</label>
    <span><input type="text" id="input4" name="input4"/></span>
</fieldset>

And the CSS:

fieldset {
    padding: 20px 0;
    width: 600px;
    margin: 0;
    border: 0;
}

legend {
    display: block;
    width: 100%;
    background: black;
    color: white;
}

label, span{
    float: left;
    width: 150px;
}

input {
    width: 120px;  
}

br {
    clear: both;  
}

You can see the result here.

Should I use a html table or divs for a songlist?

Use a HTML Table.

There is nothing wrong with HTML tables, they are designed for tabular data.

---

People are often told to steer clear of tables because they are too often used for layout purposes which isn't semantically correct.

---

Related Topics