How to Style a Table with CSS

Back before CSS, people used HTML tables to lay out web pages. The rule is the same now as it was then: tables should not be used to lay out pages. They should be used for tabular data, such as financial reports or a meeting agenda. To style tables with CSS, you should first be familiar with HTML table syntax.

The following is a list of the CSS you can use in tables, the tags you can use them with, and a brief description of each:

CSS

Tags

Description

border-spacing

table

Specifies the space between adjacent borders and the content surrounding the table.

border-collapse

table

Takes the values separate and collapse. Used to indicate whether adjacent borders should be merged (collapse) or not (separate).

padding

table

When applied to table cells (e.g., th and td), creates a buffer between their content and the cell borders.

border

table

Allows you to control the borders of each side of the table and each side of each cell independently using the border properties.

Chris is a prolific author and trainer, and the CEO of WatzThis?. His published books include Writing Computer Code, JavaScript for Kids, Coding with JavaScript For Dummies, Beginning HTML5 and CSS3 For Dummies, Webkit For Dummies, CIW eCommerce Certification Bible, and New Riders' XHTML.

About Webucator

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, Azure, Windows, Java, Adobe, Python, SQL, JavaScript, Angular and much more. Check out our complete course catalog.