HTML and CSS Reference
In-Depth Information
no cell content
colspan attribute used
to span two rows each
rowspan
attribute
used to span
four rows
Figure 4-9 Table with row and column spanning.
Coding the Table
After you have completed the table design, you can begin coding the table using
HTML tags. Table 4-1 shows the four main HTML tags used to create a table. Some of
the tags have attributes, which are discussed later in this chapter.
Table 4-1 HTML Table Tags
Tag
Function
<table> </table>
• Indicates the start and end of a table
• All other table tags are inserted within these tags
<tr> </tr>
• Indicates the start and end of a table row
• Rows consist of heading or data cells
<th> </th>
• Indicates the start and end of a table heading (also called a heading cell)
• Table headings default to bold text and center-alignment
<td> </td>
• Indicates the start and end of a data cell in a table
• Data cells default to normal text and left-alignment
Figure 4-10a shows an example of these tags used in an HTML file, and Figure 4-10b
shows the resulting Web page. As shown in Figure 4-10b, the table has four rows (a table
header and three rows of data cells) and two columns. The rows are indicated in the HTML file
in Figure 4-10a by the start
<tr>
tags and the end
</tr>
tags. For this simple table, the number
of columns in the table is determined based on the number of cells within each row. As shown
in Figure 4-10b, each row has two cells, which results in a table with two columns. (Later in this
chapter, you will learn how to indicate the number of columns within the <table> tag.)
As shown in the HTML in Figure 4-10a, the first row includes table heading cells,
as indicated by the start
<th>
tag and end
</th>
tag. In the second, third, and fourth rows,
the cells contain data, indicated by the start
<td>
tag and end
</td>
tag. In the resulting
table, as shown in Figure 4-10b, the table header in row 1 appears as bold and centered
text. The text in the data cells in rows 2 through 4 is left-aligned and normal text. The
