Cascading Style Sheets/Tables
From WikiKnowledge
Contents |
[edit] border-collapse
| 11111 | 22222 |
| 33333 | 44444 |
| 11111 | 22222 |
| 33333 | 44444 |
On the right is a simple table in which all the cells have been given a gray border. You will notice that in between the cells is a bit of white space. To remove the spacing between cells you can use the border-collapse property. This takes over from the HTML cellspacing attribute. By default it has the value separate, so to remove the spacing you need to set it to collapse as in this example:
table{ border-collapse: collapse; }
If you need to change the amount of spacing between the cells use the border-spacing below.
[edit] border-spacing
To control the amount of spacing between cells use the border-spacing property. Setting the property to 0 will have the same effect as setting border-collapse to collapse, however this property allows you to control the amount of spacing between the cells.
[edit] caption-side
This controls whether the caption for a table appears at the top or bottom of the table. The caption is stored in between the HTML/XHTML caption tags. Possible values are:
| top | The caption is at the top of the table. |
|---|---|
| bottom | The caption is at the bottom of the table. |
| inherit | Inherit this setting. |
table { caption-side:bottom; }
[edit] empty-cells
Possible values are: show and hide.
This property tells the browser whether to show or hide empty cells in a table. By default empty cells are shown.
You can also control how empty cells in a table are rendered using the pseudo element :empty. To make all empty cells have a red background you can use
table:empty {
background-color: red; }
[edit] Columns
By using the colgroup and col tags in a table allows you to control the individual columns of a table using CSS. For example, to change the background color of the first two columns of this table:
<table>
<colgroup>
<col span="2" id="firstcols" />
<col />
</colgroup>
<tbody>
<tr>
<td> col 1</td>
<td> col 2</td>
<td> col 3</td>
</tr>
</tbody>
</table>
to red you can use this rule:
#firstcols{ background-color: red; }
Unfortunately the CSS that you are allowed to use is extremely limited. Most browsers only support border, background, width and visibility on columns, although Internet Explorer allows much more CSS.
[edit] width
This CSS rule is applied to all the cells individually. For example
#firstcols{ width: 2em; }
applied to the above HTML page will make both col 1 and col 2 2em wide, instead of making them 2em wide in total.
[edit] table-layout
By default, a table will expand to fit the data put into it. If you give the table a width of 200px for example, it will still expand beyond 200px if the data doesn't fit in the space it has been given. By making the table-layout fixed, you can force the table to only ever be 200 pixels wide, no matter how much data is contained in the table. Values are:
| auto | (Default) Table resizes to fit the data contained in it. |
| fixed | The table stays the size it has been given, no matter how much data it contains. |
| inherit | Inherit this setting. |
