CSS Tables
The look of an HTML table can be greatly improved with CSS:
| Company |
Contact |
Country |
| Alfreds Futterkiste |
Maria Anders |
Germany |
| Berglunds snabbköp |
Christina Berglund |
Sweden |
| Centro comercial Moctezuma |
Francisco Chang |
Mexico |
| Ernst Handel |
Roland Mendel |
Austria |
| Island Trading |
Helen Bennett |
UK |
| Königlich Essen |
Philip Cramer |
Germany |
| Laughing Bacchus Winecellars |
Yoshi Tannamuri |
Canada |
| Magazzini Alimentari Riuniti |
Giovanni Rovelli |
Italy |
| North/South |
Simon Crowther |
UK |
| Paris spécialités |
Marie Bertrand |
France |
| The Big Cheese |
Liz Nixon |
USA |
| Vaffeljernet |
Palle Ibsen |
Denmark |
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:
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 property.
Collapse Borders
The border-collapse property sets whether the table borders are collapsed into a single border or
separated:
Example
table
{
border-collapse:collapse;
}
table,
th, td
{
border: 1px solid black;
} |
Try it yourself »
|
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:
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:
The vertical-align property sets the vertical alignment, like top, bottom, or
middle:
Table Padding
To control the space between the border and content in a table, use the padding
property on td and th elements:
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;
} |
Try it yourself »
|
 |
More Examples |
Make a fancy table
This example demonstrates how to create a fancy table.
Set the position of the table caption
This example demonstrates how to position the table caption.
Click here to design a Stunning Flash Website for Free
Wix is a revolutionary web design tool that provides anyone with the possibility to create professional and beautiful websites for free.
With e-commerce features, search engine visibility and many more professional tools, Wix is the ultimate solution for creating a spectacular site while saving tons of money.
| 
