More About Tables

So, now you've learned to create a basic table with some rows and columns. You also know that you can nest tables as much as needed to get the effect that you desire on your web pages.

There are some other things that you can do with tables which make them even more useful.

Spanning Rows

The example below shows how the ROWSPAN construct works. As you can see, this allows you to have a column which spans more than one row.

ROWSPAN

Cell 1	Rowspan	Cell 3
Cell 2	Rowspan	Cell 4

<table border="1">
  <tr>
    <td>Cell 1</td>
    <td rowspan="2">Rowspan</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 2</td>
    <td>Cell 4</td>
  </tr>
</table>

Spanning Columns

In addition you can also span columns, as shown in the example below.

COLSPAN

Cell 1	Cell 2	Cell 3
Colspan
Cell 4	Cell 5	Cell 6

<table border="1">
  <tr>
     <td>Cell 1</td>
     <td>Cell 2</td>
     <td>Cell 3</td>
  </tr>
  <tr>
     <td colspan="3">Colspan</td>
  </tr>
  <tr>
     <td>Cell 4</td>
     <td>Cell 5</td>
     <td>Cell 6</td>
  </tr>
</table>

Combining Rowspan and Colspan

The example below shows how the COLSPAN and ROWSPAN can be combined in the same table to form some very interesting and useful shapes.

Combining COLSPAN and ROWSPAN

Cell 1	Cell 2	Rowspan
Colspan
Cell 3	Cell 4

<table border="1">
  <tr>
     <td>Cell 1</td>
     <td>Cell 2</td>
     <td rowspan="3">Rowspan</td>
  </tr>
  <tr>
     <td colspan="2">Colspan</td>
  </tr>
  <tr>
     <td>Cell 3</td>
     <td>Cell 4</td>
  </tr>
</table>

Adding headers to a table

You can put headers on a table, as shown below. Notice how the <TH> and </TH> are used instead of the <TD> and </TD> tags.

Adding table headers

Head 1	Head 2	Head 3
Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

<table border="1">
  <tr>
    <th>Head 1</th>
    <th>Head 2</th>
    <th>Head 3</th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
    <td>Cell 5</td>
    <td>Cell 6</td>
  </tr>
</table>

Combining headers with COLSPAN

You might want a header to span multiple columns. The technique is shown in the example below.

Adding table headers with COLSPAN

Head 1	Head 2
Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

<table border="1">
  <tr>
    <th>Head 1</th>
    <th colspan="2">Head 2</th>
  </tr>
    <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
    <td>Cell 5</td>
    <td>Cell 6</td>
  </tr>
</table>

Adding headers to rows

You can also put headers on rows, as shown below.

Adding table headers to the rows

Head 1	Cell 1	Cell 2
Head 2	Cell 3	Cell 4
Head 3	Cell 5	Cell 6

<table border="1">
  <tr>
    <th>Head 1</th>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <th>Head 2</th>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
  <tr>
    <th>Head 3</th>
    <td>Cell 5</td>
    <td>Cell 6</td>
  </tr>
</table>

Adding headers to rows with ROWSPAN

You can also put headers on rows and use the ROWSPAN to span rows, as shown below.

Adding table headers to the rows and using ROWSPAN

Head 1	Cell 1	Cell 2
Head 2	Cell 3	Cell 4
Head 2	Cell 5	Cell 6

<table border="1">
   <tr>
      <th>Head 1</th>
      <td>Cell 1</td>
      <td>Cell 2</td>
   </tr>
   <tr>
      <th rowspan="2">Head 2</th>
      <td>Cell 3</td>
      <td>Cell 4</td>
   </tr>
   <tr>
      <td>Cell 5</td>
      <td>Cell 6</td>
   </tr>
</table>

Adding multiple headers to the columns

Now to get a little more fancy.

Adding multiple headers to the columns

Top 1		Top 2
Head 1	Head 2	Head 3	Head 4
Cell 1	Cell 2	Cell 3	Cell 4
Cell 5	Cell 6	Cell 7	Cell 8

<table border="1">
  <tr>
    <th colspan="2">Top 1</th>
    <th colspan="2">Top 2</th>
  </tr>
  <tr>
    <th>Head 1</th>
    <th>Head 2</th>
    <th>Head 3</th>
    <th>Head 4</th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
  <tr>
    <td>Cell 5</td>
    <td>Cell 6</td>
    <td>Cell 7</td>
    <td>Cell 8</td>
  </tr>
</table>

Adding multiple headers to the columns and rows

Now to get a lot more fancy.

Adding multiple headers to the columns and rows

		Top 1		Top 2
		Head 1	Head 2	Head 3	Head 4
Merged Row	Row Head 1	Cell 1	Cell 2	Cell 3	Cell 4
Merged Row	Row Head 2	Cell 5	Cell 6	Cell 7	Cell 8

<table border="1">
  <tr>
     <th colspan="2" rowspan="2"></th>
     <th colspan="2">Top 1</th>
     <th colspan="2">Top 2</th>
  </tr>
  <tr>
     <th>Head 1</th>
     <th>Head 2</th>
     <th>Head 3</th>
     <th>Head 4</th>
  </tr>
  <tr>
     <th rowspan="2">Merged Row</th>
     <th>Row Head 1</th>
     <td>Cell 1</td>
     <td>Cell 2</td>
     <td>Cell 3</td>
     <td>Cell 4</td>
  </tr>
  <tr>
     <th>Row Head 2</th>
     <td>Cell 5</td>
     <td>Cell 6</td>
     <td>Cell 7</td>
     <td>Cell 8</td>
  </tr>
</table>