The Table Head and Body Elements3:06 with Nick Pettit
The table head element is a completely different element from the table header cell element. In combination with the table body element, the table will gain additional structure.
- <thead> - The table head element (not to be confused with the table header cell element) defines a set of rows that make up the header of a table.
- <tbody> - The table body element defines one or more rows that make up the primary contents (or "body") of a table.
[MUSIC] 0:00 Our table is looking pretty good, but there's more that we can do to add 0:04 some additional structure to our table, this 0:09 extra structure can be helpful for automated pieces 0:12 of software, like search engines or screen 0:15 readers, but it's also helpful for designers, because 0:18 it adds some additional elements that can be 0:21 targeted with CSS, so let's take a look. 0:24 Similar to the structure of an HTML document, where we have a head and 0:28 a body, we can also add a head and a body to our table. 0:33 Now, we won't use the same HTML elements, because that would 0:39 be invalid syntax but we can add a table head element. 0:42 So, I'm going to type this in here and this is going to wrap, the first row 0:49 in our table and I'm just going to highlight this and indent it there we go. 1:00 And the table head element is actually a 1:10 completely different element, from the table header cell element. 1:13 The table head element, warps a set of rows that defines the 1:20 columns, for table, which is what these table header cell elements define. 1:26 Now, the table head elements Is not 100% necessary, but it's nice to define 1:32 this for search engine crawlers and access 1:40 ability purposes, and it's also helpful for styling. 1:43 So let's save this out, switch back to our preview, 1:48 and now you'll notice that this is nicely styled and highlighted, and 1:53 that's because there is some CSS included with this workspace, that will 1:58 automatically target the table head and highlight it nicely. 2:03 So let's go back to our workspace, and let's add a 2:09 T body element, so I'm going to put that right here. 2:13 And I will close it down 2:18 here at the bottom, and the table body will wrap all of the content 2:25 of our table, and not anything that actually labels our columns, like up here. 2:32 So, I'll indent that by one tab, save that out, and switch back and refresh, 2:38 and you shouldn't really notice anything different, but similar to the T-head, 2:45 the T-body, just defines the body of table, and it should always wrap 2:50 all of the data, Inside of your table and shouldn't include the first row. 2:56 This element is also optional but it is nice to have 3:02
You need to sign up for Treehouse in order to download course files.Sign up