Saturday, 8 April 2017

css table

CSS Tables

Table Borders

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.
To display a single border for the table, use the border-collapse: collapse| separate property.

Collapse Borders

table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
The border-spacing Property
The border-spacing property specifies the distance that separates the adjacent cells borders.
table
{
border-collapse:collapse;
border-spacing:10px;
}
table,th, td
{
border: 1px solid black;
}

Table Width and Height

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

Table Text Alignment

The text-align property sets the horizontal alignment, like left, right, or center:
td
{
text-align:right;
}
The vertical-align property sets the vertical alignment, like top, bottom, or middle:
td
{
height:50px;
vertical-align:bottom;
}

Table Padding

td
{
padding:15px;
}

Table Color

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

No comments:

Post a Comment

Please write your view and suggestion....