View Categories

CSS Table Size

1 min read

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; }

Powered by BetterDocs

Leave a Reply