Home / HTML / Tables / Borders

HTML Table Borders

What are Table Borders?

Table borders are lines that separate table cells and make the table structure more visible. Borders can be added to the table, rows, and cells using CSS. In HTML5, the border attribute is deprecated, so CSS should be used instead.

Adding Borders with CSS

Borders are added using CSS properties. The most common properties are:

Basic Table Border

Add a border to the table element:

Example
<style>
    table {
        border: 1px solid black;
    }
</style>
<table>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
    <tr>
        <td>Cell 3</td>
        <td>Cell 4</td>
    </tr>
</table>

Cell Borders

Add borders to individual cells (<td> and <th>):

Example
<style>
    table {
        border: 1px solid black;
    }
    td, th {
        border: 1px solid black;
    }
</style>
<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
</table>

Border Collapse

By default, borders on adjacent cells are separate. Use border-collapse: collapse to merge borders:

Example
<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    td, th {
        border: 1px solid black;
        padding: 8px;
    }
</style>
<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Jane</td>
        <td>30</td>
    </tr>
</table>

Border Styles

You can use different border styles:

Example
<style>
    .solid { border: 2px solid black; }
    .dashed { border: 2px dashed black; }
    .dotted { border: 2px dotted black; }
    .double { border: 4px double black; }
    .groove { border: 4px groove #4b3190; }
    .ridge { border: 4px ridge #4b3190; }
</style>
<table style="border-collapse: collapse;">
    <tr>
        <td class="solid">Solid border</td>
        <td class="dashed">Dashed border</td>
    </tr>
    <tr>
        <td class="dotted">Dotted border</td>
        <td class="double">Double border</td>
    </tr>
    <tr>
        <td class="groove">Groove border</td>
        <td class="ridge">Ridge border</td>
    </tr>
</table>

Colored Borders

You can use any color for borders:

Example
<style>
    table {
        border-collapse: collapse;
    }
    td, th {
        border: 2px solid #4b3190;
        padding: 8px;
    }
    th {
        background-color: #4b3190;
        color: white;
        border-color: #fdbb30;
    }
</style>
<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
</table>

Border Widths

You can control the thickness of borders:

Example
<style>
    .thin { border: 1px solid black; }
    .medium { border: 3px solid black; }
    .thick { border: 5px solid black; }
</style>
<table style="border-collapse: collapse;">
    <tr>
        <td class="thin">Thin border (1px)</td>
        <td class="medium">Medium border (3px)</td>
        <td class="thick">Thick border (5px)</td>
    </tr>
</table>

Removing Borders

To remove borders, set border: none or border: 0:

Example
<style>
    table {
        border: none;
    }
    td, th {
        border: none;
        padding: 8px;
    }
</style>
<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
</table>

Deprecated HTML Border Attribute

The HTML border attribute is deprecated in HTML5. Use CSS instead:

Example - Don't Use (Deprecated)
<table border="1"></table>
Example - Modern Way (CSS)
<style>
    table {
        border: 1px solid black;
    }
</style>
<table></table>

Best Practices

← HTML Tables Table Sizes →