We can greatly improve the look styling and responsiveness of an HMO table by using C Ss tables.
Here we have an example of a C Ss table with some basic formatting
on the left.
Let's take a look at the way the code is structured for this table and scroll down to the body tags
and we'll take a look at the style sheet in a moment
inside our body type.
We have our open and close table tables inside the table tags.
We also have the TR tags that represent table rows.
The T H tags for the table headings in the T D tags for the table columns we're already familiar with
table row and table columns but table headings may be new to you.
The T H tag represents the table heading and it makes styling the headings of your table much more convenient.
Let's take a look at our style sheet.
Now
we have for style definition.
The first will apply a one pixel border to the table.
The table column and the table headings the text alignment is also set to left so a border and text
alignment.
Next we've set a border collapse property to the table style rule.
This collapses the table borders into a single border.
It just makes it look a lot neater.
I'll take this out just to show you what it looks like without it.
So you can see that we now have the double border look going on at that back in the next rule adds 15
pixel padding around our table headers and table columns so you can see there's a fair bit of spacing
around the text inside each cell.
Lastly we've added a hover effect to our table rolls using the TR hover rule as we hover our mouse over
the rows.
The background changes to silent
and so as you can see there's a lot more you can do with C Ss tables versus regular HDMI tables.