Chapter 11
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 |
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:
Example
table, th, td {
border: 1px solid black;
}
Example In HTML
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
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:
Example
table {
width: 100%;
}
Collapse Table Borders
The border-collapse property sets whether the table borders should be collapsed into a single border:
Example
table {
border-collapse: collapse;
}
Example in HTML
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
width: 100%;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Let the borders collapse</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
If you only want a border around the table, only specify the border property for <table>:
Example in HTML
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Single Border Around The Table</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
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:
Example in HTML
table {
width: 100%;
}
th {
height: 70px;
}
Example in HTML
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
height: 70px;
}
</style>
</head>
<body>
<h2>The width and height Properties</h2>
<p>Set the width of the table, and the height of the table header row:</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
To create a table that should only span half the page, use width: 50%:
Example
table {
width: 50%;
}
th {
height: 70px;
}
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:
Example in HTML
td {
text-align: center;
}
Example in HTML
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
td {
text-align: center;
}
</style>
</head>
<body>
<h2>The text-align Property</h2>
<p>This property sets the horizontal alignment (like left, right, or center) of the content in th or td.</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
To left-align the content, force the alignment of <th> elements to be left-aligned, with the text-align: left property:
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:
Example
td {
height: 50px;
vertical-align: bottom;
}
CSS Table Style
Table Padding
To control the space between the border and the content in a table, use the padding property on <td> and <th> elements:
Example in HTML
th, td {
padding: 15px;
text-align: left;
}
Example in HTML
<html>
<head>
<style>
table, td, th {
border: 1px solid #ddd;
text-align: left;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<h2>The padding Property</h2>
<p>This property adds space between the border and the content in a table.</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Horizontal Dividers
Add the border-bottom property to <th> and <td> for horizontal dividers:
Example
th, td {
border-bottom: 1px solid #ddd;
}
Example in HTML
<html>
<head>
<style>
table {