How to format several tables on one page in CSSMost CSS tips for formatting tables are only useful if you only want one style table on every page on your website. The following CSS tip shows how to set up your page or website for more than one table style. 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.Formatting a Table in CSSFirst 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 in CSS that controls the table's position on the page, it's width, font size and border size. This 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.
.table1 {width:200px;
If you want table headers with different formatted text than the table cells and the table header text centered vertically and horizontally and borders around each cell then include the following setting for TH in the CSS file:margin:auto; font-size:12px; border:1px solid #000000; }
.table1 th {font-weight:bold;
The following applys formatting to each TD cell in the table. In this case it is a bold blue colored font and I have applied a border to each cell and text centered vertically and left aligned horizonatally.color:#000000; vertical-align:middle; text-align:center; border:1px solid #000000; }
.table1 td {font-weight:bold;
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).color:#000099; vertical-align:middle; text-align:left; border:1px solid #000000; }
<table class="table1">
Here is the finished table:<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>
Add a Background Color Behind the TableYou 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:
Reduce Code Bloat by applying one buy button for all cellsIf 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 back ground image (this eliminates the need to apply width, height, border and an alt tag to every button). 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 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) The table should display like this: 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).
Return to CSS TIPS
Copyright © 11-07-08 |
|
Lori's Web Design, 1815 E. Nebraska, Spokane Wa, 99208, 1-509-443-8693
| ||||
|
|
Lori's Web Design, Spokane WA (Washington)
Copyright © 2010 All Rights Reserved |
| ||