From the course: Design the Web: Styling a Table
Unlock this course with a free trial
Join today to access over 22,500 courses taught by industry experts.
Adding highlights to rows - phpMyAdmin Tutorial
From the course: Design the Web: Styling a Table
Adding highlights to rows
- [Voiceover] Now another way we can help users read content in a table, is to highlight some of the rows. Maybe every other row, or every third row. And we can do that by using the nth-child pseudo-class. So inside of the body area here for the table, we want to set a pseudo-class of nth-child, and we want to highlight every odd row. So over here in the CSS, let's come in here and select and copy the rule that targets the td body, space tr. Let's copy that. Now it doesn't matter what order you put your CSS rules in, however I like to keep my CSS going in the same order as the HTML. So the tr element here, I want this to be before the td. So we have tbody space tr, then a colon. We're gonna type nth-child, put in our parentheses, then a space, then put in our brackets. Inside of the parentheses, similar to what we did up here where we were targeting a specific sibling, we can put a parameter inside of here to target other properties. One of the properties we can put in here, is the…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
Adding styles to the main table element4m 51s
-
(Locked)
Targeting all TH and TD tags4m
-
(Locked)
Setting the column widths with nth child3m 31s
-
(Locked)
Styling the table body2m 39s
-
(Locked)
Styling the table footer3m 47s
-
(Locked)
Setting styles for the first column3m 10s
-
(Locked)
Adding highlights to rows5m 54s
-
(Locked)
Adding hover states (rollovers) to rows8m 4s
-