CSS Tables

Although standard HTML tables work very well, they look very basic in their default setting.

Styling tables and their cells with CSS is easy.

You can style every aspect of the table to ensure it matches the overall look and feel of your website.

CSS Table Width

By default, tables are displayed without borders and it will not also apply the changes we make to the table therefore, make sure to use border=”1” property to outline your table and for other reasons.

Here is a typical HTML table layout. It has four rows and four columns with table headings at the top of each column. There is also a table caption to tell the user about the subject of the table.

Favorites
Name Favorite Car Favorite Food Favorite Place
Jen Honda Pizza Miami
Jeff Mercedes Sushi Tokyo
Natasha Hyundai Curry India
Lauren Audi Souvlaki Prague

Now let’s see how we can use CSS to make it look a lot more attractive.

You might have observed the untidy and uneven look of the table above, that is because the size of the table is adjusted to fit the width of the data inside the columns.

Therefore, to make the width of your columns the same size, we will take the help of width property (<th>) tag.

This tag will adjust the widths of the columns with headings evenly and will give a neat look to our table.

In our stylesheet we’ll add:

th { width: 25%; }

Output would therefore look like this:

Name Favorite Car Favorite Food Favorite Place
Jen Honda Pizza Miami
Jeff Mercedes Sushi Tokyo
Natasha Hyundai Curry India
Lauren Audi Souvlaki Prague

 

Now you can see that each column is evenly spaced out.

While you can also use em as the measure, using percentages allows for relative proportions, and in responsive design when screens are adjusting automatically for users’ different sizes, percentages allow us to adjust in proportion to their screen size.

CSS Table Borders

You can adjust the borders of a table at the table level, th level and the td level.

Let’s add a border for the entire table.

In our stylesheet we’ll add:

table { border: 4px solid blue; }

Output would therefore look like this:

Name Favorite Car Favorite Food Favorite Place
Jen Honda Pizza Miami
Jeff Mercedes Sushi Tokyo
Natasha Hyundai Curry India
Lauren Audi Souvlaki Prague

 

Now let’s say we want to add a border around all of the cells in our table, however a little thinner.

In our stylesheet we’ll add:

th, td { border: 1px solid blue; }

Output would therefore look like this:

Name Favorite Car Favorite Food Favorite Place
Jen Honda Pizza Miami
Jeff Mercedes Sushi Tokyo
Natasha Hyundai Curry India
Lauren Audi Souvlaki Prague

 

CSS Table Colors

By default, table colors inherit their background color from the page background color and add a grey border to them.

We can set a CSS property to control the tables background color independently from the page background color.

To do so, we use:

table { background-color: #e6fff2; }

Here’s a table with background-color added:

Name Favorite Car Favorite Food Favorite Place
Jen Honda Pizza Miami
Jeff Mercedes Sushi Tokyo
Natasha Hyundai Curry India
Lauren Audi Souvlaki Prague

 

Apart from adjusting the background color ofthe entire table, we can also apply colors to individual cells or rows by using inline styles within our table declaration.

We suggest defining a different class in our stylesheet, such as:

td.green { background-color: blue;}
td.red { background-color: orange;}

We can apply these classes to individual cell like:

<table>
<tr>
<td class=”red”>This cell will be blue</td>
<td class=”green”>This cell will be orange</td>
</tr>
</table>

Use the same method above to adjust font color and font-weight.

By using the border-color property, we can adjust the border colors for our <table>,<tr>,and <td> tags using:

table { border-color: black; }

However, note that no tag will alter the border colors for the entire table, as the <table> tag will only affect the outside border of our table.

However, the <th>,<tr> and <td> tags will affect table rows, headings and individual cells respectively.

For instance, if you want the entire borders to be blue, you will need to set the border-color property for more than one tag.

Experiment with the different tags and css properties and you’ll see how things work in practice, which will lead you to your desired result.

 

CSS Table Captions

Table captions are displayed at the center above the table columns by default.

Favorites! (This is our caption in default top position)
Name Favorite Car Favorite Food Favorite Place
Jen Honda Pizza Miami
Jeff Mercedes Sushi Tokyo
Natasha Hyundai Curry India
Lauren Audi Souvlaki Prague

But in many cases, we want to have them towards left, right, top, or in many cases the bottom or below the chart in other words.

To do so, there is a CSS property (caption-side) that allows you to position your captions.

For example, if we want to move our caption underneath our table, we can do so by using the following CSS declaration, like:

caption { caption-side: bottom; }

The above coding will produce this result below.

Note: Your web browser will support this tag if the caption is underneath the table but it will not be compatible if the caption is above the table. It is also important to mention that this whole caption property doesn’t work with Internet Explorer but with other browsers.

Favorites! (This is our caption in moved to bottom position with CSS)
Name Favorite Car Favorite Food Favorite Place
Jen Honda Pizza Miami
Jeff Mercedes Sushi Tokyo
Natasha Hyundai Curry India
Lauren Audi Souvlaki Prague

 

Apart from its position, we can also edit the style of its appearance.

There are a variety of text styling properties that will work the same way as any other text which you can refer to in the Font / Styling section