- CSS - Cascaded Style Sheets
|
|
CSS Style Table - styling tables with only one class
Styling tables with a general style sheet is very easy! You can do it!
The key to to success is to define the table-class with "table.myclass". This
style applies to the whole table:
table.mytable { width: 100%; padding: 0px; border: none; border: 1px solid #789DB3;}
If you want to style individual table cells - again with a general style sheet -
you need to use this:
table.mytable td { font-size: 20px; border: none; background-color: #F4F4F4;
vertical-align: middle; padding: 7px; font-weight: bold; }
You can see that there is the "table.mytable" from the first example, but there
is an additional "td", which tells the interpreting application aka the browser
to style the "td" - the table cells only.
If you need to style special table rows, e.g. highlight one row, you can use
this style:
table.mytable tr.special td { border-bottom: 1px solid #ff0000; }
Here you can see the "table.mytable" which we already know, but we have the
"tr.special". The "tr" marks the table row, but the "special" marks the CSS class
applying to the table rows.
Here is the whole example:
| cell text one |
cell text two |
| cell text one |
cell text two |
| cell text one |
cell text two |
And the source code:
<style>
table.mytable { width: 100%; padding: 0px; border: none; border: 1px solid #789DB3;}
table.mytable td { font-size: 20px; border: none; background-color: #F4F4F4;
vertical-align: middle; padding: 7px; font-weight: bold; }
table.mytable tr.special td { border-bottom: 1px solid #ff0000; }
</style>
<table width="300" class="mytable">
<tr>
<td>cell text one</td>
<td>cell text two</td>
</tr>
<tr class="special">
<td>cell text one</td>
<td>cell text two</td>
</tr>
<tr>
<td>cell text one</td>
<td>cell text two</td>
</tr>
</table>
Last-Modified: Sat, 04 Feb 2006 16:03:18 GMT
|
|
