HTML Table: Table cell padding and spacing

This entry is part 15 of 16 in the series HTML Table

Cell padding, cell spacing are 2 different ways we can control how cell content displays on a page.

  • Padding refers to the amount of space between an element’s content and its out edge.
  • Spacing refers to the amount of space between the outside of an element and the adjacent element.

We first look at an example without padding and spacing.

Without Padding and Spacing
<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-HTML Table</title>
    <style>
        table {
            width: 60%;
            border-style: solid;
            border-width: 1px;
        }

        td {
            border-style: solid;
            border-width: 1px;
        }
    </style>
</head>
<body>

<table>
    <tr>
        <th>ID</th>
        <th>artiste</th>
        <th>album</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Rod Stewart</td>
        <td>Maggie May</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Oasis</td>
        <td>Nevermind</td>
    </tr>
</table>

</body>
</html>

To set the padding for the entire table, we use padding: 10px.

To set the cell spacing, we use border-spacing: 10px.  We look at the effects of using padding and spacing in the following example.

With Padding & Spacing
<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-HTML Table</title>
    <style>
        table {
            width: 60%;
            border-style: solid;
            border-width: 1px;
            padding: 5px;
            border-spacing: 10px;
        }

        td {
            border-style: solid;
            border-width: 1px;
        }
    </style>
</head>
<body>

<table>
    <tr>
        <th>ID</th>
        <th>artiste</th>
        <th>album</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Rod Stewart</td>
        <td>Maggie May</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Oasis</td>
        <td>Nevermind</td>
    </tr>
</table>

</body>
</html>

 

Series Navigation<< HTML Table: Table background color
HTML Table: Alignment and cell height >>

Leave a comment

Leave a Reply