LWD logoLori's Web DesignLWD logo

How to format several tables on one page with CSS



Most CSS tips for formatting tables are only useful if you only want one style table on every page on your website. The following shows how to set up your website for more than one table style on a page. Setting up table formatting in CSS also eliminates an enormous amount of code bloat for large tables because you don't have to apply font colors and sizes in each table cell or row.

Formatting a Table in CSS

First you need to pick a name that describes your table. You can name it according to size, or color or according to what it contains. You can also name it with a number. I will call this one table1.

Now we set up a class for the table in CSS that controls the table's position on the page, it's width, font size and border size. The following table will be centered on the page with width set at 200 pixels wide. It also uses font size 12 pixels and a solid black border around the outside edge of the table. Border-collapse was added to eliminate double borders on each cell (if you are setting up tables for a mobile site use percentages for width and ems for fonts).

.table1 {width:200px;
    margin:auto;
    font-size:12px;
    border:1px solid #000;     border-collapse:collapse; }


If you want table headers with different formatted text than the regular table cells then set up a class for a TH tag in your CSS file. The following table has the the table header text centered vertically and horizontally in each cell with a border around each cell:

.table1 th {     color:#000;
    vertical-align:middle; text-align:center;
    border:1px solid #000; }


The following CSS applies formatting to each TD cell in the table. In this case it is a bold blue colored font with a border around each cell and text centered vertically and left aligned horizontally.

.table1 td {     color:#000099;
    vertical-align:middle; text-align:left;
    border:1px solid #000; }


The above CSS for the table, the TH and TD cells can all be applied to the following table just by adding class="table1" to the table tag (if a TH cell follows it will apply that portion of the CSS file and the same for the TD cells).

<table class="table1">
<tr><th> Item Name </th><th> Price
</th></tr><tr><td>Book</td><td>$5.00
</td></tr><tr><td>Shoes</td><td>$10.00
</td></tr><tr><td>Flowers</td><td>$3.00
</td></tr></table>

Here is the finished table:

Item Name Price
Book$5.00
Shoes$10.00
Flowers$3.00

How to color separate cells in different colors

If you want to color the text in one table cell a different color just set up a class for that color in your CSS file like this:

.red {color:red;}

Then add that class to any table TD or TH tag like this:
class="red"

How to Align Different TD or TH Cells Left or Right

If you want some cells left aligned and some right and others center aligned set up classes for left, right and center in your CSS file like this:

.center {text-align:center;}
.left {text-align:left;}
.right {text-align:right;}

Pick out the alignment that is used most and add that to the CSS TD or TH tag. Then anytime you want to change the alignment for just one TD or TH cell add that class to that specific cell like this: <td class="right"> </td>

Add a Background Color Behind the Table

You can apply a background color to the table tag or different background colors to the TD tags vs the TH cells by adding the following to the appropriate class mentioned above:

background:#ccccff;

This table has a light blue background:

Item Name Price
Book$5.00
Shoes$10.00
Flowers$3.00


If you want a 2nd table on the same page with different settings then you need to set up another class in CSS with another name like "table2".

Reduce Code Bloat by applying one buy button for all cells

If you want to include a "buy" button with a link to a shopping cart in your table you can reduce a lot of code bloat by loading the same button in each cell as a background image (this eliminates the need to apply width, height, border and an alt tag to every button) but be sure to include the url to the relevant cart page if your items are on different pages. You'll need to increase the width of the table by one cell. Set up the class for the button like this:

.buybtn {background-image: url(images/buynow.gif);
    background-repeat: no-repeat;}


Now just add a div in the appropriate cell with class="buybtn" in between each link and it's closing link tag like this:

(Beginning link tag goes here)<div class="buybtn"> </div>(Ending Link tag goes here)

I set up another class for this table called table2 as it requires different formatting than the table above (view source code at top of page for table1 and table2). The table should display like this:
Item Name Price  
Book$5.00
Shoes$10.00
Flowers$3.00



Google


Return to CSS TIPS

Copyright © 11-07-08, updated 2-15-15

Lori's Web Design
All Rights Reserved

Twitter     Google+     Facebook     linked in