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 |
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 and the <th>/<td> elements have separate borders.
To display a single border for the table, use the border-collapse property.
The border-collapse property sets whether the table borders are collapsed into a single border or separated:
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:
The text-align property sets the horizontal alignment, like left, right, or center.
By default, the text in <th> elements are center-aligned and the text in <td> elements are left-aligned.
The following example left-aligns the text in <th> elements:
The vertical-align property sets the vertical alignment, like top, bottom, or middle.
By default, the vertical alignment of text in a table is middle (for both <th> and <td> elements).
The following example sets the vertical text alignment to bottom for <td> elements:
To control the space between the border and content in a table, use the padding property on <td> and <th> elements:
The example below specifies the color of the borders, and the text and background color of <th> elements:
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.
Your message has been sent to W3Schools.