|
|
|
|
CSS Tables
|
|
|
|
|
Though HTML allows styling of tables, this styling can be greatly improved using CSS. Tables are largely associated with attributes like, borders, cellspacing & cellpadding. With the help of CSS, tables can be styled with respect to font, border, text, color & background.
Table Borders – The table border property is used to specify borders in tables. This property causes a double border to be created for the table.
Example: table, th, td {border: 1px solid black;} |
Table Collapse Borders – The border collapse property is used to specify whether the borders are collapsed into a single border or is it separated.
Example:
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
|
|
|
|
|
|
Table Width & Height – These properties help set the width & height of the table.
Example: table {width:100%;} th {height:25px;} |
Table Text Alignment – The alignment of text in the table is set with the text align property (left, right, center) & the vertical align property (top, bottom, middle).
Example: td {text-align:left;} or td {height:50px;vertical-align:top;} |
Table Padding – The padding property is used on the td & th elements to control the space between the table text & border.
Example: td {padding:15px;} |
Table Color – This property is used to specify the color of borders along with the text & background color of th elements.
Example:
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
|
|
|
|
|
| |
|
| |
|
|
|
|
|
|
