Design the Web: Styling a Table
37mBeginner2016-04-01
Authors
Chris Converse
Applies design and UX principles to technology
Course details
Tables may be old school, but they're still a staple of web design. Learn how to make them look top-notch with a little CSS wizardry. Design the Web creator Chris Converse explains which table properties can be modified with CSS, and how to quickly change their visual style. He also shows how to add a background image, change the text color, and highlight rows. Plus, learn how to add animated hover states to the row elements, which allow users to quickly see related information in the table.
Skills covered
phpMyAdminWeb Design BusinessWeb StandardsWeb DesignSmall Business and EntrepreneurshipLimited SeriesWeb DevelopmentOpen Source
Concepts
0. Introduction
- 01 - Welcome
- 02 - About the exercise files
1. Styling an HTML Table with CSS
- 03 - Adding styles to the main table element
- 04 - Targeting all TH and TD tags
- 05 - Setting the column widths with nth child
- 06 - Styling the table body
- 07 - Styling the table footer
- 08 - Setting styles for the first column
- 09 - Adding highlights to rows
- 10 - Adding hover states (rollovers) to rows