Today we're going to talk about tables and how they can look significantly better when we add a little bit of CSS to them. If you need a quick refresher on tables, please click here.

Styling Tables

As mentioned above, styling tables is very useful and can instantly make a webpage come to life. The HTML default table is like the following:

Item 1 Item 2
Item 1 Item 2
Item 1 Item 2

Pretty boring if you ask me. Notice how the table has a background of transparent so it will take the color of any background element. The table has that border by default and it definitely could use some tweaking to make it look better.

We're going to use some key properties:

  • border-collapse
  • border

The border property allows us to style all four corners of a border at once, or each side individually. There are no arbitrary shapes with borders. All elements have a clearly defined left, right, bottom, and top side to the element.

border property

Notice how the square has an irregular shape and doesn't appear to be a conventional square. We would call this a diamond shape or something along those lines. It's actually a perfect square that was rotated 45° on a canvas. Notice how the diamond has a background since it is an image and that background has four sides: top, right, bottom, and left.

To see the border tutorial click here

Now that we have a firm understanding and we have refreshed our minds on the border property, we can fully style our tables!

If we add a little bit of CSS and tweak the table to our liking then it could very well look like this:

Item 1 Item 2
Item 1 Item 2
Item 1 Item 2

Although this dives into the world of pseudo-classes, which is discussed in the advanced css tutorial series, we know what our tables can potentially look like with a little bit of work.

Styling

Consider the following code:

table, td {border:1px solid #ff9300;}

This code would add a 1px border that is solid with the color #ff9300 (AtomicPages Orange) around the table and td (table cell) elements. The reason why we chose these elements is because the tr (table row) element does not have a border around it be default. (Usually applying a border color to a table would only mean applying it to the table element only and not the td element.)

This code will outline the table and td elements with a border that is 1px in width, that is solid and the color #ff9300. This can be useful if you want to quickly style a table quickly and easily.

Item 1 Item 2
Item 1 Item 2
Item 1 Item 2

border-collapse

The border-collapse property is a very useful property that collapses the default double border into a single border. For example:

table {
     border-collapse:collapse;
     border:1px solid #ff9300;
}
Item 1 Item 2
Item 1 Item 2
Item 1 Item 2

Notice how the border collapse property instantly gives the table a sharper and less "busy" look. The default border around the table and td elements ceases to exist and we are given a sharper look.

With a little padding (for spacing) for the td elements we can easily space out the table like the following:

th, td {padding:3px;}
/*use as an alternative for cellpadding*/
Item 1 Item 2
Item 1 Item 2
Item 1 Item 2

Using that same principle, we can apply background images and colors to the table, tr, th, and/or the td elements.

For example:

table {
     border-collapse:collapse;
     border:1px solid #ccc;
     background-color:#dbdbdb;
}
Item 1 Item 2
Item 1 Item 2
Item 1 Item 2

We've seen how tables can look and we know what they look like by default — boring. Styling tables can be a great addition to any website whether it is made from tables itself or from a tableless markup using CSS.

Styling Tables
Styling Tables
Size: 8.36 kB
Be Sociable, Share!