CSS Tables
Games | Copies Sold (in Millions) |
---|---|
GTA 4 | 30 |
Battlefield 3 | 24 |
Modern Warfare 3 | 20 |
Uncharted | 15 |
There are many properties you can change, however we will just address the commonly used ones. You can apply a default setting for all the tables in your website; in your CSS the selector is table.
table{ You then specify all the properties here. }
The settings you apply to the table will apply to every table in your HTML sheet. If you only want it to apply to one or a couple tables then you should create a class.
table.standardtable { Your code }
This will apply to any table with the class standardtable.
Common table properties
Table Property | Description | Syntax |
---|---|---|
Border | Specify the border width, style and colour | border:integer px |
Padding | Specify the space inside the cell | padding:integer px |
Width | Width of the table | width:integer, px or % (% best) |
Border-collapse | Collapses the border | border-collapse:collapse; |
Table – Padding
The padding is the space inside the cell.
Syntax
table tr td {padding:integer | pixels | percentage | pt;}
This setting applies the padding only to the <td> element, which is table data.
Example
table tr td {padding:10px;}
Output
Column 1 – Row 1 | Column 2 – Row 1 |
Column 1 – Row 2 | Column 2 – Row 2 |
Column 1 – Row 3 | Column 2 – Row 3 |
Table – Borders
The table border controls the width of the border as well as the style and colour of the border.
Syntax
table {border:integer | pixels | percentage | pt;}
The above syntax only controls with width of the table border; the syntax below will combine with width, border style and color.
Syntax
table {border:width border-style #color;}
For the border style property you can select the following:
- Solid
- Dashed
- Groove
- Inset
- Outset
- Ridge
- Dotted
- Double
- None
Example
table {border:5px dashed #000;}
Output
Column 1 – Row 1 | Column 2 – Row 1 |
Column 1 – Row 2 | Column 2 – Row 2 |
Column 1 – Row 3 | Column 2 – Row 3 |
Table – Border-Collapse
The border-collapse property collapses the border into one single border. Here is the above table:
Games | Copies Sold (in Millions) |
---|---|
GTA 4 | 30 |
Battlefield 3 | 24 |
Modern Warfare 3 | 20 |
Uncharted | 15 |
Here is the code to collapse the border:
table {border-collapse:collapse;}
Output
Games | Copies Sold (in Millions) |
---|---|
GTA 4 | 30 |
Battlefield 3 | 24 |
Modern Warfare 3 | 20 |
Uncharted | 15 |
Table – Heading Style
As you see in the above examples the table heading was styled. This is easily achieved, and the first rows in the above table are headings <th>.
Example
table tr th {background-color:#2B73F0;}
Output
Games | Copies Sold (in Millions) |
---|---|
GTA 4 | 30 |
Battlefield 3 | 24 |
Modern Warfare 3 | 20 |
Uncharted | 15 |