CSS Table Width
The width property sets the width of a table. It can be a percent (%), a fixed length (px), or the auto keyword.
CSS Table Width in Percent
To make a table span the whole width, use width: 100%. To make it span half the page, use width: 50%.
Full width
The table spans the full width of the page.
Prompt
An HTML page with a full-width table.
In an internal
<style> block, give the table/th/td a 1px solid collapsed border and set the table width to 100%. Add a table with First/Last/Savings columns and a few rows.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table, th, td {
border: 1px solid;
border-collapse: collapse;
}
table {
width: 100%;
}
</style>
</head>
<body>
<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>
</table>
</body>
</html>
Half width
The table spans half the width of the page.
Prompt
An HTML page with a half-width table.
In an internal
<style> block, give the table/th/td a 1px solid collapsed border and set the table width to 50%. Add a table with First/Last/Savings columns and a few rows.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table, th, td {
border: 1px solid;
border-collapse: collapse;
}
table {
width: 50%;
}
</style>
</head>
<body>
<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>
</table>
</body>
</html>
CSS Table Width in a Fixed Width
To make a table a fixed width, use a length like width: 500px.
Example
The table is a fixed 500px wide.
Prompt
An HTML page with a fixed-width table.
In an internal
<style> block, give the table/th/td a 1px solid collapsed border and set the table width to 500px. Add a table with First/Last/Savings columns and a few rows.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table, th, td {
border: 1px solid;
border-collapse: collapse;
}
table {
width: 500px;
}
</style>
</head>
<body>
<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>
</table>
</body>
</html>
CSS Table Width Using auto
Use width: auto to let the browser size the table to fit its content.
Example
The table width is set to auto.
Prompt
An HTML page with a table whose width is set to auto.
In an internal
<style> block, give the table/th/td a 1px solid collapsed border and set the table width to auto, so the browser sizes it to the content. Add a table with First/Last/Savings columns and a few rows.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table, th, td {
border: 1px solid;
border-collapse: collapse;
}
table {
width: auto;
}
</style>
</head>
<body>
<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>
</table>
</body>
</html>
CSS Table Height
The height property sets the height of a table. It can be a percent (%), a fixed length (px), or the auto keyword.
Example
The table headers are given a fixed height of 70px.
Prompt
An HTML page that sets a fixed height for the table headers.
In an internal
<style> block, give the table/th/td a 1px solid collapsed border and set the <th> height to 70px. Add a table with First/Last/Savings columns and a few rows.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table, th, td {
border: 1px solid;
border-collapse: collapse;
}
th {
height: 70px;
}
</style>
</head>
<body>
<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>
</table>
</body>
</html>