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 |
Table Borders
To specify table borders in CSS, use theborder
property.The example below specifies a black border for <table>, <th>, and <td> elements:
Example
table, th, td {
border: 1px solid black;}
Collapse Table Borders
Theborder-collapse
property sets whether the table borders should be collapsed into a single border:Example
table {
border-collapse: collapse;}
table, th, td {
border: 1px solid black;}
If you only want a border around the table, only specify the
border
property for <table>:Example
table {
border: 1px solid black;}
Table Width and Height
Width and height of a table are defined by thewidth
and height
properties.The example below sets the width of the table to 100%, and the height of the <th> elements to 50px:
Example
table {
width: 100%;}
th {
height: 50px;}
Horizontal Alignment
Thetext-align
property sets the horizontal alignment (like left, right, or center) of the content in <th> or <td>.By default, the content of <th> elements are center-aligned and the content of <td> elements are left-aligned.
The following example left-aligns the text in <th> elements:
Example
th {
text-align: left;}
Vertical Alignment
Thevertical-align
property sets the vertical alignment (like top, bottom, or middle) of the content in <th> or <td>.By default, the vertical alignment of the content in a table is middle (for both <th> and <td> elements).
The following example sets the vertical text alignment to bottom for <td> elements:
Example
td {
height: 50px;
vertical-align: bottom;}
Table Padding
To control the space between the border and the content in a table, use thepadding
property on <td> and <th> elements:Example
th, td {
padding: 15px;
text-align: left;}
Horizontal Dividers
First Name | Last Name | Savings |
---|---|---|
Peter | Griffin | $100 |
Lois | Griffin | $150 |
Joe | Swanson | $300 |
border-bottom
property to <th> and <td> for horizontal dividers:Example
th, td {
border-bottom: 1px solid #ddd;}
Hoverable Table
Use the:hover
selector on <tr> to highlight table rows on mouse over:First Name | Last Name | Savings |
---|---|---|
Peter | Griffin | $100 |
Lois | Griffin | $150 |
Joe | Swanson | $300 |
Example
tr:hover {background-color: #f5f5f5;}
Striped Tables
First Name | Last Name | Savings |
---|---|---|
Peter | Griffin | $100 |
Lois | Griffin | $150 |
Joe | Swanson | $300 |
nth-child()
selector and add a background-color
to all even (or odd) table rows:Example
tr:nth-child(even) {background-color: #f2f2f2;}
Table Color
The example below specifies the background color and text color of <th> elements:First Name | Last Name | Savings |
---|---|---|
Peter | Griffin | $100 |
Lois | Griffin | $150 |
Joe | Swanson | $300 |
Example
th {
background-color: #4CAF50;
color: white;}
Responsive Table
A responsive table will display a horizontal scroll bar if the screen is too small to display the full content:First Name | Last Name | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Jill | Smith | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
Eve | Jackson | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
Adam | Johnson | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
Add a container element (like <div>) with
overflow-x:auto
around the <table> element to make it responsive:Example
<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>
Note: In OS X Lion (on Mac), scrollbars are hidden by default and only shown when being used (even though "overflow:scroll" is set).
CSS Table Properties
Property | Description |
---|---|
border | Sets all the border properties in one declaration |
border-collapse | Specifies whether or not table borders should be collapsed |
border-spacing | Specifies the distance between the borders of adjacent cells |
caption-side | Specifies the placement of a table caption |
empty-cells | Specifies whether or not to display borders and background on empty cells in a table |
table-layout | Sets the layout algorithm to be used for a table |