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

Next lesson: Zebra stripes

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies