Learn how to manage spacing in HTML pages by using tables.

We'll cover the following

Columns of a table

Using a table was the traditional way of spacing HTML pages. Unless we are displaying tabular data, a CSS grid is now preferable for layout purposes, so Tailwind does not provide many specific table utilities.

Tailwind lets us use .table-auto to keep the default browser behavior of auto spacing the columns of a table based on its content. If we want to specify column widths explicitly, we can use .table-fixed on the <table> element. We’ll put an explicit width helper on each column of the table—the fractional helpers are useful for this.

Tailwind also lets us merge the borders of adjacent table cells with the help of the .border-collapse utility, which is reset with .border-separate.

We’ll try the following border classes in the playground below:

  • table-fixed
  • border
  • border-collapse

Below is the result we’ll get

Get hands-on with 1200+ tech skills courses.