HTML tables allow you to change the padding inside the cells as well as
the distance between them.

Table in HTML – Cell Padding

The area between a cell’s boundaries and its content is known as cell padding.

The padding is set to 0 by default.

Use the CSS padding property to provide table cells padding:

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Table Headers - Align</title>
    <style>
        table, th, td {
            border:1px solid green;
            border-collapse: collapse;
        }
        th, td {
            padding: 20px;
        }
  </style>
</head>
<body>

    <h2>Cellpadding</h2>
    <p>The distance between the content of a cell and its borders is defined by its cell padding.</p>
    <table style="width:100%">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Std</th>
        </tr>
        <tr>
            <td>Joy</td>
            <td>Saikh</td>
            <td>12</td>
        </tr>
        <tr>
            <td>Eva</td>
            <td>Jill</td>
            <td>10</td>
        </tr>
    </table>
</body>

</html>

Cell Padding

Use the padding-top attribute to just add padding above the content.

Additionally, the remaining sides have padding-bottom, padding-left, and
padding-right characteristics:

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HTML Padding & Spacing for Tables</title>
    <style>
        table, th, td {
            border:1px solid green;
            border-collapse: collapse;
        }
        th, td {
            padding-top: 15px;
            padding-bottom: 25px;
            padding-left: 35px;
            padding-right: 45px;
        }
  </style>
</head>
<body>

    <h2>Cellpadding</h2>
    <p>The distance between the content of a cell and its borders is defined by its cell padding.</p>
    <table style="width:100%">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Std</th>
        </tr>
        <tr>
            <td>Joy</td>
            <td>Saikh</td>
            <td>12</td>
        </tr>
        <tr>
            <td>Eva</td>
            <td>Jill</td>
            <td>10</td>
        </tr>
    </table>
</body>

</html>

=============================
MR STAR EDIT

  

Table in HTML – Cell Spacing

The space between each cell is known as cell spacing.

The area’s default setting is 2 pixels.

Use the CSS border-spacing property on the table element to alter the
distance between table cells:

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HTML Padding & Spacing for Tables</title>
    <style>
        table, th, td {
            border:1px solid green;
            border-collapse: collapse;
        }
        table {
            border-spacing: 25px;
        }
  </style>
</head>
<body>

    <h2>Cell Spacing</h2>
    <p>With the border-spacing property, you can modify the distance between cells.</p>
    <table style="width:100%">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Std</th>
        </tr>
        <tr>
            <td>Joy</td>
            <td>Saikh</td>
            <td>12</td>
        </tr>
        <tr>
            <td>Eva</td>
            <td>Jill</td>
            <td>10</td>
        </tr>
    </table>
</body>

</html>

Cell Spacing

—————————————————————————————————————————–
MR STAR CREATOR
Rate this post

Categorized in: