1
00:00:00,500 --> 00:00:08,220
We can greatly improve the look styling and responsiveness of an HMO table by using C Ss tables.

2
00:00:08,270 --> 00:00:12,440
Here we have an example of a C Ss table with some basic formatting

3
00:00:16,910 --> 00:00:17,680
on the left.

4
00:00:17,690 --> 00:00:24,780
Let's take a look at the way the code is structured for this table and scroll down to the body tags

5
00:00:24,840 --> 00:00:26,850
and we'll take a look at the style sheet in a moment

6
00:00:29,650 --> 00:00:30,920
inside our body type.

7
00:00:30,920 --> 00:00:35,290
We have our open and close table tables inside the table tags.

8
00:00:35,290 --> 00:00:40,320
We also have the TR tags that represent table rows.

9
00:00:40,320 --> 00:00:48,500
The T H tags for the table headings in the T D tags for the table columns we're already familiar with

10
00:00:48,500 --> 00:00:53,570
table row and table columns but table headings may be new to you.

11
00:00:53,570 --> 00:00:59,780
The T H tag represents the table heading and it makes styling the headings of your table much more convenient.

12
00:01:01,580 --> 00:01:03,120
Let's take a look at our style sheet.

13
00:01:03,120 --> 00:01:03,350
Now

14
00:01:07,060 --> 00:01:08,990
we have for style definition.

15
00:01:09,130 --> 00:01:13,120
The first will apply a one pixel border to the table.

16
00:01:13,120 --> 00:01:22,230
The table column and the table headings the text alignment is also set to left so a border and text

17
00:01:22,230 --> 00:01:23,190
alignment.

18
00:01:23,190 --> 00:01:29,330
Next we've set a border collapse property to the table style rule.

19
00:01:29,490 --> 00:01:32,410
This collapses the table borders into a single border.

20
00:01:32,490 --> 00:01:34,630
It just makes it look a lot neater.

21
00:01:34,680 --> 00:01:38,130
I'll take this out just to show you what it looks like without it.

22
00:01:38,130 --> 00:01:47,090
So you can see that we now have the double border look going on at that back in the next rule adds 15

23
00:01:47,090 --> 00:01:52,580
pixel padding around our table headers and table columns so you can see there's a fair bit of spacing

24
00:01:52,580 --> 00:01:55,670
around the text inside each cell.

25
00:01:55,670 --> 00:02:03,550
Lastly we've added a hover effect to our table rolls using the TR hover rule as we hover our mouse over

26
00:02:03,550 --> 00:02:04,120
the rows.

27
00:02:04,120 --> 00:02:06,490
The background changes to silent

28
00:02:09,470 --> 00:02:15,210
and so as you can see there's a lot more you can do with C Ss tables versus regular HDMI tables.