Lesson 3.3: Lay It Out! – Tables

In our previous lesson, we discussed the use of divisions and spans for laying out our elements, and we’ll continue with them more in our CSS lessons.

Today, we’re going to move into tables.

Tables

Tables (no, not the wooden ones), is a way to systematically lay out data. Tables consist of rows, which run horizontally, and columns, which run vertically. Where a row and column intersect is called a cell. Take a look at Image 3.3.1 for a picture of a table:

Image 3.3.1: An table diagram.

In websites we can use tables to let us lay out tabular data, such as reports, data from scientific experiments, or more. Basically, tabular data is any data which makes sense to be presented in a table where the columns represent some type of information (such as what the data in each column is) and/or well as the rows (which could represent dates or something).

If you remember, in an earlier lesson I put a table which contained special characters and their codes. That is also an example of tabular data.

The Table Element and Friends

Tables, in HTML just as on paper, consist of rows and cells. While they have columns, we generally don’t explicitly state them, though we can.

Tables begin with a opening table tag (<table>) and end with a closing tag (</table>).

Within those two tags, you have table row elements (<tr>) which also end with a closing tag (</tr>).

Within the table rows, you have table data (our cells), which, not surprisingly, begin with an opening tag (<td>) and end with a closing tag (</td>).

Within the table data elements, we have our data itself. You can place any inline elements (such as images) within the table data, or just type plain text.

Here is an example table:

<table>
  <tr>
    <td>1</td>
    <td>Horse</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Goat</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Duck</td>
  </tr>
</table>

This table looks like this:

If you notice, there are 2 columns, because each row has two table data elements. The number of table data elements within each row dictates the number of columns the table will have. This also leads to another point: if you have rows with different numbers of cells (table data), then weird stuff may happen.

Also, keep in mind the reason it has the pretty border is because of CSS. We’ll cover that later on in the CSS lessons.

If you purposely want to have different amounts, you need to have your cells expand to take up the extra space. You do this by placing a column span (colspan) attribute within each cell that needs to expand. Here is an example:

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td colspan="2">2</td>
  </tr>
  <tr>
    <td colspan="3">1</td>
  </tr>
</table>

Which looks like this:

The general rule is that each row must account for the same number of columns as every other row.

There is also a row span (rowspan) attribute for the table data which has a similar effect, except that it causes the cell to take up more than one row. It will expand below itself. So, if you have one row with 3 cells, the first having row span equal to 2, and the second row has 2 cells, the first cell of row one will take up both the first space in row one and row two, with the others taking the last two spots in their respective row.

Table Headers, Table Bodies, and Table Footers

Along with the basic elements we mentioned earlier, there are a handful other, lesser used table elements.

There is one other elements that can do the job of a table data, in special cases, the table header cell (<th>). It works exactly like the table data cell, except it is meant for headers, so the first row or two in your table which describe what the column is suppose to be.

Additionally, there are also three table group elements, table head (<thead>), table body (<tbody>) and table footer (<tfoot>). These don’t have any default look, and without CSS, completely unaffect the page. Their purpose is for giving meaningful groupings to the various rows in a table.

To use them, you simply wrap the specific rows with the opening and closing tags of these elements. Then, if you want to give them some appearance, you would use CSS on the group elements.

Here is a quick example demonstrating the table head:

<table>
  <thead>
    <tr>
      <td>Animal Number</td>
      <td>Animal Name</td>
    </tr>
  </thead>
  <tr>
    <td>1</td>
    <td>Horse</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Goat</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Duck</td>
  </tr>
</table>

Related Extra Credit

Back when the World Wide Web first camp into existence, when it was simply HTML being used and CSS wasn’t even thought about yet, nearly all good-looking websites were structured using a giant table.

While this is still possible, it shouldn’t be done anymore thanks to the advent of CSS for a couple of reasons:

1) It isn’t semantically correct: Semantics, when discussing HTML, basically means using each element for it’s intended purpose. Tables were never intended for layout, they were intended for tabular data. Divisions and spans are meant to be containers for other elements, so they fit the bill perfectly of using them for layouts.

2) HTML is for structure, CSS is for design: According to web standards, HTML is meant strictly to provide the structure of a website. This means, that before you apply CSS, it should be a fairly boring black-and-white list of data going down your page. Then, by using CSS, you change the layout, colors, borders, etc. of the page and give it your great design. When you use a table for layout, you are violating this rule because you are using the table to give your HTML the design, not CSS.

Other websites may teach you to use tables for the overall layout, but don’t listen. Divisions and spans may be trickier to use at first, but once you get the hang of it they are a thousand times easier to use to create amazing layouts.

Also, if you haven’t yet, now is a great time to get started reading the CSS Lessons.