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