Proper HTML Table Structure?

Question

Almost embarrassed to ask, because I have never had a need to use tables much before...

Now I have a project that will require massive organized tables, go figure.

Suppose I have a table like this:

<table border="1px" style="width:300px">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jill</td>
      <td>Smith</td>        
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>      
      <td>94</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>      
      <td>80</td>
    </tr>
  </tbody>
</table>

First of all, from what I have read, <thead> and <tbody> seem to be optional for grouping purposes, but is this basic set up correct?

It looks fine when displayed in a browser, but I wonder if my code actually structures elements correctly in the DOM? I.E. does the DOM correctly associate the <th>First Name</th> with the <td>'s that contain the first name data? I ask because I am going to need to rely on that to sort the tables later with javascript.

I apologize if this is really simple question. If there is a reference to a "proper table structure" article, i will accept that as well.

Answer 1

Your HTML markup is fine, except you should favor CSS classes rather than inline styles, and the border attribute is usually better as a style.

If you are ever curious if you have valid markup, you can use a validator tool to check. There is one available here, provided by W3C: http://validator.w3.org/

HTML is a presentational markup. There is no data association implicit in any given element -- that is to say, the td which you know contains the first name does not in any way associate itself with the heading which labels it visually. As far as HTML is concerned, you don't have data, just a bunch of words which it shapes and boxes and moves around on the screen.

This extends to javascript -- there is no association between the heading and table cells in DOM.

That said, sorting tables are a very common UI pattern, and you can find a large number of examples as well as existing plugins. I highly recommend that you consider an established plugin if you are going to use this for anything other than a learning experience. The plugin author has, presumably, already considered all the many ins and outs, gotchyas, and cross-browser considerations that you would have to take in to account if you tried to craft your own.

Documentation

• MDN Tables - https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Tables

• MDN <table> element - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

• MDN HTMLTableElement - https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement

Answer 2

Best html table structure and css concept :

<table cellpadding="0" cellspacing="0" width="100%" class="table">
<thead>
<tr>
 <th>Header1</th>
 <th>Header2</th>
 <th>Header3</th>
</tr>
</thead>
<tfoot>
<tr>
 <th>Footer1</th>
 <th>Footer2</th>
 <th>Footer3</th>
</tr>
</tfoot>
<tbody>
<tr>
 <td>data1</td>
 <td>data2</td>
 <td>data3</td>
</tr>
<tr>
 <td>data1</td>
 <td>data2</td>
 <td>data3</td>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
</tbody>

</table>

css code and structure

<style>
html, body{font-family:Arial, Helvetica, sans-serif; font-size:12px;}
.table{border-collapse:collapse; width:100%}
.table thead th, .table tfoot th{text-align:center; background:#999; color:#FFFFFF;}
.table th, .table td{padding:5px; border:1px solid #ddd;}
.table tr:nth-child(even){background:#eee;}

</style>