Learn how to build and design websites with our tutorials.

CSS Tables Tutorial

View Tutorial Contents


CSS allows you to style HTML tables.

CSS Table Borders

The CSS border property allows you to define borders and border styles.

The CSS example below shows you how to set a black table border for <table>, <tr>, <th> and <td> elements. When setting table border properties, you will also want to set the border-collapse property with a value of collapse so the the borders are collapsed into a single border.


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

Heading 1 Heading 2
Row 1, Cell 1 Row 1, Cell 2
Row 2, Cell 1 Row 2, Cell 2

Table Width and Height

The CSS properties width and height allow you to define the width and height of tables and table elements.

The CSS example below shows you how to specify the width of a table and the height of the <th> element.

I do not recommend giving tables a fixed width. Instead, I recommend using percentages. The reason is because when the screen is resized to a smaller width the fixed width, or when viewed on a devices, the width of the table may be bigger than the width of screen size causing unwanted issues.


table{
border-collapse: collapse;
width: 100%;
}
table, tr, th, td{
border: 1px solid black;
}
table th{
height: 1.5em;
}

Heading 1 Heading 2
Row 1, Cell 1 Row 1, Cell 2
Row 2, Cell 1 Row 2, Cell 2

CSS Table Horizontal Text Alignment

The CSS text-align property allows you to set the horizontal alignment of a text.

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

The values of the text-align property that are used on tables are listed below.

Property Values
text-align left, center, right

The CSS example below shows you how to set the alignment of the text of a <th> to the left.


table th{
text-align: left;
}

Heading 1 Heading 2
Row 1, Cell 1 Row 1, Cell 2
Row 2, Cell 1 Row 2, Cell 2

CSS Table Vertical Text Alignment

The CSS vertical-align property allows you to set the vertical alignment of a text.

The values of the vertical-align property that are most commonly on tables are listed below.

Property Values
vertical-align top, middle, bottom

By default, the vertical alignment of the <th> and <td> table elements is set to middle.

The CSS example below shows you how to vertically align text in a table.


table, td, th{
border: 1px solid black;
border-collapse: collapse;
}
th{
height: 50px;
vertical-align: top;
}
td{
height: 50px;
vertical-align: bottom;
}

Heading 1 Heading 2
Row 1, Cell 1 Row 1, Cell 2
Row 2, Cell 1 Row 2, Cell 2

CSS Table Padding

The CSS padding property allows you to set the space between the table border and the <th> and <td> elements.

The CSS example below shows you how to add padding to the table <th> and <td> elements.


table, td, th{
border: 1px solid black;
border-collapse: collapse;
}
th{
padding: 25px;
vertical-align: middle;
text-align: center;
}
td{
padding: 10px;
vertical-align: middle;
text-align: center;
}

Heading 1 Heading 2
Row 1, Cell 1 Row 1, Cell 2
Row 2, Cell 1 Row 2, Cell 2

Table Colors

You can set the colors of the borders of tables, the text and the background color of the <th> and <td> elements.

The CSS example below shows you how to set the colors of table borders and table elements.


table, table td, table th{
border: 2px solid green;
border-collapse: collapse;
}
table td, table th{
color: white;
}
table th{
padding: 2em;
background: blue;
}
table td{
padding: 1em;
background: red;
}

Heading 1 Heading 2
Row 1, Cell 1 Row 1, Cell 2
Row 2, Cell 1 Row 2, Cell 2