CSS TABLE PROPERTIES

CSS Tables

Table Borders

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

·         The example below specifies a black border for table, th, and td elements:

Syntax:

Table, Th, td
{
border: 1px solid black;
}

 

Collapse Borders

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

Syntax:

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.

·         The example below sets the width of the table to 100%, and the height of the th elements to 50px:

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:

Syntax:

Td
{
text-align: right;
}

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

Syntax:

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:

Syntax:

Table, td, Th
{
border: 1px solid green;
}
Th
{
background-color: green;
color: white;
}