CSS Tables properties

Table Borders

To specify table borders in CSS, use the border property.

Example

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

Notice that the table in the example above has double borders. This is because both the table, th, and td elements have separate borders.

Collapse Borders

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

Example

table
{

border-collapse:collapse;

}
table,th, td
{

border: 1px solid black;

}

Table Width and Height

Width and height of a table is defined by the width and height properties.

Example

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

Table Text Alignment

The text in a table is aligned with the text-align and vertical-align properties. The text-align property sets the horizontal alignment, like left, right, or center:

Example

td
{
text-align:right;
}

The vertical-align property sets the vertical alignment, like top, bottom, or middle:

Example

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

Table Padding

To control the space between the border and content in a table, use the padding property on td and th elements:

Example

td
{
padding:15px;
}

Table Color

The example below specifies the color of the borders, and the text and background color of th elements:

Example

table, td, th
{

border:1px solid green;

}
th
{

background-color:green;
color:white;

}