The look of an HTML table can be greatly improved with CSS:
| Company |
Contact |
Country |
| Alfreds Futterkiste |
Maria Anders |
Germany |
| Berglunds snabbkop |
Christina Berglund |
Sweden |
| Centro comercial Moctezuma |
Francisco Chang |
Mexico |
| Ernst Handel |
Roland Mendel |
Austria |
| Island Trading |
Helen Bennett |
UK |
| Koniglich Essen |
Philip Cramer |
Germany |
| Laughing Bacchus Winecellars |
Yoshi Tannamuri |
Canada |
| Magazzini Alimentari Riuniti |
Giovanni Rovelli |
Italy |
| North/South |
Simon Crowther |
UK |
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:
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 property.
Collapse Borders
The border-collapse property sets whether the table borders are collapsed into a single border or separated:
table { 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:
table { width:100%; }
th { height:50px; }
Demonstration
The following demonstration shows how the script of HTML and CSS is displayed on the Web:
