Table Sort

See the demo page for the finished version of the code.

Tables have often been relegated to providing a primitive form of grid for page layout, at least until CSS was adopted to provide better positioning control.

But they still serve their original and intended purpose of displaying tabular data. In this article, we'll look at this type of usage and see some of the ways the DOM can be used to access and manipulate a table structure.

Tables in HTML

Most designers are familiar with the concept of rows and columns in a table. What you don't often see is the use of other table elements in a web page. Here's a typical example.

<table border="1">
  <tr>
    <th>header 1</th>
    <th>header 2</th>
    <th>header 3</th>
  </tr>
  <tr>
    <td>row 1 cell 1</td>
    <td>row 1 cell 2</td>
    <td>row 1 cell 3</td>
  </tr>
  <tr>
    <td>row 2 cell 1</td>
    <td>row 2 cell 2</td>
    <td>row 2 cell 3</td>
  </tr>
</table>

header 1	header 2	header 3
row 1 cell 1	row 1 cell 2	row 1 cell 3
row 2 cell 1	row 2 cell 2	row 2 cell 3

And here is an example that uses some of the other table constructs available in HTML.

<table border="1">
  <caption style="caption-side:bottom;">Sample Table</caption>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
      <td>Footer 3</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Row 1 Cell 1</td>
      <td>Row 1 Cell 2</td>
      <td>Row 1 Cell 3</td>
    </tr>
    <tr>
      <td>Row 2 Cell 1</td>
      <td>Row 2 Cell 2</td>
      <td>Row 2 Cell 3</td>
    </tr>
  </tbody>
</table>

Sample Table

Header 1	Header 2	Header 3
Footer 1	Footer 2	Footer 3
Row 1 Cell 1	Row 1 Cell 2	Row 1 Cell 3
Row 2 Cell 1	Row 2 Cell 2	Row 2 Cell 3

Note the addition of CAPTION, THEAD, TFOOT and TBODY tags. CAPTION simply adds some text outside the table. You can use the style property caption-side to position this text above, below or to either side of the table.

THEAD, TFOOT and TBODY tags define groups of table rows. THEAD and TFOOT designate rows which will appear at the top and bottom of the table. They are useful for tables with many rows. You could, for example, use CSS to make the TBODY section scrollable so that the header and footer remain visible as the user scrolls through the rows of data. If your browser supports this, you'll see a scroll bar in the example below.

Real Table

Sample Table

Header 1	Header 2	Header 3
Footer 1	Footer 2	Footer 3
Row 1 Cell 1	Row 1 Cell 2	Row 1 Cell 3
Row 2 Cell 1	Row 2 Cell 2	Row 2 Cell 3
Row 3 Cell 1	Row 3 Cell 2	Row 3 Cell 3
Row 4 Cell 1	Row 4 Cell 2	Row 4 Cell 3
Row 5 Cell 1	Row 5 Cell 2	Row 5 Cell 3
Row 6 Cell 1	Row 6 Cell 2	Row 6 Cell 3
Row 7 Cell 1	Row 7 Cell 2	Row 7 Cell 3
Row 8 Cell 1	Row 8 Cell 2	Row 8 Cell 3
Row 9 Cell 1	Row 9 Cell 2	Row 9 Cell 3
Row 10 Cell 1	Row 10 Cell 2	Row 10 Cell 3
Row 11 Cell 1	Row 11 Cell 2	Row 11 Cell 3
Row 12 Cell 1	Row 12 Cell 2	Row 12 Cell 3
Row 13 Cell 1	Row 13 Cell 2	Row 13 Cell 3
Row 14 Cell 1	Row 14 Cell 2	Row 14 Cell 3
Row 15 Cell 1	Row 15 Cell 2	Row 15 Cell 3

If not, the image below shows how it may appear on a browser that does.

Screen Shot of the Above Table in Mozilla 1.0

Likewise, when printing a long table, a good browser will repeat the table header and footer on each page, greatly improving readability.

In addition to the visibility aspect, this ability to logically divide groups of rows can also come in handy when you want to dynamically manipulate tables. We'll look at this aspect next.

Next