Learning Web Design - Using CSS to format several tables on one page

Using CSS to format several tables on one page

Introduction

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 you how to set up tables for more than one table style on a page. Setting up tables 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 every single table cell or row.

Formatting a Table in CSS

1. Pick a Name

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. For this example, I will call this one table1.

2. Set up a Class in CSS

Next you 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. Remember, when setting up a class in CSS, you first put a period in front of the selector name. Remember, your CSS goes in a separate external style.css file, or internally in the <style> section of the <head> section.

.table1 { }

3. Define Table Width, Font size and Border

The following table will be centered on the page with width set at 200 pixels. It also uses font size 14 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.

- em means relative to the font-size of the element (2em means 2 times the size of the current font). Here are some examples.
- To use percents for your width properties, replace px with %, such as width: 150px; or width: 50%;

.table1 {

width:200px;

margin:auto;

font-size:14px;

border:1px solid #000;

border-collapse:collapse; }

4. Define Table Headers

If you want table headers with different formatted text than the regular table cells then set up a class for a TH tag (table headers). This will center the header 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; }

5. Set up Cell Data in CSS

The following CSS applies formatting to each TD cell (table data). In this case it is a blue colored font with a border around each cell and text centered vertically and horizontally.

.table1 td {

color:#000099;

vertical-align:middle;

text-align:center;

border:1px solid #000; }

6. Apply your CSS to your table

To apply all this CSS to your table, simply add 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).

<tr>

<th> Price</th>

</tr>

<tr>

</tr>

<tr>

<td>Shoes</td>

</tr>

<tr>

<td>Flowers</td>

</tr>

</table>

NOTE: Notice the way the above table elements are indented. That makes it a lot easier to read and also to troubleshoot. Otherwise it would look like this:

<tr><th> Item Name </th><th> Price</th></tr>

<tr><td>Shoes</td><td>$10.00</td></tr>

<tr><td>Flowers</td><td>$3.00 </td></tr>

</table>

7. Here is the finished table:

How to color separate table cells in different colors

1. 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;}

2. Then add that class to any table TD or TH tag in the HTML like this:

<td class="red">Shoes</td>

3. Or you can just as easily use an inline CSS.

<td style="color: red;">Shoes</td>

4. If you have a lot of different colors, or formatting on different cells, then you should set up classes for different columns and rows.

How to Align Different TD or TH Cells Left or Right

1. If you want some cells left aligned, and some right aligned, and others centered, set up classes for left, right and center in your CSS file, or your internal <style> section, like this.

.center {text-align:center;}

.left {text-align:left;}

.right {text-align:right;}

2. 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">Flowers</td>

3. Or you can just as easily use an inline CSS.

<td style="text-align:right;">Flowers</td>

4.If you have the same formatting on several cells is will save coding if you add those classes to the column or rows instead of the individual cells.

Add a Background Color Behind the Table

1. 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 (#cff is light blue).

background:#cff;

2. This table now has a light blue background in the headers:

Adding more than One Table Per Page

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". Add that new class to the TD and TH settings also.

.table2 {

width:200px;

margin:auto;

font-size:14px;

border:1px solid #000;

border-collapse:collapse; }

.table2 th {

color:#000;

vertical-align:middle;

text-align:center;

border:1px solid #000; }

.table2 td {

color:#000099;

vertical-align:middle;

text-align:center;

border:1px solid #000; }

Report abuse