CSS Tables
Table Borders :
To specify table borders in CSS, utilize the border property.
The example below specifies a black border for table, th, and td components:
The example below specifies a black border for table, th, and td components:
Example :
table, th, td
{
border: 1px solid black;
}
{
border: 1px solid black;
}
Notice that the table in the example above has double borders. The reason being both table and the th/td aspects have split borders.
Collapse Borders :
The border-collapse property units whether the dining table edges are collapsed in to a simple border or divided:
Example :
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
{
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;
}
{
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;
}
{
text-align:right;
}
The vertical-align property sets the vertical alignment, like top, bottom, or middle:
Example :
td
{
height:50px;
vertical-align:bottom;
}
{
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;
}
{
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;
}
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
