Horje
HTML Table Padding and Spacing

HTML Table Padding & Spacing facilitates the inclusion of the padding inside the cells, along with providing the spacing between the cells. It helps to define the layout and appearance of tables.

The Cell Padding is used to define the space between the cell text and the cell border. Cell Spacing is used to define the space between each cell with the help of the CSS border-spacing property.

Table of Content

Cell Padding

Table Cell Padding refers to the space between the content of a table cell and its inner border. It is controlled using the padding property applied to the <td> (table data) or <th> (table header) elements. We have used the CSS padding property.

Note: The browser’s default property for the padding is 0.

Supported Attribute

Example: Illustration of HTML Table Cell Padding using the CSS padding property.

HTML 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>HTML Table Padding and Spacing</title>
    <style>
        table {
            border: 2px solid black;
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            border: 2px solid #7a3f3f;
            padding: 20px;
            text-align: center;
        }

        h1,
        h3 {
            text-align: center;
            color: green;

        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>The HTML table defines the
        space between cells uding CSS
        border-spacing property .
    </h3>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Class</th>
                <th>Roll No</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Mahima</td>
                <td>10</td>
                <td>1</td>
            </tr>
            <tr>
                <td>Ravi</td>
                <td>11</td>
                <td>2</td>
            </tr>
            <tr>
                <td>Krishn</td>
                <td>8</td>
                <td>3</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

Output:

tablespace

Cell Spacing

HTML Table Cell Spacing defines the space between the cells within a table. It includes both horizontal and vertical spacing. We have used the CSS border-spacing property.

Note: The browser’s default property for the Spacing is 2px.

Supported Attibute

Example: Illustration of HTML Table Cell Spacing using the CSS border-spacing property.

HTML 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>HTML Table</title>
    <style>
        table {
            border: 2px solid black;
            border-spacing: 25px;
            width: 100%;
        }

        th,
        td {
            border: 2px solid #7a3f3f;
            padding: 10px;
            text-align: center;
        }

        h1,
        h3 {
            text-align: center;
            color: green;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>The HTML table defines the 
        space between cells uding CSS 
        border-spacing property .
    </h3>

    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Class</th>
                <th>Roll No</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Mahima</td>
                <td>10</td>
                <td>1</td>
            </tr>
            <tr>
                <td>Ravi</td>
                <td>11</td>
                <td>2</td>
            </tr>
            <tr>
                <td>Krishn</td>
                <td>8</td>
                <td>3</td>
            </tr>
        </tbody>
    </table>

</body>

</html>

Output:

cellspacing

HTML Table DOM Property

 


Reffered: https://www.geeksforgeeks.org

HTML

Related
HTML &lt;menu&gt; Tag HTML &lt;menu&gt; Tag
HTML JavaScript HTML JavaScript
HTML Page Title HTML Page Title
HTML &lt;table&gt; Tag HTML &lt;table&gt; Tag
MathML Tutorial MathML Tutorial

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 14



 

Horje