CSS Table Style | Tutorial Reference

How to style HTML tables with CSS for padding, borders, hover effects, and zebra striping to improve readability and visual appeal.

Some CSS style that you can apply to HTML tables.

Table Padding

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

Example:

th, td {  
	padding:  15px;  
	text-align:  left;  
}

Add the border-bottom property to <th> and <td> for horizontal dividers:

Example:

th, td {  
	border-bottom:  1px solid #ddd;  
}

Use the :hover selector on <tr> to highlight table rows on mouse over:

Example:

th, td {  
	border-bottom:  1px solid #ddd;  
}

For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:

Example:

tr:nth-child(even) {background-color:  #f2f2f2;}