[click to go to previous page] [to index page] [to next page]

4 : "Table Data" & Columns

previous page

It may help you to think of column elements as cells instead of columns, because that is how you are going to be coding them. I mentioned before that an HTML table is made up of rows, with each row consisting of a certain number of elements ("cells".)
You can line these cells up into columns, but as the following table shows, you don't have to.

Table 5
Cell 1A Cell 1B
CELL 2A CELL 2B CELL 2C
Cell 3A Cell 3B Cell 3C Cell 3D Cell 3E Cell 3F
Cell 4A
Table 5 Code
<table border=2>
  <tr>
    <td>Cell 1A</td>
    <td>Cell 1B</td>
  </tr>
  <tr>
    <td>CELL 2A</td>
    <td>CELL 2B</td>
    <td></td>
    <td></td>
    <td>CELL 2C</td>
  </tr>
  <tr>
    <td>Cell 3A</td>
    <td>Cell 3B</td>
    <td>Cell 3C</td>
    <td>Cell 3D</td>
    <td>Cell 3E</td>
    <td>Cell 3F</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td>Cell 4A</td>
  </tr>
</table>

Table 5 has 4 rows (indicated by opening and closing <tr> tags), and each row has a different number of elements/cells.
The number of apparent columns in the table is determined by the row with the most
<table data> cells. Any cells which are not specified are left blank.
Note that in Row 4 I added three "empty" cells (<td></td>) to make "Cell 4A" appear in the fourth "column."
And in Row 2 I added two empty cells to make "Cell 2C" appear in the fifth "column."

However, the "column" concept is still important, as you can see in the next table. Table 6 demonstrates an attribute for the <td> tag that "stretches" the cells across the table:

Table 6
Cell 1A Cell 1B
CELL 2A CELL 2B CELL 2C
Cell 3A Cell 3B Cell 3C Cell 3D Cell 3E Cell 3F
Table 6 Code
<table border=2>
  <tr>
    <td colspan=3>Cell 1A</td>
    <td colspan=3>Cell 1B</td>
  </tr>
  <tr>
    <td colspan=2>CELL 2A</td>
    <td colspan=2>CELL 2B</td>
    <td colspan=2>CELL 2C</td>
  </tr>
  <tr>
    <td>Cell 3A</td>
    <td>Cell 3B</td>
    <td>Cell 3C</td>
    <td>Cell 3D</td>
    <td>Cell 3E</td>
    <td>Cell 3F</td>
  </tr>
</table>

Table 6 is the same as Table 5, with the exclusion of the fourth row.
In Table 6 the attribute colspan, which stands for "column span," is added to the cells in the first and second rows to stretch them out.
For example, "Cell 1A" has a colspan value of '3,' and so spreads out to cover 3 columns. Another way to say that would be that Cell 1A "spans" three columns. (Remember, the total number of columns is determined by the row which has the most <td> elements.)
Similarly, the following table demonstrates using the attribute rowspan to make a cell encompass multiple rows in a single column.

Table 6B
ROW 1/COL A COLUMN B COLUMN C COLUMN D
ROW 2-3/COL A 2/B 2/C 2/D
3/B 3/C 3/D
Table 6B Code
<table border=3>
<caption>Table 6B</caption>
  <tr>
    <th> ROW 1/COL A </th>
    <th> COLUMN B </th>
    <th> COLUMN C </th>
    <th> COLUMN D </h>
  </tr>
  <tr>
    <th rowspan=2> ROW 2-3/COL A </th>
    <td> 2/B </td>
    <td> 2/C </td>
    <td> 2/D </td>
  </tr>
  <tr>
    <!-- empty -->
    <td> 3/B </td>
    <td> 3/C </td>
    <td> 3/D </td>
  </tr>
</table>

The comment tag {<!-- empty -->} is not necessary; it's just there to help remind us that the first column cell-space already is taken.

  • The rowspan attribute can be used in either the <th> or <td> opening tags.
next
[click to go to previous page] [to index page] [to top of this page] [to next page]

Copyrightę 1998. Liberty Miller . All rights reserved.
This material may not be reproduced without the written permission of the author.
Last Modified 12/04/98

Page 4