A Smarter Way To Learn HTML & CSS(2015)

42
Tables: headings

You can tell the browser to add headings for tables. Here’s a table with column headings.

This is the code.

<table>
<tr>
<th scope="col">Dog</th>
<th scope="col">Cat</th>
</tr>
<tr>
<td>Canine</td>
<td>Feline</td>
</tr>
<tr>
<td>Bark</td>
<td>Meow</td>
</tr>
<tr>
<td>Puppy</td>
<td>Kitten</td>
</tr>
</table>

You begin by creating a row for the headings, just as you would for regular cells. Then, using the opening <th> (for “table heading”) and closing </th> tags, you construct cells with text in them, as you would for regular text cells. But note scope="col". This tells the browser that you want column headings—headings on top—not row headings, which would begin each row on the left. By default, most browsers bold heading text and center it horizontally with the cell. Now let’s create a table with row headings, like this one.

This is the code.

<table>
<tr>
<th scope="row">Species</th>
<td>Canine</td>
<td>Feline</td>
</tr>
<tr>
<th scope="row">Sound</th>
<td>Bark</td>
<td>Meow</td>
</tr>
<tr>
<th scope="row">Immature</th>
<td>Puppy</td>
<td>Kitten</td>
</tr>
</table>

You create a heading for each row. And you write scope="row". Here’s the table with both column and row headings.

This is the code.

<table>
<tr>
<th scope="col"></th>
<th scope="col">Dog</th>
<th scope="col">Cat</th>
</tr>
<tr>
<th scope="row">Species</th>
<td>Canine</td>
<td>Feline</td>
</tr>
<tr>
<th scope="row">Sound</th>
<td>Bark</td>
<td>Meow</td>
</tr>
<tr>
<th scope="row">Immature</th>
<td>Puppy</td>
<td>Kitten</td>
</tr>
</table>

Notice that there are three column headings, the first one blank. This tells the browser that there is no column heading over the column of row headings.

In your HTML file code a table with both column and row headings. Save the file. Display the page.

Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-42-1.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/42.html