Header cells
Learn special styles for th.
The th and td difference
The th tag is used for a header cell; td is a normal data cell. Browsers render th bold and centered by default.
Those defaults are a fine start, but in professional tables you write separate styles for th: a background color, a text color, and alignment. That makes the header row stand out.
Classic styles for th
A th selector often holds three declarations: background for the row color, color for the text, and text-align for alignment. Example: th { background: #1e3a8a; color: #fff; text-align: left; }.
A dark background with light text is a classic way to make the header stand out. When every column header shares the same style, the table looks tidy.
Exercise Write header styles for a course schedule
For a table with class .program, add three declarations to the .program th selector: background: #1e3a8a;, color: #ffffff;, text-align: left;.
Show example solution
open a .program th selector and write the three declarations one below the other.
Example solution:
.program th {
background: #1e3a8a;
color: #ffffff;
text-align: left;
}Test yourself
-
Which tag is for header cells?
<table> <tr> < ?>Product</?> <td>Pen</td> </tr> </table>- td
- tr
- th
- caption
Show answer
th — Correct! th is for header cells.
-
Background for a header cell
th { background: ____; color: #ffffff; }Show answer
th { background: #1e3a8a; color: #ffffff; } -
Match the th properties
- background
- background color
- color
- text color
- text-align
- alignment
- padding
- inner space