Basic Bordered Table Template

Add instant structure and clarity to your data with this clean, classic bordered table.

This is the logical next step from an unstyled table. Simple borders are applied to all cells, clearly defining rows and columns for effortless reading.

Screenshot of an HTML table with simple grey borders around all cells and headers.

Get Source Code → Preview →

About this Bordered Table

The bordered table is a timeless design for presenting tabular information. By adding clean, thin lines around every cell, it visually organizes the content into a clear grid. This template uses minimal CSS to achieve this effect, making it lightweight and highly customizable. It serves as a robust and professional-looking foundation for a wide variety of applications.

Key Features:

Clear Separation: Borders provide strong visual cues that separate individual data points, improving readability.
Clean & Professional Look: A simple bordered grid gives the data an organized and polished appearance.
Lightweight CSS: Achieved with just a few lines of straightforward CSS.
Fully Semantic: Built upon a proper, accessible HTML table structure.

Ideal Use Cases:

Displaying administrative data in a back-end panel.
Simple reports or data exports.
Product information or technical specs.
Any situation requiring a no-frills, clearly structured data grid.

Dependencies:

None. This template uses only pure HTML and CSS.

Accessibility Notes:

While borders primarily assist sighted users, the underlying structure is built for accessibility. It uses a semantic thead and scoped headers (th), which allows screen readers to correctly announce the row and column context for each cell.

Code

Here's the full code for the basic bordered table template:

.table-bordered thead {
    /* A subtle background color for the header */
    background-color: #f2f2f2; 
}

.table-bordered th,
.table-bordered td {
    /* The border around each cell */
    border: 1px solid #dddddd; 
    text-align: left;
    padding: 8px; /* Standard padding */
}

</style>

<table class="table-bordered">
    <thead>
        <tr>
            <th scope="col">Invoice #</th>
            <th scope="col">Client Name</th>
            <th scope="col">Issue Date</th>
            <th scope="col">Amount</th>
            <th scope="col">Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>INV-2024-001</td>
            <td>Globex Corporation</td>
            <td>2024-05-15</td>
            <td>$1,250.00</td>
            <td>Paid</td>
        </tr>
        <tr>
            <td>INV-2024-002</td>
            <td>Stark Industries</td>
            <td>2024-05-18</td>
            <td>$3,500.75</td>
            <td>Paid</td>
        </tr>
        <tr>
            <td>INV-2024-003</td>
            <td>Wayne Enterprises</td>
            <td>2024-05-20</td>
            <td>$800.00</td>
            <td>Pending</td>
        </tr>
        <tr>
            <td>INV-2024-004</td>
            <td>Cyberdyne Systems</td>
            <td>2024-05-21</td>
            <td>$5,200.50</td>
            <td>Overdue</td>
        </tr>
    </tbody>
</table>

View Output