CSS TutorialLesson 20Free preview

CSS Tables

This lesson is part of CSS · All levels

Summary

HTML tables can be refined with CSS: border-collapse combines table lines, padding on cells prevents the contents from cramping, and text-aligned column layouts. The row can be colored with:nth-child, and highlighted when hovered. The background colors on th and td make the table head stand out.

Key points

Border-collapse: collapse that unites the lines between the cells without the two-line collapse.
Padding, text-align, and vertical-align set the contents of the table cells.
Thead is usually given dark background colors with contrasting text colors.
Pseudo-class:nth-child(even) or :nth-child(odd) makes a color-shifting line.
The width of the column can be set by the width on td or th.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.