1
00:00:01.02 --> 00:00:02.08
- [Instructor] Hi, this is Chris Converse,

2
00:00:02.08 --> 00:00:03.07
and in this episode,

3
00:00:03.07 --> 00:00:06.00
we'll style rows and
columns of an HTML table

4
00:00:06.00 --> 00:00:09.04
without adding additional
markup to the HTML file.

5
00:00:09.04 --> 00:00:11.06
We'll use the nth-child() Selector in CSS

6
00:00:11.06 --> 00:00:13.05
to style specific table row elements

7
00:00:13.05 --> 00:00:16.00
and visually group together
table data elements

8
00:00:16.00 --> 00:00:17.04
to highlight columns.

9
00:00:17.04 --> 00:00:19.00
So if you'd like to follow along with me,

10
00:00:19.00 --> 00:00:21.01
download the exercise
files and let's begin

11
00:00:21.01 --> 00:00:24.08
by opening index.html in a text editor.

12
00:00:24.08 --> 00:00:26.03
And once you have the HTML file open,

13
00:00:26.03 --> 00:00:28.00
you'll see that we have
a table inside of here.

14
00:00:28.00 --> 00:00:30.01
The table is broken into two groups.

15
00:00:30.01 --> 00:00:34.06
There's the table head group
here and the table body.

16
00:00:34.06 --> 00:00:38.04
Inside we have our table
rows and all of our td's.

17
00:00:38.04 --> 00:00:40.01
And if you'd like to see the
layout we're starting from,

18
00:00:40.01 --> 00:00:43.04
you can open this index.html
file up in a browser.

19
00:00:43.04 --> 00:00:44.04
So as I mentioned earlier,

20
00:00:44.04 --> 00:00:46.09
we're not going to be
changing any of the HTML.

21
00:00:46.09 --> 00:00:49.04
So let's go back to the exercise files.

22
00:00:49.04 --> 00:00:51.06
Let's choose style.css

23
00:00:51.06 --> 00:00:54.05
and let's open this in our text editor.

24
00:00:54.05 --> 00:00:57.06
Once this is open let's
scroll down to the bottom.

25
00:00:57.06 --> 00:00:59.08
And you'll see that I do
have some rules in place

26
00:00:59.08 --> 00:01:02.01
already targeting the table.

27
00:01:02.01 --> 00:01:03.04
So let's first create a rule

28
00:01:03.04 --> 00:01:06.05
that will target one of
the rows in the table body.

29
00:01:06.05 --> 00:01:07.03
So we'll type table,

30
00:01:07.03 --> 00:01:09.01
space,

31
00:01:09.01 --> 00:01:12.00
tbody then a space,

32
00:01:12.00 --> 00:01:13.07
then tr for table row,

33
00:01:13.07 --> 00:01:14.06
then a colon,

34
00:01:14.06 --> 00:01:17.03
then we'll add the nth-child() Selector.

35
00:01:17.03 --> 00:01:20.05
So type nth dash ...

36
00:01:20.05 --> 00:01:22.02
child,

37
00:01:22.02 --> 00:01:24.00
put in our parenthesis,

38
00:01:24.00 --> 00:01:26.00
then our brackets,

39
00:01:26.00 --> 00:01:27.05
split this open.

40
00:01:27.05 --> 00:01:29.04
Now inside of the
parenthesis for nth-child

41
00:01:29.04 --> 00:01:30.06
we're going to put a number.

42
00:01:30.06 --> 00:01:32.08
So I'll put a number two here.

43
00:01:32.08 --> 00:01:35.02
Then inside of this rule
let's add some properties.

44
00:01:35.02 --> 00:01:36.01
So we're simply going to come in

45
00:01:36.01 --> 00:01:38.05
and change the background color.

46
00:01:38.05 --> 00:01:40.02
So we'll choose background-color.

47
00:01:40.02 --> 00:01:42.00
We use the rgba color space,

48
00:01:42.00 --> 00:01:43.01
so rgba,

49
00:01:43.01 --> 00:01:44.09
put in another parenthesis,

50
00:01:44.09 --> 00:01:47.07
then inside the parenthesis
we'll set red to 255,

51
00:01:47.07 --> 00:01:48.06
comma,

52
00:01:48.06 --> 00:01:49.08
255 for green,

53
00:01:49.08 --> 00:01:52.03
255 for blue which will give us white,

54
00:01:52.03 --> 00:01:53.09
and then we'll set .1 for the alpha.

55
00:01:53.09 --> 00:01:56.02
So this will give us a 10% white highlight

56
00:01:56.02 --> 00:01:58.05
on the second row.

57
00:01:58.05 --> 00:01:59.05
If we choose save,

58
00:01:59.05 --> 00:02:00.07
go back to the browser,

59
00:02:00.07 --> 00:02:05.00
we can now see that showing up here.

60
00:02:05.00 --> 00:02:06.03
So now let's go back to our CSS

61
00:02:06.03 --> 00:02:09.00
and let's change the number two in here

62
00:02:09.00 --> 00:02:11.01
for the word "odd".

63
00:02:11.01 --> 00:02:12.04
So we'll type in "odd",

64
00:02:12.04 --> 00:02:13.05
hit save,

65
00:02:13.05 --> 00:02:14.07
and now what will happen in the browser

66
00:02:14.07 --> 00:02:17.01
is that every odd row will be highlighted.

67
00:02:17.01 --> 00:02:18.07
So this gives us a really quick way

68
00:02:18.07 --> 00:02:21.06
to make the table much more readable.

69
00:02:21.06 --> 00:02:23.07
And I'd prefer that the
first row not be highlighted

70
00:02:23.07 --> 00:02:25.06
just to give a little more
contrast from the title.

71
00:02:25.06 --> 00:02:27.05
So let's come back here to the CSS

72
00:02:27.05 --> 00:02:31.06
and change the word "odd" to "even".

73
00:02:31.06 --> 00:02:33.02
Now to highlight columns of data,

74
00:02:33.02 --> 00:02:36.01
we will use the nth-child()
and we will need to use numbers

75
00:02:36.01 --> 00:02:39.01
because table rows encompass
table data elements,

76
00:02:39.01 --> 00:02:43.03
but table data elements are
independent from each other.

77
00:02:43.03 --> 00:02:44.09
So back in our CSS,

78
00:02:44.09 --> 00:02:48.08
let's come down and let's
target our table data elements.

79
00:02:48.08 --> 00:02:50.02
So we'll type table,

80
00:02:50.02 --> 00:02:51.08
space,

81
00:02:51.08 --> 00:02:55.03
tbody then a space,

82
00:02:55.03 --> 00:02:57.05
then td, colon,

83
00:02:57.05 --> 00:03:00.04
nth-child,

84
00:03:00.04 --> 00:03:01.09
put in our parenthesis,

85
00:03:01.09 --> 00:03:03.06
put in our brackets,

86
00:03:03.06 --> 00:03:04.09
split the brackets open,

87
00:03:04.09 --> 00:03:06.05
and then in the parenthesis for nth-child

88
00:03:06.05 --> 00:03:07.07
we'll put the number one.

89
00:03:07.07 --> 00:03:09.09
So we're going to target the first column.

90
00:03:09.09 --> 00:03:10.09
And what I want to do here

91
00:03:10.09 --> 00:03:13.02
is simply set the font to be white

92
00:03:13.02 --> 00:03:15.06
and set the font-weight to be bold.

93
00:03:15.06 --> 00:03:16.09
So for the font color,

94
00:03:16.09 --> 00:03:19.02
we'll set the color property.

95
00:03:19.02 --> 00:03:21.08
Pound sign and three f's for white.

96
00:03:21.08 --> 00:03:25.04
Then on the next line we're
going to set the font-weight.

97
00:03:25.04 --> 00:03:27.08
And we're going to set this to bold.

98
00:03:27.08 --> 00:03:29.04
Now if we hit save, go
back to the browser,

99
00:03:29.04 --> 00:03:32.03
we can now see that the
first table data element

100
00:03:32.03 --> 00:03:37.03
inside of each row is now
showing with our properties.

101
00:03:37.03 --> 00:03:38.06
So back to our CSS,

102
00:03:38.06 --> 00:03:40.09
let's scroll down.

103
00:03:40.09 --> 00:03:44.06
Let's come in here and
copy this entire rule.

104
00:03:44.06 --> 00:03:45.09
Let's paste this again.

105
00:03:45.09 --> 00:03:49.00
And now we want to
target the second column.

106
00:03:49.00 --> 00:03:53.00
So we'll change nth-child(1)
to nth-child(2).

107
00:03:53.00 --> 00:03:56.03
And then inside here we're going
to set a couple of properties.

108
00:03:56.03 --> 00:04:00.00
First we're going to start
with the background-color.

109
00:04:00.00 --> 00:04:03.05
We're going to set this to rgba.

110
00:04:03.05 --> 00:04:06.01
And then for red we're going to set 238,

111
00:04:06.01 --> 00:04:07.09
for green we're going to set 25,

112
00:04:07.09 --> 00:04:10.06
for blue we're going to set 238,

113
00:04:10.06 --> 00:04:13.09
and then for the alpha
setting we're going to set .3.

114
00:04:13.09 --> 00:04:15.09
And now in the browser we'll
see that the second td element

115
00:04:15.09 --> 00:04:18.07
is now showing with that background color.

116
00:04:18.07 --> 00:04:19.06
So now let's come back

117
00:04:19.06 --> 00:04:23.02
and make a few more changes
to that highlighted column.

118
00:04:23.02 --> 00:04:25.08
Next we'll set a border-left property.

119
00:04:25.08 --> 00:04:30.01
We'll set this to one pixel, solid.

120
00:04:30.01 --> 00:04:33.07
Set the color to rgba

121
00:04:33.07 --> 00:04:35.07
and then 255 for red, green, and blue,

122
00:04:35.07 --> 00:04:37.04
which will make this white.

123
00:04:37.04 --> 00:04:40.01
And then .2 for the alpha.

124
00:04:40.01 --> 00:04:42.03
Then we'll duplicate this rule

125
00:04:42.03 --> 00:04:46.01
and then come back and change
border-left to border-right.

126
00:04:46.01 --> 00:04:47.02
And then finally in the next line,

127
00:04:47.02 --> 00:04:50.09
let's come in here and set
the text-align to center.

128
00:04:50.09 --> 00:04:53.02
That way all of the values in
column two will be centered

129
00:04:53.02 --> 00:04:55.02
instead of flush left.

130
00:04:55.02 --> 00:04:56.00
Now it is worth noting,

131
00:04:56.00 --> 00:04:57.05
if you wanted the highlighted color

132
00:04:57.05 --> 00:05:00.03
to go up into the table
header area as well,

133
00:05:00.03 --> 00:05:04.00
you could come up here
and remove the tbody.

134
00:05:04.00 --> 00:05:06.01
So if I take this out from the CSS

135
00:05:06.01 --> 00:05:07.04
and we look in the browser,

136
00:05:07.04 --> 00:05:09.05
we can now see that
the table data element,

137
00:05:09.05 --> 00:05:13.01
which is still the second
td in that particular row

138
00:05:13.01 --> 00:05:16.04
now picks up the background color as well.

139
00:05:16.04 --> 00:05:18.09
However, I prefer that the
heading table data not be styled

140
00:05:18.09 --> 00:05:21.03
so I'll just undo that.

141
00:05:21.03 --> 00:05:22.05
And now the final change I'd like to make

142
00:05:22.05 --> 00:05:24.03
is I'd like to center all of the dates

143
00:05:24.03 --> 00:05:25.08
in the third column.

144
00:05:25.08 --> 00:05:27.09
So I'll come up here and copy this rule,

145
00:05:27.09 --> 00:05:29.06
paste it on the next line,

146
00:05:29.06 --> 00:05:32.08
change the two to a three,

147
00:05:32.08 --> 00:05:35.03
put in our brackets,

148
00:05:35.03 --> 00:05:39.05
and then set a text-align
property to center.

149
00:05:39.05 --> 00:05:40.07
And now with these rules in place,

150
00:05:40.07 --> 00:05:42.06
we were able to help readability,

151
00:05:42.06 --> 00:05:44.06
we were able to highlight specific data,

152
00:05:44.06 --> 00:05:46.00
and add visual appeal

153
00:05:46.00 --> 00:05:48.05
without changing any of the html code.

154
00:05:48.05 --> 00:05:50.08
Now if you'd like to explore
more style options for a table

155
00:05:50.08 --> 00:05:53.06
we have another course here
entitled "Styling a Table".

156
00:05:53.06 --> 00:05:55.05
And if you'd like to
make your table sortable

157
00:05:55.05 --> 00:05:57.07
using just a little bit of jQuery and CSS,

158
00:05:57.07 --> 00:05:59.07
check out "Creating a Sortable Table".

159
00:05:59.07 --> 00:06:02.06
And both courses are
available here in the library.

160
00:06:02.06 --> 00:06:03.07
And so with that,

161
00:06:03.07 --> 00:06:04.09
I'll conclude this episode

162
00:06:04.09 --> 00:06:07.08
and as always, thanks for watching.