Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
This course introduces web designers to the nuts and bolts of HTML (HyperText Markup Language), the programming language used to create web pages. Author Bill Weinman explains what HTML is, how it's structured, and presents the major tags and features of the language. Discover how to format text and lists, add images and flow text around them, link to other pages and sites, embed audio and video, and create HTML forms. Additional tutorials cover the new elements in HTML5, the latest version of HTML, and prepare you to start working with Cascading Style Sheets (CSS).
HTML5 provides a few semantic elements just for tables. Let's go ahead and make a working copy of tables-semantic.html and rename that with a -working at the end and open that in my text editor. I'm going to go ahead and scroll through this for the benefit of those who are typing along at home. Why don't we open this in the browser as well and see what it looks like? And the first thing we'll look at is you'll notice that the table itself has changed a little bit from our last movie.
We have a few new sections here. We have thead, which is wrapped around this row with the th elements in it. And there is a new tfoot, which is wrapped around a new row. It just says Column 1, Column 2, and Column 3. And then tbody is wrapped around all of the other rows. So each of these elements only has rows for content, and the thead section must be the first thing in the table after a caption, if there is a caption. And tfoot can either be at the top or at the bottom, and tbody can be anywhere after the thead.
For the most part, these have no presentation meaning, except that the tfoot element always ends up at the bottom of the table. So you notice, even though I have it here above the tbody in this document, it's still showing up at the end of the table. Using these elements has a couple of simple advantages, but for the most part, it's really for the benefit of scripts and other automated processes to help them to better understand the structure of your table. If for example, I used td elements here in the header, instead of the ths, you'll notice if I reload this document in the browser, that now those headers look just like the rest of the table.
I could, if I wanted to, come into the style and I could use a descendent selector and say thead td, and then I could style those particular td cells without styling the rest of them. For example, I could say font-weight: bold and I could say text-align: center; and then when I reload the document, you see those are bold and centered again just like they were before. But for the most part, these are sectioning elements, much like section and article or for the rest of a document for a non-table part of a document, and these are for the benefit of scripts to help the scripts and other processes to better understand the structure of your table.
Find answers to the most frequently asked questions about HTML Essential Training.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.