---
title: CSS Table Size
description: "## 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 elements to 70px: | Firstname | Lastname |…"
url: "https://apprentice.mn/docs/css-table-size/"
updated: "2021-05-08"
category: CSS
---

# 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:

| 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;
}`               [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-table-size%2F&linkname=CSS%20Table%20Size](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-table-size%2F&linkname=CSS%20Table%20Size)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-table-size%2F&linkname=CSS%20Table%20Size](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-table-size%2F&linkname=CSS%20Table%20Size)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-table-size%2F&linkname=CSS%20Table%20Size](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-table-size%2F&linkname=CSS%20Table%20Size)[https://www.addtoany.com/share](https://www.addtoany.com/share)