Join James Williamson for an in-depth discussion in this video Scoping table headers, part of HTML: Building Tables.
- As your tables get more complicated…it's not always obvious which table headers…represent table data.…By scoping your table headers…you remove any ambiguity, add meaning…and enhance accessibility…and that's always a good thing.…So to show you how to scope headers…we're gonna be working with the tables.htm file…from 03_04 directory.…Now, if I scroll down…into my table let me kinda talk about…what I mean when it's not always clear…what a table header represents.…
So in our first row we have three table headers;…name, tag and description.…It's pretty obvious that they represent…all of the cell content underneath them.…So they're column based headers in other words.…However, if we start going down into the tbody section…you'll notice that in the first table row…we also have another table header cell here…and this table header cell is followed…by two table cells.…Now that's generally a pretty strong indicator…that that table header represents the row.…
However, it could equally represent…the content underneath it as well…
- Adding content to tables
- Defining table headers
- Styling borders
- Alternating table row colors
- Grouping table content
- Defining columns and headers
- Making table data accessible
Skill Level Beginner
Creating a Responsive HTML Emailwith Chris Converse1h 43m Beginner
HTML5 Projects: Creating a Responsive Presentationwith Justin Putney1h 25m Intermediate
1. Table Basics
2. Styling Tables
3. Adding Meaning
Additional resources3m 47s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.