Tables and Cascading Style Sheets (CSS)

Using Tables With Cascading Style Sheets

Cascading style sheets can be used to set table attributes like width, colour, font. If we examine a typical table like the following:

1	2
3	4

Here is the HTML(xhtml) without Cascading style sheets(CSS)

table align="center" border="1" cellpadding="5" width="300" cellspacing="0" style="border-collapse: collapse" bordercolor="#000000">
<tr>
<td bgcolor="#FFFF00">1</td>
<td bgcolor="#00FF00">2</td>
</tr>
<tr>
<td bgcolor="#FF0000">3</td>
<td bgcolor="#FFFFC6">4</td>
</tr>
</table>

Here attributes of the TD tag are being use to set the cell colour and attributes of the table tag are being set to set the table width, border thickness etc. There is nothing wrong with this approach and it the one adopted by millions of websites on the Internet.

The problem or should I say limitation with this approach is that if you used the same table on all your web pages, which is the case when tables are used to structure the web page, then if you want to change the properties of the table or cells then you have to manually make the change on each page.

Using Cascading Style Sheets to Control Tables

The better approach and the one we are now going to cover is to use an external style sheet to set these elements, and hence a change to the external style sheet will affect all pages using that style automatically.

Here we are going to look at how to achieve the table shown below using cascading style sheets:

1	2
3	4

The first step is to create the table this is simply a single table with 4 cells ( 2 rows and 2 columns).

The HTML is:

To control the table we need to add a class or id to the tags we wish to control. The HTML now looks like this:

<html>

<TITLE>ccs</TITLE>
<META Name="Description" Content="example ">
<META Name="Keywords" Content="css">
<style>
@import url(tablestyle.css);
</style>

<body>

------------------------

<table class="main">
<tr>
<td class="topleft">1</td>
<td class="topright">2</td>
</tr>
<tr>
<td class="bottomleft">3</td>
<td class="bottomright"> 4</td>
</tr>
</table>
-----------------

</body>

</html>

We now need to create an external style sheet to set those elements. I will call it tablestyle.css and this is what it looks like:

.main
{
width: 300px;
border: solid #000 1px;
bordercolor="#000000";
border-collapse: collapse;

}

.topleft
{
padding-left: 10px;
background-color: #ffff00;
}
.topright
{
padding-left: 10px;
background-color: #00ff00;
}
.bottomleft
{
padding-left: 10px;
background-color: #ff0000;
}
.bottomright
{
padding-left: 10px;
background-color: #ffffc6;
}

Here is the completed page: Tables and css-example1

You should now notice how simple the table HTML is with the formatting moved into the style sheet. However the real beauty of this method is that we don't need to edit the table to change the table appearance. All we need to do is to change the style sheet.

Now that we can use style sheets for controlling tables we can look at how to CSS for controlling the web page layout.

Related Articles and Resources:

Main menu

Website Resources