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.{
border: 1px solid black;
}
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;
}
{
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;
{
border-collapse:collapse;
border-spacing:10px;
}
table,th, td
{
border: 1px solid black;
}
table,th, td
{
border: 1px solid black;
}
Table Width and Height
table
{
width:100%;
}
th
{
height:50px;
}
{
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;
}
{
text-align:right;
}
The vertical-align property sets the vertical alignment,
like top, bottom, or middle:
td
{
height:50px;
vertical-align:bottom;
}
{
height:50px;
vertical-align:bottom;
}
Table Padding
td
{
padding:15px;
}
{
padding:15px;
}
Table Color
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
No comments:
Post a Comment
Please write your view and suggestion....