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.
- [Voiceover] Hi, this is Chris Converse, and in this episode of Design the Web, we'll be styling an HTML table with CSS. Now, we'll begin by styling the main table element by adding a background image and setting some colors for the text. And then we'll move onto dividing the rows with rules, and even setting some repeating highlighting patterns using the nth-child pseudo-class in CSS. And then once we have our design in place, we'll end the course by adding an animated hover state to the row elements, allowing our users to more quickly see related information within the table.
And lastly, the exercise files for this course are available to all members. So download your files and let's start styling a table with CSS.
The practice files are free to all members. Download them and get started designing the web today.