HTML: Tables

1h 26mBeginner2020-01-23

Authors

Jen Kramer

Teaches web design and development

Course details

Sometimes you need to share data, and not just visualizations, directly with other people. HTML tables make this easy. While they have a complex history of use and misuse, HTML tables are great at their key purpose: presenting data. In this course, learn how to create table structures that fit your data precisely, are easy to style, and work well for sharing. Instructor Jen Kramer covers the essential skills you need to learn to display and format tabular data on the web. Watch and learn how to build tables with HTML, style tables with CSS, and make your tables accessible to users with disabilities on all types of devices.

Learning objectives
Adding content to tables
Defining table headers
Styling borders
Alternating table row colors
Grouping columns
Styling table borders, headers, and footers
Making tables responsive

Skills covered

HTMLWeb StandardsWeb DesignFront-End Web DevelopmentWeb DevelopmentOpen SourceDeep Dive (X:Y)

Concepts

0. Introduction

01 - Create semantic HTML tables
02 - What you should know
03 - Working with CodePen

1. Table Basics

04 - Display data semantically
05 - Understand table rows and table data
06 - Add content and data to table cells
07 - Understand table headings
08 - Identify table head, body, and foot
09 - Include table captions
10 - Group columns and apply to headers
11 - Use colspan and rowspan
12 - Challenge - Mark up a table
13 - Solution - Mark up a table

2. Styling HTML Tables

14 - Style table borders and basic styling
15 - Style the table caption
16 - Style your table headers and footers
17 - Stripe table rows with background colors
18 - Challenge - Style HTML tables
19 - Solution - Style HTML tables

3. Making Tables Responsive

20 - Responsive tables with side scrolling
21 - Reformat a table for responsive layout
22 - Final styling tweaks
23 - Challenge - Make tables responsive
24 - Solution - Make tables responsive

Conclusion

25 - Next steps