HTML5, CSS3, and JavaScript Fourth Edition

CHAPTER 16. TABLES 168

.th2 { width: 50px; }
.th3 { width: 120px; }
.th4 { width: 20px; }
.th5 { width: 40px; }

First Heading
Second Heading
Third Heading
Fourth Heading
Fifth Heading

The nth-child Approach: Assiging class attributes to each heading can
get a bit cumbersome. We can use nth-child to control width.

th:nth-child(1) { width: 20px; }
th:nth-child(2) { width: 50px; }
th:nth-child(3) { width: 120px; }
th:nth-child(4) { width: 20px; }
th:nth-child(5) { width: 40px; }

First Heading
Second Heading
Third Heading
Fourth Heading
Fifth Heading

The no “th” Approach: Styling by way of th can be limiting because
we may want to assign the text-align property differently on a per-column
basis like this:

td:nth-child(1) { text-align: right; }
td:nth-child(2) { text-align: center; }
td:nth-child(3) { text-align: left; }
td:nth-child(4) { text-align: right; }
td:nth-child(5) { text-align: right; }

It can be useful to merge all this information into one set ofspeci-
fications. With this approach, theelement can be avoided and the
heading row can be identified bywhich is then filled with

elements instead ofelements. But they look like.