CSS Tables

You can easily style tables with CSS and make them look more colourful. For example:
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