Patterns of Chaos
» HTML Tutorial » Tables
Logo

Tables

Tables are a way to present certain information, like a list of properties for a bunch of different things. To define a table, you not only need to define the entire table, you have to define each row, and each item within each row (called a cell).

It's probably easier to talk about tables if you can see one, so here you go:

Row 1Something hereSomething else here
Row 2Something hereSomething else here
Row 3Something hereSomething else here

Rows go across, columns go up & down.

To define a table, you start with a <table> tag. Then you need to put each row in a <tr> tag, and each item in the row in a <td> tag. So here is the html code for that table above:

<table border=1>
  <tr><td>Row 1</td><td>Something here</td><td>Something else here</td></tr>
  <tr><td>Row 2</td><td>Something here</td><td>Something else here</td></tr>
  <tr><td>Row 3</td><td>Something here</td><td>Something else here</td></tr>
</table>

What's with that border=1? It tells the browser that you want a border on your table cells. If you don't use it, the lines don't show up, and everything will cram together. There are no borders to the individual table cells. That looks like this:

Row 1Something hereSomething else here
Row 2Something hereSomething else here
Row 3Something hereSomething else here

Often, you will want to have headers at the top of each column to explain what each column is. You make a header row exactly the same as any other row, only you use a <th> tag for each item instead:

<table border=1>
  <tr><th>Row Number</th><th>First thing</th><th>Second thing</th></tr>
  <tr><td>1</td><td>Something</td><td>Something else</td></tr>
  <tr><td>2</td><td>Something</td><td>Something else</td></tr>
  <tr><td>3</td><td>Something</td><td>Something else</td></tr>
</table>

This table, with headers, looks like this:

Row NumberFirst thingSecond thing
1SomethingSomething else
2SomethingSomething else
3SomethingSomething else

Notice how the header is automatically bold, so it stands out?

Now, let's put tables to use by adding a section to our solar system page with information about the planets, right before the Notes. We'll just look at the HTML for the new section now, since the page is getting a bit long:

  <h2>Properties of the planets</h2>
  <p>Here are the planets listed with their distance from the sun, diameter, and
    how long it takes to orbit (length of year). Distane and diameter are given
    in miles</p>
  <table border=1>
    <tr>
      <th>Planet</th>
      <th>Distance From Sun</th>
      <th>Diameter</th>
      <th>Length of Year</th>
    </tr>
    <tr>
      <td>Mercury</td>
      <td>35,983,610</td>
      <td>3,032</td>
      <td>88 days</td>
    </tr>
    <tr>
      <td>Venus</td>
      <td>67,232,360</td>
      <td>7,521</td>
      <td>225 days</td>
    </tr>
    <tr>
      <td>Earth</td>
      <td>92,957,100</td>
      <td>7,926</td>
      <td>365 days</td>
    </tr>
    <tr>
      <td>Mars</td>
      <td>141,635,300</td>
      <td>4,222</td>
      <td>687 days</td>
    </tr>
    <tr>
      <td>Jupiter</td>
      <td>483,632,000</td>
      <td>88,846</td>
      <td>11.9 years</td>
    </tr>
    <tr>
      <td>Saturn</td>
      <td>888,188,000</td>
      <td>74,898</td>
      <td>29.7 years</td>
    </tr>
    <tr>
      <td>Uranus</td>
      <td>1,783,950,000</td>
      <td>31,763</td>
      <td>84.3 years</td>
    </tr>
    <tr>
      <td>Neptune</td>
      <td>2,798,842,000</td>
      <td>30,778</td>
      <td>164.8 years</td>
    </tr>
  </table>

And here's the new page:


 
Contact