CSS Tables

The look of an HTML table can be greatly improved with CSS:

Table Borders

To specify table borders in CSS, use the border property.

The example below specifies a black border for <table>, <th>, and <td> elements:

Example

table, th, td {
   border: 1px solid black;
}

Notice that the table in the example above has double borders. This is because both the table and the <th>/<td> elements have separate borders.

To display a single border for the table, use the border-collapse property.

---

Collapse Borders

The border-collapse property sets whether the table borders are collapsed into a single border or separated:

Example

table {
    border-collapse: collapse;
}
table, th, td {
    border: 1px solid black;
}

---

Table Width and Height

Width and height of a table is 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 50px:

Example

table {
    width: 100%;
}
th {
    height: 50px;
}

---

Horizontal Text Alignment

The text-align property sets the horizontal alignment, like left, right, or center.

By default, the text in <th> elements are center-aligned and the text in <td> elements are left-aligned.

The following example left-aligns the text in <th> elements:

Example

th {
    text-align: left;
}

---

Vertical Text Alignment

The vertical-align property sets the vertical alignment, like top, bottom, or middle.

By default, the vertical alignment of text in a table is middle (for both <th> and <td> elements).

The following example sets the vertical text alignment to bottom for <td> elements:

Example

td {
    height: 50px;
    vertical-align: bottom;
}

---

Table Padding

To control the space between the border and content in a table, use the padding property on <td> and <th> elements:

Example

td {
    padding: 15px;
}

---

Table Color

The example below specifies the color of the borders, and the text and background color of <th> elements:

Example

table, td, th {
    border: 1px solid green;
}
th {
    background-color: green;
    color: white;
}