To ensure consistency across pages (and to “get with the times”, so to speak) instead of defining each element of each table separately, define the properties of the table and cells in your Cascading Style Sheet (CSS).
The “table” definition defines the outermost edge (is the container for) the array of cells.
The “td” definitions define the character of the individual cells.
A simple table definition
table.main {
border: 5px solid double;
border-color: #006400;
}
The word “table” tells the browser that you are defining a table.
The “.main” is the name of the table style. This way you can have several different tables styles defined for different purposes.
In the example, above, the table with have a thick dark green solid double border. You could replace the “solid” with the word “dashed” or “dotted” to make a dashed or dotted border. (See the note at the bottom of this article for a notice about different browsers)
Now, to create the table with the “main” style in your HTML page:
(table class=”main”)
Notice, for display purposes for this article, I have used parentheses in place of the opening and closing brackets due to display limitations. In practice you would use “” Instead of opening and closing parentheses.
Defining the cells:
Let’s suppose you would like the cells in the first column to be shaded gray to indicate labels. The text we want a pale blue. Lets define the name of the cell style “column1” for simplicity.
Again, the “td” tells the browser we are defining a table cell, “.column1” is the name of the style so we can easily remember that this is the format for the cells in column 1
td.column1 {
border: 1px solid;
border-color: black;
background-color: #cccccc;
color: #0000EE;
}
Cell Padding:
We can also position the text inside the cell by using padding. Padding is defined from the top, going around the cell clockwise. (Top, right, bottom, left)
So we could add a line like this: padding: 24px 12px 24px 4px;
This would make the top and bottom padded by 24 pixels, and the left and right four pixels respectively.
So our cells in the left column would look like:
td.column1 {
border: 1px solid;
border-color: black;
background-color: #CCCCCC;
color: #0000EE;
padding: 24px 12px 24px 4px;
}
The cell, above, has a 1 pixel thick black border, light blue text, pale gray background, with top and bottom padded 24 pixels, 4 pixels padding left and right.
For all the other cells, we want a white background, same padding, with black text and a single black border.
td.default {
border: 1px solid;
border-color: #000000;
padding: 24px 12px 24px 4px;
background-color: #FFFFFF;
color: #000000;
}
Let’s suppose you have a cell you wish to draw attention to. You can give it a yellow background. (We named the style “highlight” to remember easily):
td.highlight {
border: 1px solid;
border-color: #000000;
padding: 24px 12px 24px 4px;
background-color: #FFFF00;
color: #000000;
}
A simple little 3×3 table using CSS: (Remember, use “” Instead of opening and closing parentheses.)
(table class=”main”)
(tr)
(td class=”column1″)
Title Row 1
(/td)
(td class=”default”)
data, data, data…
(/td)
(td class=”default”)
data, data, data…
(/td)
(/tr)
(tr)
(td class=”column1″)
Title Row 2
(/td)
(td class=”default”)
data, data, data…
(/td)
(td class=”highlight”)
data, data, data…
(/td)
(/tr)
(tr)
(td class=”column1″)
Title Row 3
(/td)
(td class=”default”)
data, data, data…
(/td)
(td class=”default”)
data, data, data…
(/td)
(/tr)
(/table)
Note: Be careful. CSS tables may work differently with different browsers. Be sure to see what your finished product looks like in various browsers before considering the project a wrap.
