Lesson 14: Tables

This page shows how to design a table in which

• the table and column widths are percentages of the page width,
• a cell can span multiple rows,
• the cells can have varying amounts of padding, and
• the borders, text, and background colors are all controlled using CSS style properties.

The table width is set to 100% of the page size. The width of the first <td> element in each row is set to 50%. The very first <td> element is defined using
<td class="left" rowspan="5">
The rowspan attributes defines how many rows the element will span. Since the table has five rows, this element will span the entire height of the table. It is important that you reduce the number of elements in the remaining rows by one! The first row has three elements, but the remaining rows have only two. The class="left" means that this particular <td> element will be styled by the "left" class define in the CSS styles for this page.

Notice in the styles at the top of the page source that there is a style td.left. The ".left" tells the browser that "left" is a class of styles that controls td elements. Any <td> element written as <td class="left"> will use this style. In this page, there is a class for th called "middle", a class for th called "right", and a class for td called "left". Classes inherit the style properties of their parents. In other words, the th.middle class gets all of the properties from th, and then it adds to them or changes some of them.

Padding is the amount of space between the cell's contents and the border of the cell. It is assigned values the same way that margins are. Margins are the amounts of space outside of the borders of HTML elements. A table can have a margin, but table cells and table rows do not. Changing the margin on a table cell or a table row will have no effect. The spacing between cells in a table, or between rows, is the cellspacing. It is a table property. It adds space between the cells in the table. This table will ignore any cellspacing because in the CSS, it sets the border-collapse property to "collapse". The border-collapse property controls whether to merge the borders between adjacent cells into a single border. By setting border-collapse to "collapse" even if there is cellspacing, the two adjacent borders are merged into one, so the spacing disappears.