Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

Create an Outstanding Tailwind Table

In Websites and Documents, a few distinct ways of presenting data apart from text help readers better understand that data. This is because sometimes written texts cannot accurately describe insights or data, and some formats work better. These formats include charts, graphs, and tables. This article looks into tables exclusively, specifically, Tailwind table, as a way to present data.

A Table is a presentation format that uses rows and columns to arrange data. Tables when used properly often break down data, making them easier to assimilate for an audience. Tables work best when they present a collection of records, where each record has similar properties. Rows usually represent records in a table while columns represent properties of the records.

Just in case you need beautiful tables for your websites and apps, check out Purecode. Purecode is a marketplace for AI-generated UI Components anybody can use in their projects. It contains components such as Sidebars, Cards, and a lot of pretty tables. The components there are also compatible with Tailwind CSS, Material UI, and more.

This article teaches how to create tables using Tailwind CSS (A CSS Library) on web applications, and a good grasp of HTML and CSS is essential to understanding the material. The article also teaches several options for creating tables with this library, and some clever customization techniques.

It will be a fun read so let’s just get started. But before we dive into the coding, why should we use tables in our websites?

Why should you use a Table?

You might consider using a table as a presentation format for a few reasons. These reasons include: Grouping related data, Data summary, and Visual appeal. This section of the article will explain how a table serves these functions.

  1. Grouping related data: As mentioned earlier, tables can present a collection of records that have similar properties. Because of this ability, whenever a document or website wants to group data, an efficient way to do this is to use tables. The reader upon stumbling on a good table illustration will have a better mental model of the relationship between the records the document is presenting.

  2. Data Summary: Another reason why you should use a table is to summarize data. A Table at a glance can help summarize complex data that would otherwise be very hard to do. Tables provide a concise look at the most important parts of the data, and help the reader get quick information from them.

  3. Visual Appeal: Because of the arrangement in rows and columns, Tables can seamlessly fit into a document structure and look good doing so. Tables bring all the benefits of organizing data and being aesthetically pleasing, so the upsides to using them are huge.

This above list is not in any way exhaustive, but those are a few reasons why tables are useful.

In Blog posts and websites, people design tables and use them. Web Developers have a lot of tools for designing tables and this article looks into one of the most efficient tools — using Tailwind CSS.

Overview of Tailwind CSS Tables

Tailwind CSS is a popular CSS Library that makes styling websites easier. As of the time of this article, Tailwind CSS is the second most used CSS Library, after Bootstrap, according to State of CSS 2023.

State of CSS 2023

Tailwind CSS works with Next.js, Laravel, Ruby on Rails, Solid.js, Vue.js, and more frameworks. However, it does not need a framework to work, developers can still use the library on a project that doesn’t have any frameworks. To Tailwind, the developer has to add classes to HTML elements designing unique components for their projects.

Here is a brief overview of Tailwind CSS:

Tailwind CSS provides users with an easy way to design tables using its set of useful classes. Since the Library caters to most parts of Web Design, Tables are not an exception. With the provided classes, developers can come up with stunning table designs as we will see in this article.

For the rest of the article, this is the table we will design with Tailwind CSS.

YearMovieDirector
2018Lion HeartGenevieve Nnaji
2018King of BoysKemi Adetiba
2020CitationKunle Afoloyan
2023The Black BookEditi Effiong

How to Create a Tailwind Table

To create a Tailwind Table, you need to create a table using HTML and then design it. But there are some steps you might take before doing this. This section of the article will list and explain the possible steps you will take while creating a Tailwind table.

  1. Install Tailwind CSS: The way to install Tailwind CSS in a project varies according to your code setup as a developer. As mentioned earlier Tailwind works with several frameworks, and most of them have different ways to install Tailwind CSS. For more information on how to install the library in your preferred framework, check out the Tailwind Documentation.

  2. Create a Table in HTML: The next step is to use the markup language (HTML) to create a Table. This can be easily done using a `<table>` tag in HTML. The table should contain all the details you would like to include before you start styling. Consider the illustration below:

          <table class="table-auto">
            <thead>
              <tr>
                <th>Year</th>
                <th>Movie</th>
                <th>Director</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>2018</td>
                <td>Lionheart</td>
                <td>Genevieve Nnaji</td>
              </tr>
              <tr>
                <td>2018</td>
                <td>King of Boys</td>
                <td>Kemi Adetiba</td>
              </tr>
              <tr>
                <td>2020</td>
                <td>Citation</td>
                <td>Kunle Afolayan</td>
              </tr>
              <tr>
                <td>2023</td>
                <td>The Black Book</td>
                <td>Editi Effiong</td>
              </tr>
            </tbody>
          </table>
  3. Style with Tailwind CSS Classes: This is the final step when creating a Tailwind CSS table. Here, you design the table making it what you want it to look like. Of course, you have to use Tailwind CSS classes to do this. Note that Tailwind is not a library that provides already-made components for developers. For this reason, a developer has to heavily design a custom table for themselves using the provided classes. An example is this table designed using Tailwind CSS classes.

    Tailwind CSS Table

The upcoming sections of this article will focus on specific classes Tailwind CSS has that are relevant to tables. The sections will explain what the classes do and how to use them, including a few examples. By the end, you will be able to design tables such as the one above.

Using Border Collapse in Tailwind Tables

Every cell in a table has borders. A Cell is the intersection of a row and a column. The more rows and columns a table has, the more cells the table has. The cells include the table heads (created using `th`) and table body cells (created using `td`).

In Tailwind CSS, to give individual cells a border, use the `border` class. Also, Tailwind CSS allows you to modify borders — by changing the thickness, color, or style — similar to how you would do it with normal CSS.

Border Collapse is a CSS property that specifies if individual cell borders can merge with that of their neighbors, or if they can’t. It is used on tables to make the cell borders either combine with others or stand out individually. Tailwind CSS provides you with classes that replicate this behavior. Note that you should apply it to the `<table>` tag.

border-collapse class

Using this class makes the borders of cells merge with themselves, including the border of the table itself. To initiate this effect, apply the class `border-collapse` to the `<table>` tag. In Tailwind CSS, this is already set by default for tables.

<table class="border-collapse">
  ...
</table>
Table with `border-collapse`

border-separate class

For the `border-separate` class, each cell has its borders that do not collide with that of its neighbors. Here, all the borders stand on their own. This is the default Border collapse value when using HTML and CSS, but it is not for Tailwind CSS. Here is an illustration:

<table class="border-separate">
  ...
</table>
Table with `border-separate`

Using Border Spacing in Tailwind Tables

Border Spacing is a CSS property used to set the space between the borders of cells in a table. If you decide to use the `border-separate` class in Tailwind CSS, you might want to set the spacing between the separate borders. For this, Tailwind CSS provides you with a collection of classes.

There are three major ways to apply Border Spacing. They are:

  • General Border Spacing: Here, Tailwind CSS will apply whatever dimension you specify both vertically and horizontally. The format for applying this type of border spacing is `border-spacing-[dimension]`. Here, replace [dimension] with whatever Tailwind CSS spacing value you want (For example `border-spacing-6`).

  • Horizontal Border Spacing: Here, the dimensions only apply horizontally. The format for applying it is `border-spacing-x-[dimension]` (For example `border-spacing-x-4`).

  • Vertical Border Spacing: Here, the dimensions only apply vertically. The format for applying it is `border-spacing-x-[dimension]` (For example `border-spacing-x-3.5`).

Consider the code illustration below:

<table class="border-separate border-spacing-x-2 border-spacing-y-3">
  ...
</table>
Table with set border spaces

How to Style a Tailwind Table Layout

In CSS, the property Table Layout sets a format for arranging the elements in the table. The two formats you can set with this property are `auto` and `fixed`. In Tailwind CSS, the classes `table-auto` and `table-fixed` respectively represent them. This section explains what these classes do and how to use them.

table-auto class

This is the default layout format on most browsers. It is a type of algorithm that makes sure the widths of columns are adjusted to fit their content. Give the `<table>` a class of `table-auto` to use this format. Consider the illustration below:

<table class="table-auto">
  ...
</table>
Table with auto layout

table-fixed class

For this format, the table’s width is split equally into the number of columns it has, regardless of the content length. Also, in this format, you can decide to set the width of a column — which will make the rest of the columns share the remaining space equally. When using this table layout, make sure you set a width for the table to see its effect.

<table class="table-fixed w-full">
  ...
</table>
Tailwind Table with fixed layout

Using Tailwind Table captions

A Table Caption is a body of text that describes the information a table presents. If you want to include a caption in your table, in Tailwind CSS, then create a `<caption>` tag inside your `<table>` element. Here is an illustration of how that works.

<table>
  ...
  <caption>
    Table containing some Nigerian Films
  </caption>
</table>
Table containing some Nigerian Films

From this, you see that Tailwind CSS applies some styling to the caption, but would need more customization if you want it to look better. You can modify the table caption by changing the width, margin, or padding using the usual Tailwind CSS Classes.

However, this section of the article will look at two classes Tailwind CSS provides, that are used specifically with captions. They are `caption-top` and `caption-bottom`.

top caption

To make a caption stay at the top of a table, use `caption-top`. This is the default value for a table caption in Tailwind CSS. While writing the Markup of your caption, you can place it anywhere inside the `<table>` tag. But, Tailwind CSS will be what will determine if it should stay at the top or bottom. Consider the following example:

<table>
  ...
  <caption class="top-caption mb-4">
    Table containing some Nigerian Films
  </caption>
</table>
Illustration showing Table Caption at the top

bottom caption

The second class — `caption-bottom` — places the caption at the bottom. Consider the following example:

 <table>
  ...

  <caption class="bottom-caption mt-4">
    Table containing some Nigerian Films
  </caption>
</table>
Illustration showing Table Caption at the bottom

How do you round the edges of a Table in Tailwind?

To make tables more aesthetically appealing, you might want to round the table’s edges. It turns out that you can’t just give the table a Border Radius and leave it at that. This section of the article will talk about two different ways to round the edges of a Tailwind CSS Table.

Tables without a Caption

To round the edges of a Table without a caption is a little more straightforward. The `<table>` tag just requires a Border Radius and a Hidden Overflow (Set them using their respective Tailwind CSS classes).

The essence of setting `overflow: hidden` is to prevent individual table cells from sticking out of the table’s all-encompassing border.

<table class="rounded-xl overflow-hidden">
  ...
</table>
Table with Rounded Edges

From the illustration above, you can see that the edges of the table are all rounded. You can customize the degree of the roundness using any of the other Border Radius values in Tailwind CSS.

Tables with a Caption

For tables that have captions, the above approach does not work well. This is because the `<caption>` is inside the `<table>` tag — it rests at the top or bottom of the table. The curved edges on either side will apply to the caption and not to all edges of the table.

The way to achieve this effect is to take all the instructions in the above section, in addition to the following:

  1. Give the caption a class of `absolute`. This is the Tailwind class for setting `position: absolute;` in CSS.

  2. Set the width of the caption to be the same as that of the table (If not the caption will not be centered).

  3. Remove any bottom borders in the last row of the tables.

Check out the example below:

<table class="rounded-xl overflow-hidden w-[42rem]">
  <thead>
    <tr>
      <th>Year</th>
      <th>Movie</th>
      <th>Director</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2018</td>
      <td>Lionheart</td>
      <td>Genevieve Nnaji</td>
    </tr>
    <tr>
      <td>2018</td>
      <td>King of Boys</td>
      <td>Kemi Adetiba</td>
    </tr>
    <tr>
      <td>2020</td>
      <td>Citation</td>
      <td>Kunle Afolayan</td>
    </tr>
    <tr>
      <td class="border-b-0">2023</td>
      <td class="border-b-0">The Black Book</td>
      <td class="border-b-0">Editi Effiong</td>
    </tr>
  </tbody>
  <caption class="mt-4 caption-bottom absolute w-[42rem]">
    Table containing some Nigerian Films
  </caption>
</table>
Illustration of Table with caption that has rounded edges

Colors in Tailwind Tables

Remember earlier in the article, that one of the reasons listed why you should use a Table is because of its visual appeal. But one thing that greatly affects the visual appeal of a Table is the colors used. A Table that has a proper color design will be more easily understood than one that does not. Good colors bring out the beauty of a table.

In Tailwind CSS Tables, there are three major ways of applying colors that affect the appearance of the table. They are:

  • Background Color: Using a Background Color class changes the background color of the table, entire rows, and cells. The format for setting the Background Color is `bg-[color]-[shade]`. For example `bg-red-500`, `bg-green-900`, and so on. To learn more check here.

  • Text Color: Similar to Background color, applying a text color class changes the color of text on the table, row, or cell (depending on the element you put the class). The Tailwind Classes that perform this have the format of `text-[color]-[shade]`. For example `text-gray-700`, `text-orange-200`, and so on. Click here to learn more.

  • Border Color: Specifying a color for the borders also helps in the design of a table. The format for border colors is `border-[color]-[shade]`, and it can be applied to the table or cells. Click here to learn more.

Using Hover, Focus, and Other States in a Tailwind Table

CSS provides developers with states such as hover, focus, active, and so on to write styles for. Tailwind CSS does not slack here either. It also provides developers with these states for them to use to better their applications. Here is a list of all possible states Tailwind CSS has.

These states can be used in Tables in just a simple step. Apply them to your HTML elements using the format [state]:[normal class]. Examples of values with this format are `hover:text-red-400`, and so on.

How do you make a Table responsive with Tailwind?

Tailwind CSS also makes it extremely easy to create responsive tables. It does this by employing classes that represent different minimum page widths. These classes are: `sm`, `md`, `lg`, `xl`, and `2xl`. Tailwind CSS is a mobile-first design system, and so using these classes sets constraints on how wide the page needs to be before they are applied.

The format for applying these responsive measures is `[size]:[normal class]. For example, if you wanted to set the background of the Table to green only when the width is less than the `md` constraint, then you would do it this way:

<table class="md:bg-green-400">
 ...
</table>

For more on the topic, check out this video:

Build Beautiful Tables with Tailwind

With that, you should have grasped firmly the fundamentals of building Tables with Tailwind CSS. This article went through several sections such as why you should use a table, how to create a Tailwind Table, using border-collapse and border-spacing, different table layouts, table captions, rounding the edges of a table, Table colors, responsiveness, and a lot more.

As you have seen, you can create tables of whatever kind using the Tailwind CSS classes talked about in the article. Tailwind is also important for other Web components apart from Tables. Tailwind CSS is a tool that whichever developer uses it will benefit immensely from it. Don’t forget to check out Purecode. Good luck with your project.

Related Reading

For further reading on Tailwind CSS, check out the following resources:

Amazing Agu

Amazing Agu