pure-css
  1. pure-css-bordered-table
PreviousNext

Pure CSS Bordered Tables

Pure CSS provides a simple and easy way to add borders and styling to tables without the need for cumbersome HTML structures or JavaScript plugins.

Use

Pure CSS bordered tables are useful for presenting data in a clean and organized way. They can be used for a variety of purposes, such as displaying pricing information, product details, or financial data.

Advantage

The main advantage of Pure CSS bordered tables is that they are lightweight and easy to implement. They can be styled to match the design of your website or application, making them a great option for creating a consistent look and feel across all of your pages.

Example

Here is an example of using Pure CSS to create a simple bordered table.

<table class="pure-table pure-table-bordered">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Smith</td>
            <td>32</td>
            <td>john.smith@example.com</td>
        </tr>
        <tr>
            <td>Jane Doe</td>
            <td>27</td>
            <td>jane.doe@example.com</td>
        </tr>
        <tr>
            <td>Mike Johnson</td>
            <td>45</td>
            <td>mike.johnson@example.com</td>
        </tr>
    </tbody>
</table>
Try Playground

In this example, we use the pure-table and pure-table-bordered classes to apply styling to the table element. We also use the thead and tbody elements to structure the table and add the appropriate table headers.

Summary

Pure CSS bordered tables are a simple and effective way to present data in a clear and organized manner. They are lightweight and easy to implement, and can be styled to fit the design of your website or application. Consider using them for your next table-based project!

TablesStripped Tables
Published on: