CSS Table

Using CSS can make HTML tables more beautiful.

Company Contact Country
Alfred’s feed box Maria Anders Germany
Berglund’s supermarket Christina Berglund Sweden
Moctezuma shopping center Francisco Chang Mexico
Serious trade Roland Mendel Austria
Island Trading Helen Bennett UK
Royal food Philip Cramer Germany
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Gathered Food Warehouses Giovanni Rovelli Italy
North/South Simon Crowther UK
Paris specialties Marie bertrand France
The Big Cheese Liz Nixon USA
The waffle iron Palle Ibsen Denmark

Table border

To specify the border of the CSS table, use the border property.

The following example specifies the black borders of the Th and TD elements of a table:

Example

table, th, td
{
    border: 1px solid black;
}

Please note that the table in the example above has a double border. This is because the table and th/td elements have independent boundaries.

To display a single border of a table, use the border-collapse property.

Folding border

The border-collapse property sets whether the border of the table is collapsed into a single border or separated:

Example

table
{
    border-collapse:collapse;
}
table,th, td
{
    border: 1px solid black;
}

Table width and height

The Width and height properties define the width and height of the table.

The following example is a table with a width of 100% and a height of the th element of 50 pixels:

Example

table 
{
    width:100%;
}
th
{
    height:50px;
}

Table text alignment

The text alignment and vertical alignment properties in the table.

The text-align attribute sets the horizontal alignment, left, right, or center:

Example

td
{
    text-align:right;
}

The vertical alignment property sets the vertical alignment, such as top, bottom or middle:

Example

td
{
    height:50px;
    vertical-align:bottom;
}

Form fill

If you control the border between spaces in the content of the table, you should use the padding attributes of the td and th elements:

Example

td
{
    padding:15px;
}

Table color

The following example specifies the color of the border, and the text and background color of the th element:

Example

table, td, th
{
    border:1px solid green;
}
th
{
    background-color:green;
    color:white;
}

More examples

Create a personalized table
This example demonstrates how to create a personalized table.

Set the position of
the table title This example demonstrates how to position the table title.