Web Design
Table of Contents
by Arnold Kling
Tables in CSS

Here is some code for a table where one of the elements spans two columns.

.tspec1{
padding: 2 %;
border: thin solid red;
}
<Table>
<tr><th colspan = "2" class = "tspec1">My table</th>
</tr>
<tr><td class = "tspec1">first element</td>
<td>second element</td>
</tr>
</table>

Note that we used the class tspec1 to affect the entire table by using it inside the <table> tag. We also used it for the <th> in the first row and for one of the <td> elements in the second row.

You should experiment by getting rid of all of the tspec1 references, then adding them in one by one to the various elements of the table. For example, try leaving it out of the <table> tag but putting it in on of the <td> tags. See what happens. Then experiment with putting the tspec1 reference in different combinations of places.

Next, try setting up another class.

.tspec2{
background: #ffffcc;
border: thin solid black;
padding: 2%;
}

Now, try setting some of the table elements using class = tspec1 and some others using class = tspec2. Note what happens.

Try changing a table element two ways on your HTML page.

  1. As we have been doing, write <td class = "tspec1">table element goes here</td>.
  2. Instead, use <td><div class = "tspec1">table element goes here</div></td>.

I believe that these two approaches are equivalent. Test them and see.

Page created by Arnold Kling. Last Modified July 21, 2001.