The Table Header Cell Element5:15 with Nick Pettit
The table header cell element helps to differentiate between header cells and regular table data. This is helpful for search engine crawlers and screen readers, as well as for CSS styling.
- <th> - The table header cell helps label a group of cells in either a column or a row.
So far we've created a basic table, but its not clear that 0:00 our first row is actually an attempt to label each of our columns. 0:04 Right now, the first row simply looks like more data with name, email and job role. 0:09 We can use a table header cell element on each of these 0:15 three columns to tell the browser, search engine crawlers, and screen readers. 0:19 That these are actually headers and not just regular data. 0:24 So, let's do that now. 0:28 So, let's scroll down in our workspace. 0:31 And lets take a look at this first table row. 0:34 I'm going to open a preview and right now this just looks like more data. 0:38 Like another name, another email address, and another job role. 0:44 So it doesn't look like these are labeling the columns. 0:48 At least to the browser. 0:52 But we can change that by changing these 0:55 from table cells to a table header cell element. 0:57 To do that I'll type th 1:04 instead of td. 1:08 So, let's fix each one of those. 1:11 And you'll notice that work spaces is highlighting some tags in 1:14 red because it's saying that this tag is not closed properly. 1:18 But we can fix each one of those. 1:24 So we'll save that out. 1:27 Switch back. 1:28 And refresh. 1:30 And at this point, you shouldn't see anything different. 1:33 But it is now telling the browser that these are table header cell elements. 1:36 We should also think about labeling our names as table header cells 1:43 because even they're not labeling columns, they are labeling rows. 1:48 So it would be nice for example, to know that this 1:54 email address and this job role is associated with this name. 1:57 So let's do that now. 2:04 We'll change this one to a table header 2:08 cell element instead of a regular table cell. 2:12 We'll do that for the next name here. 2:16 And we'll do this one. 2:23 And then finally, we'll change the last one. 2:24 So we'll save that out. 2:29 Switch back and refresh, and again, you 2:31 shouldn't see anything different at this point. 2:33 But now, each row is labeled just like each column is labeled. 2:35 At this point though it's not really clear if a 2:42 table header is actually labeling a column or a row. 2:45 So for example, this table header cell element could be 2:51 labeling this row or it could be labeling this column. 2:56 Same for any of the others. 3:01 So let's go over to the documentation and see 3:04 if there's an attribute that can help us out here. 3:06 I'm going to type in mdn with a space and type in th. 3:09 So here we see the table header cell element and let's scroll down. 3:16 We'll see a lot of deprecated attributes. 3:24 But here, we have the scope attribute. 3:28 And it says this enumerated attribute defines the cells 3:31 that the header defined in this th element relates to. 3:35 It may have the following values, so 3:40 it could have row, column, rowgroup or colgroup. 3:43 But, we're going to focus on row and column. 3:49 So if we label something as a row, it means that the 3:53 header cell relates to all cells in a row that element belongs to. 3:58 If we label something as a column. 4:03 It will label the column. 4:05 So, let's go back 4:07 and we'll go up to our first table header cell elements. 4:11 We'll type in scope and we'll say it's equal to column. 4:16 Because this name, this email, and this job 4:23 role are labeling each of our three columns. 4:27 So let's do that for the others. 4:31 I'm just going to copy this to my clipboard and paste it two times here. 4:33 And then, we need to label each one of these. 4:38 So, I'm going to say scope, and instead of column, I'm going to say row. 4:42 Because each one of these names is actually labeling 4:46 a row, going across instead of up and down. 4:51 So I'll copy that to my clipboard. 4:56 And I'll paste it and the three more names here. 4:59 One, two, three. 5:03 And we can save that out. 5:05 We'll switch back to the browser and refresh one more time. 5:07 But, there shouldn't be any sorta visual change. 5:11
You need to sign up for Treehouse in order to download course files.Sign up