Design the Web: Styling a Table

Learn how to make HTML tables look top-notch with a little CSS wizardry. Find out how to style text, highlight rows, and highlight related table data with animated hover states.

Introduction

• Welcome
• About the exercise files

1. Styling an HTML Table with CSS

• Adding styles to the main table element
• Targeting all TH and TD tags
• Setting the column widths with nth child
• Styling the table body
• Styling the table footer
• Setting styles for the first column
• Adding highlights to rows
• Adding hover states (rollovers) to rows