Prev Next

CSS Table Borders

Borders help define the structure of a table, making it clearer which cells belong together. You can style borders around the entire table, individual cells, or specific rows. Adjusting border thickness, style, and color improves the table’s readability.

Key Topics

Basic Table Border

border: 1px solid #000; applied to table, th, and td outlines cells. Use border-collapse: collapse; to merge borders for a cleaner look.

<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    th, td {
        border: 1px solid #000;
        padding: 8px;
        text-align: left;
    }
</style>
<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>

Explanation: Borders help visually separate cells, improving data comprehension. Collapsing borders creates a streamlined look.

Border Collapse vs. Separate

border-collapse: collapse; merges adjacent cell borders, while border-collapse: separate; keeps them distinct. Choose based on desired aesthetics.

Key Takeaways

  • Clarity: Borders make tables easier to read.
  • Control: Adjust thickness, style, and color for a tailored design.
  • Collapse vs. Separate: Experiment to find the look you prefer.
Prev Next