How to Style a Table in CSS

Tables are a common way to table css data on the web. Often times they can be difficult to read due to a lack of space between each row and column. In this article we will show you how to make your tables more readable by adding some basic style to them using CSS. We will cover things like padding, width, text alignment and even cell spans.

First we will start with some general styles for the th> and td> elements. For the th> element we will add some bottom padding and for the td> we will apply some right padding. We will also align the text for both of them to the right.

Mastering Table Styling with CSS: Create Elegant and Functional Web Data Displays

Now that we have some general styles for the th>and td> elements we will move toward making our table look nicer by adding some space between each of the cells in the table. We will use the width property on the th> and td> elements to achieve this.

Lastly we will use the :nth-child() pseudo-class selector to create different alternating row colors within our table. This technique is commonly referred to as zebra striping. We will create a style for every odd row in the table.

The last thing we will address is the spacing between each of the rows in the table. For this we will use the text-align property to center the text inside of each cell. Text alignment can be done horizontally or vertically.