HTML Table Border, Padding, and Spacing with CSS

Borders, cell spacing, and padding are appearance choices. HTML describes which cells belong in a table; CSS makes them easier to read. Before writing the code, picture the information as a small grid. Each label should help a reader understand the value next to it.

What You Need to Know

Border-collapse can combine neighboring borders, while padding creates space inside cells. Avoid old presentational HTML attributes when CSS can handle the style.

Read a table like a story about data. The caption says what you are looking at; row and column headers explain what the numbers or words mean.

Example: See It in Action

Try this markup in a fresh practice file. The next section explains the parts worth paying attention to.

If this is only part of a document, place metadata and style elements in the head of a complete HTML page. Keep ordinary visible content in its body.

<style>
    table { border-collapse: collapse; }
    th, td { border: 1px solid #999; padding: 0.5rem; }
</style>
<table>
    <tr>
        <th>Book</th>
        <th>Pages</th>
    </tr>
    <tr>
        <td>Space</td>
        <td>120</td>
    </tr>
</table>

Let’s Understand the Example

• Table represents information whose row and column relationships matter.
• Th is a header cell. Its text explains what nearby data cells mean.
• Td is an ordinary data cell in a table.

Look at a data cell and ask: “What row and column does this value belong to?” The header elements help answer that question, including for people who navigate the table with a screen reader.

What Should You See?

You should see a grid for the data table, with headers such as “Book”, “Pages”. The browser displays cells, but meaningful table markup also helps readers connect each cell to its labels.

Read the first data row aloud together with its column labels. If you cannot explain a value without pointing to its position on screen, strengthen the headers.

Try It Yourself

1. Change the cell padding and border style without editing the table data.
2. Save your changes, open or refresh the page, and compare the result with the original example.
3. Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.

Common Beginner Mistakes

• Adding spaces inside td text to create visual padding.
• Do not replace actual header cells with bold ordinary cells. Header markup is part of the meaning, not just the appearance.

Key Takeaways

• Borders, cell spacing, and padding are appearance choices.
• Table represents information whose row and column relationships matter.
• Border-collapse can combine neighboring borders, while padding creates space inside cells. Avoid old presentational HTML attributes when CSS can handle the style.