Prev Next

Table Borders

Borders help delineate the cells in a table, making data easier to read. You can add borders using the border attribute in HTML or, more commonly, through CSS for better styling control.

Key Topics

Using the Border Attribute

Example: The border attribute can give a simple border to your table.

<table border="1">
    <tr>
        <td>Data</td>
        <td>More Data</td>
    </tr>
</table>

Styling Borders with CSS

Example: Using CSS provides more control. The border-collapse property can be used to merge the borders into a single line.

<style>
table {
    border-collapse: collapse;
}
td {
    border: 1px solid #000;
    padding: 5px;
}
</style>

A Table with Borders Example

This example shows a table with CSS-styled borders and padding. A full code example is provided below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bordered Table</title>
    <style>
        table {
            border-collapse: collapse;
        }
        td {
            border: 1px solid #000;
            padding: 5px;
        }
    </style>
</head>
<body>
    <h1>Product Inventory</h1>
    <table>
        <tr>
            <td>Item</td>
            <td>Quantity</td>
        </tr>
        <tr>
            <td>Books</td>
            <td>10</td>
        </tr>
        <tr>
            <td>Pens</td>
            <td>40</td>
        </tr>
    </table>
</body>
</html>

Explanation: The CSS-styled borders make the table data clearer. Padding adds space inside each cell, improving readability.

Key Takeaways

  • The border attribute gives a quick border, but CSS offers greater styling flexibility.
  • Use border-collapse: collapse; to merge borders into a single line.
  • Apply padding for better spacing and readability.
  • Consistent and clearly defined borders improve data interpretation.
  • Always separate presentation (CSS) from structure (HTML) when possible.
Prev Next