Week Four | Part Two

Table Basics

The markup needed to use tables is not very different from the markup you write for other tags.

Tables are excellent examples of nested tags, as this snippet of markup demonstrates:

<table>
  <tr>
    <td>Hello!</td>
    <td>Hola!</td>
    <td>Gutten tag!</td>
  </tr>
</table>

The screen result looks like this:

Not very exciting, is it? Still, with a little work, a table can do many things ... from organizing how to say 'hello' in different languages, to managing the layout for an entire translation Web site!

Let's examine each piece of my previous example:

1. The <table> tag tells the browser that a table element has been added to the page:

<table>
  <tr>
    <td>Hello!</td>
    <td>Hola!</td>
    <td>Gutten tag!</td>
  </tr>
</table>

2. The <tr> tag tells that browser that a table row element has been added to the table:

<table>
 <tr>
    <td>Hello!</td>
    <td>Hola!</td>
    <td>Gutten tag!</td>
  </tr>
</table>

3. The <td> tag tells the browser that a table data element has been added to the table row. Table cell is a more common name for a table data element:

<table>
 <tr>
    <td>Hello!</td>
    <td>Hola!</td>
    <td>Gutten tag!</td>
  </tr>
</table>

You might be wondering why you need to use three different tags in order to create one table. The answer is simple: Because you do.

Also remember that Web browsers read table elements left-to right and top-to-bottom. So, even though the table appears to stack information into neat columns, you still have to write the markup left-to-right and top-to-bottom.

Every time you add a table row, you make the table taller from top-to-bottom. Every time you add a table cell, you make the table wider from left-to-right.

Please go to Week Four Part 3 »