Tables in HTML (v1)
Introduction
Tables used to be pretty much the only game in town — when you had data of any sort, you pretty much had to use one to display it. You also had to use tables to wrangle the layout of your page into some semblance of order. Thankfully, those days are behind us (thanks to CSS) and now tables can often be more of a hindrance than a benefit for any but the core use cases. That said, they are still the go-to way to get structured data onto the page.
Learning Objectives
- When should you use tables?
- What is the structure of a table?
- What are the special tags that dictate certain parts of a table, e.g. headers or captions?
- How can you combine cells in a table?
- Why do you need to be careful about your padding and borders in tables?
- How do you align text within cells in a table?
Study
Get a quick look at HTML Tables through this short introductory article by Flavio Copes: Styling HTML Tables with CSS
Follow these 2 interactive screencasts on tables at Scrimba:
- Take a 15 minutes break, grab yourself a cup of coffe, set your chair at a comfortable position, fire up VSCode and study this extensive chapter on HTML Tables by Shay Howe
Take another short break and carefully study the following MDN article that talks about advanced table features as well as how to create web accessible tables: HTML table advanced features and accessibility
Glance over the HTML Docs on Tables, which you’ll no doubt see again.
Additional Resources
Feel free to suggest any resources that helped you out with the concepts of this lesson.
UPDATED: 25.10.2020