CSS Tables
Table Borders
To specify table borders in
CSS, use the border property.
The example below specifies
a solid border for <table>, <th>, and <td> elements:
|
Firstname |
Lastname |
|
Name |
|
|
Name |
Example
table, th, td {
border: 1px solid;
}
Full-Width Table
The table above might seem
small in some cases. If you need a table that should span the entire screen (full-width),
add width: 100% to the <table>
element:
|
Firstname |
Lastname |
Example
table {
width: 100%;
}
Double Borders
Notice
that the table in the examples above have double borders. This is because both
the table and the <th> and <td> elements have separate borders.
To remove
double borders, take a look at the example below.
Collapse Table Borders
The border-collapse property sets whether the table borders
should be collapsed into a single border:
|
Firstname |
Lastname |
Example
table {
border-collapse: collapse;
}
If you
only want a border around the table, only specify the border property for <table>:
|
Firstname |
Lastname |
Example
table {
border: 1px solid;
}
CSS Table
Size
Table Width and Height
The width and height of a
table are 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 70px:
|
Firstname |
Lastname |
Savings |
Example
table {
width: 100%;
}
th {
height: 70px;
}
To create a table that
should only span half the page, use width: 50%:
|
Firstname |
Lastname |
Savings |
|
Name |
||
|
Name |
||
|
Name |
Example
table {
width: 50%;
}
CSS Table
Alignment
Horizontal Alignment
The text-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.
To center-align the content
of <td> elements as well, use text-align:
center:
|
Firstname |
Lastname |
Savings |
|
Name |
||
|
Name |
||
|
Name |
Example
td {
text-align: center;
}
To left-align the content,
force the alignment of <th> elements to be left-aligned, with the text-align: left property:
|
Firstname |
Lastname |
Savings |
|
Name |
||
|
Name |
||
|
Name |
Example
th {
text-align: left;
}
Vertical Alignment
The vertical-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:
|
Firstname |
Lastname |
Savings |
|
Name |
||
|
Name |
||
|
Name |
Example
td {
height: 50px;
vertical-align: bottom;
}
CSS Table
Alignment
Horizontal Alignment
The text-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.
To center-align the content
of <td> elements as well, use text-align:
center:
|
Firstname |
Lastname |
Savings |
|
Name |
||
|
Name |
||
|
Name |
Example
td {
text-align: center;
}
To left-align the content,
force the alignment of <th> elements to be left-aligned, with the text-align: left property:
|
Firstname |
Lastname |
Savings |
|
Name |
||
|
Name |
||
|
Name |
Example
th {
text-align: left;
}
Vertical Alignment
The vertical-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:
|
Firstname |
Lastname |
Savings |
|
Name |
||
|
Name |
||
|
Name |
Example
td {
height: 50px;
vertical-align: bottom;
}
CSS Responsive
Table
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 |
|
Name |
Name |
00 |
00 |
00 |
00 |
00 |
00 |
00 |
00 |
00 |
|
Name |
Name |
00 |
00 |
00 |
00 |
00 |
00 |
00 |
00 |
00 |
|
Name |
Name |
00 |
00 |
00 |
00 |
00 |
00 |
00 |
00 |
00 |
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 |
