Organizing Data with Tables

When HTML was coming to life tables were used all over the place, and were the primary means by which websites were built. They were used for positioning content as well as building the overall layout of a page. Fortunately we have come a long way since then. Today tables are, and should be, used specifically for organizing data.

Creating a Table

To initialize a table on a page the table element is used. Using the table element signifies that the data within these tags will be displayed in two or more dimensions. The table element is only an initializer and it must encompass a table row, along with table data.

<table> . . . </table>

Table Header

To designate a heading for a column or row of cells the table header element, th, should be used. The table heading element works just like that of the table data element in that it creates a cell for data. The value to using the table header element over the table data element is that the table header provides a semantic value to table, signifying the data within the cell as a heading. The two elements are comparable to that of a heading, h1, and paragraph, p. While a heading’s content could be placed within a paragraph tag it doesn’t make sense to do so. Using a heading tag specifically adds more value to the content and provides an easier way to stylize all headings. The exact same is true for headers within tables.

<th> . . . </th>

Table Row

Once the table has been defined in HTML, table rows may be added using the tr element. A table can have numerous table rows, or tr elements. Depending on the amount of information the number of table rows can be substantially high. To add data into these table rows the table data, td, and table header, th, elements are used.

<tr> . . . </tr>

Table Data

The best way to add data to a table is via the table data, or td element. The table data element creates a cell, of which may include data. Listing multiple table data elements one after the other will create columns within a table row. When the contents of a cell is a heading for either a row or column it should be wrapped within the table header element, th, not the table data element, td.

<td> . . . </td>

Table Demo

<table border="1">
   <tr>
      <th>Date</th>
      <th>Work</th>
      <th>Details</th>
      <th>Time</th>
   </tr>
   <tr>
      <td>Monday, Sep 5th</td>
      <td>HTML Learning</td>
      <td>Site Skeleton Creation</td>
      <td>5:00 PM</td>
   </tr>
   <tr>
      <td>Wednesday, Sep 7th</td>
      <td>CSS Learning</td>
      <td>Advance Site Creating</td>
      <td>7:00 PM</td>
   </tr>
   <tr>
      <td>Thursday, Sep 8th</td>
      <td>jQuery</td>
      <td>Adding functionality</td>
      <td>5:00 PM</td>
   </tr>
   <tr>
      <td>Saturday, Sep 10th</td>
      <td>PHP Programming</td>
      <td>Making site dynamic</td>
      <td>7:00 PM</td>
   </tr>
</table>
Demo of above code
Date Work Details Time
Monday, Sep 5th HTML Learning Site Skeleton Creation 5:00 PM
Wednesday, Sep 7th CSS Learning Advance Site Creating 7:00 PM
Thursday, Sep 8th jQuery Adding functionality 5:00 PM
Saturday, Sep 10th PHP Programming Making site dynamic 7:00 PM

comments powered by Disqus