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 |
---|---|---|
Peter | Griffin | $100 |
Lois | Griffin | $150 |
Joe | Swanson | $300 |
Cleveland | Brown | $250 |
table {
width: 100%;
}
th {
height: 70px;
}
To create a table that should only span half the page, use width: 50%
:
Firstname | Lastname | Savings |
---|---|---|
Peter | Griffin | $100 |
Lois | Griffin | $150 |
Joe | Swanson | $300 |
Cleveland | Brown | $250 |
table {
width: 50%;
}
th {
height: 70px;
}
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 |
---|---|---|
Peter | Griffin | $100 |
Lois | Griffin | $150 |
Joe | Swanson | $300 |
Cleveland | Brown | $250 |
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 |
---|---|---|
Peter | Griffin | $100 |
Lois | Griffin | $150 |
Joe | Swanson | $300 |
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:
The vertical-align Property #
This property sets the vertical alignment (like top, bottom, or middle) of the content in th or td.
Firstname | Lastname | Savings |
---|---|---|
Peter | Griffin | $100 |
Lois | Griffin | $150 |
Joe | Swanson | $300 |
Cleveland | Brown | $250 |
td {
height: 50px;
vertical-align: bottom;
}