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

  1. Get a quick look at HTML Tables through this short introductory article by Flavio Copes: Styling HTML Tables with CSS

  2. Follow these 2 interactive screencasts on tables at Scrimba:

  1. 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

MUST READ

  1. 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

  2. Glance over the HTML Docs on Tables, which you’ll no doubt see again.

Additional Resources

LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack

UPDATED: 25.10.2020