4 : "Table Data" & Columns

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."

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.

Page 4