☄ EXPOLORE MIND ⚜ Tutorial ? JIQA Biography News
PRV MENU NEXT

Setting Cell Padding and Cell Spacing

22-01-18 Course- HTML5-Simple

If you want to add an extra space between the cell border and cell content in a table, then you can specify the space using cell padding.

In addition to this, if you want to add an extra space between the cell borders in the table then you can specify this space using cell spacing.

In this section, you learn to set the cell padding and cell spacing in a table.

Setting Cell Padding

Cell padding is the amount of space in pixels between the edges of the cell and cell content. You can specify the cell padding with the cellpadding attribute of the <table> tag.

Let’s do the following steps to set the cell padding;


<!DOCTYPE html>
<head>
    <title>Setting the Width of Table Columns</title>
</head>
<body bgcolor=”alicablue”>
<table border=”1” align=”right” width=”95%” bgcolor=”gray” cellpadding=”8”>
<caption>
    <h2>Student Details</h2>
</caption
<tr>
    <th width=”20%”>Name</th>
    <th width=”20%”>Date of Birth</th>
    <th width=”60%”>Address</th>
</tr>
    <tr>
        <td align=”center”>Manish Kumar</td>
        <td> 15-03-1983</td>
        <td align=”center”>Flat No, 303, Shipra Suncity, Ghaziabad</td>
    </tr>
    <tr>
        <td align=”center”>Rajesh Gupta </td>
        <td>22-02-1984</td>
        <td align=”center”> H. No.-32, Rajendra Place, New Delhi</td>
    </tr>
    <tr>
        <td align=”center”>Manisha Dubey </td>
        <td>05-02-1995</td>
        <td align=”center”> H. No.-125, Patel Nagar, New Delhi</td>
    </tr>
</table>
</body>
</html>

Save the document the name of CellPadding.html. Open the document on browser.

Setting Cell Spacing

Cell spacing is the amount of space in pixels between the cell borders. You can specify the cell spacing with the cellspacing attribute of the <table> tag.

Let’s do the following steps to set the cell spacing:


<!DOCTYPE html>
<head>
    <title>Setting the Width of Table Columns</title>
</head>
<body bgcolor=”alicablue”>
<table border=”1” align=”right” width=”95%” bgcolor=”gray” cellpadding=”8” cellspacing=”6”>
<caption>
    <h2>Student Details</h2>
</caption
<tr>
    <th width=”20%”>Name</th>
    <th width=”20%”>Date of Birth</th>
    <th width=”60%”>Address</th>
</tr>
    <tr>
        <td align=”center”>Manish Kumar</td>
        <td> 15-03-1983</td>
        <td align=”center”>Flat No, 303, Shipra Suncity, Ghaziabad</td>
    </tr>
    <tr>
        <td align=”center”>Rajesh Gupta </td>
        <td>22-02-1984</td>
        <td align=”center”> H. No.-32, Rajendra Place, New Delhi</td>
    </tr>
    <tr>
        <td align=”center”>Manisha Dubey </td>
        <td>05-02-1995</td>
        <td align=”center”> H. No.-125, Patel Nagar, New Delhi</td>
    </tr>
</table>
</body>
</html>

Save the document the name of CellSpacing.html. Open the document on browser.

PRV MENU NEXT