In this sixth part of our CSS guide, we are going to explore how to style our tables. It’s great to have our thoughts organized, let’s do this in style!
In the previous part of our guide, we discussed how to add style to our lists. In this part, we upgrade up to tables as the next step to organizing our thoughts and add some style accordingly.
Insert an HTML Table
Let’s start with a simple HTML table:
Only a minimal amount of formatting. Now, let’s take a look at what that looks like:
Well, it’s a table. Not a lot going for it at the moment. That’s OK though! We can spice things up! While we could add some widths to make the borders more visible, where’s the fun in that? We can do all of this in CSS after all!
Adding Style to Our Table!
First, let’s add a border in our table with CSS. The first logical thing to start editing is the outside border. Luckily, that is easy because all we have to do is add a CSS rule for just the table. Generally for tables, we need three rules: width, style, and color. Not all of them are required, but adding some style to all three can certainly prove useful in seeing the effects of your changes.
So, let’s go ahead and add it all in: table { border-width: 1px; border-style: solid; border-color: #00FF00; } like so:
The results:
OK, now we’re getting somewhere! Now, one thing to note is that solid isn’t your only option for a border style. Check out this resource for a list of all the possible borders you can put into your table.
Now, wouldn’t it be cool if we could centre this table? That can be done with HTML, but again, we’re going to go ahead and do this in CSS instead because it’s much more fun. Remember when we affected margins in other parts of this guide? This can be used to centre the table as well with a cool rule called “auto”. Since we’re only focused on modifying the left and right hand side of the table, let’s add these two lines to our table: margin-left: auto; margin-right: auto; like so:
The end result:
Nice! The excellent part about this is the fact that no matter how you resize the window, the table will always remain in the middle!
Next up? Styling the table headings and table descriptions. Same styling as before, only you are modifying the th and td tags:
The results:
That’s pretty neat!
So, what about adding some width? That is extremely easy. You can either add a specific size through #px or you can assign a percentage. It’s totally up to you. In this case, let’s assign a percentage to our table width. width: 80%; like so:
The results:
That’s pretty nifty! Naturally, regardless of the size of the window, it will always take up 80% of the screen.
We are already familiar with changing fonts and backgrounds around, but what other tricks might be useful to us? One well known trick is to add padding. You can specify the specific side (top, down, left, right) you want to add padding. This is through a CSS rule such as padding-left. Of course, if you are wanting to add a consistent padding on all sides, you can simply stick with “padding” to avoid a whole lot of redundant code. That’s exactly what we’re going to try here with padding: 5px; to both the th and td tags like so:
The end result:
That’s not bad! Of course, with all the knowledge you’ve gained up to this point, you can really make a customized table if you really want. Remember, if you are going to affect an individual side (such as colour), remember to add the -(direction) to the end of the CSS rule. Go nuts!
That’s it! That’s styling tables in a nutshell. Way to go!
< Lists | CSS Index | Divs, Classes, and IDs >