Flash cards
Review the key moves
What is the main idea behind CSS Table Size (Width and Height)?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___: 100%;Put the learning moves in the order that makes the concept easiest to apply.
CSS Table Width
The CSS width property is used to set the width of a table.
The width can be set
- in percent (%)
- as a fixed length (px)
- by the auto keyword
CSS Table Width in Percent
To create a table that spans the entire screen (full-width), use width: 100%; :
| Firstname | Lastname | Savings |
|---|
Example
table {
width: 100%;
}Live preview
To create a table that spans half the page, use width: 50%; :
| Firstname | Lastname | Savings |
|---|
Example
table {
width: 50%;
}Live preview
CSS Table Width in a Fixed Width
To create a table with a fixed width, use width: 500px :
| Firstname | Lastname | Savings |
|---|
Example
table {
width: 500px;
}Live preview
CSS Table Width Using auto
To let the browser calculate the width, use width: auto; :
| Firstname | Lastname | Savings |
|---|
Example
table {
width: auto;
}Live preview
CSS Table Height
The CSS height property is used to set the height of a table.
The height can be set
- in percent (%)
- as a fixed length (px)
- by the auto keyword
The example below sets the height of the table headers (<th>) to 70px:
| Firstname | Lastname | Savings |
|---|
Example
th {
height: 70px;
}Live preview