CSS Tables Setup and How to Create Separate Classes

Cascading Style Sheets are a vital tool for taking the pain out of creating a visual style and layout for your HTML based webpages. You can use them to set up header and paragraph tags in different styles and they offer a multitude of other possibilities but in this tutorial we will have a look at how to use CSS for tables and how to create multiple table styles.

Setting up your basic table layout and style will be your first task. Tables can include a variety of attributes so you can control everything from the background color, to the font, the padding and the border. It just depends what you want to use your table for. A typical table set-up in your CSS file might look something like this (you don’t need to lay it out on separate lines like this. I’ve just done it for easy viewing).

table {

color: #FFFFFF;

background-color: #FFFFFF;

padding: 20px;

font-size:14px;

text-align: left;

font-family: Arial;

border: 1px solid #000000;

}

This is a basic table set up and would determine the look of tables which you have referenced in your individual HTML pages within <table></table> tags.

Margins and padding can often create problems as they tend to be read differently by different browsers (Internet Explorer and Firefox). Although you can include margin or padding attributes in tables you may find you get more consistent results by placing things absolutely and using nested div classes.

If you want a table without a border then simply change the border attribute so it looks like this.

border: 0px;

To create a new class of table in your CSS without a border you would add the following.

table.noborder {

color: #FFFFFF;

background-color: #FFFFFF;

padding: 20px;

font-size:14px;

text-align: left;

font-family: Arial;

border: 0px;

}

You would then reference the table style without the border in your HTML webpage like this.

<table class=”noborder”></table>

There are some other attributes that you can use specifically for tables in your CSS. If you want to have a single border between cells then you may want to add the border collapse attribute.

border-collapse: collapse;

You can also use the table layout attribute to determine whether the column width is set by the content or by the table width and cell width. If you want the column width set by the content then the attribute is.

table-layout: automatic;

If you want it to be fixed by a set column width or table width you have defined then use.

table-layout: fixed;

You can set up your attributes for individual columns and rows in exactly the same way as you have for the table simply by using the <tr> or <td> tags. So in your CSS it would look like this.

td { color: #FFFFFF; background-color: #FFFFFF; }

So once again any <td> tags in your HTML pages would reference this entry in your CSS and you can set up further classes in the same way.

td.black { color: #000000; background-color: #000000; }

Which would be referenced in the HTML as <td class=”black”>.

As you can see setting up multiple table classes and defining the exact look and layout of your table is easy with CSS and it saves you from having to write lots of unnecessary code on your individual HTML pages.

Author's own experience.