Q:

How to set table cellpadding and cellspacing in CSS

mhmadesk
Save to bookmark
|
2022-05-17
|
  678 
Very Easy
0

How to set table cellpadding and cellspacing in CSS

Css programming,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-17
need an explanation for this answer? contact us directly to get an explanation for this answer

Use the CSS padding & border-spacing property

As we know the table's cellpadding and cellspacing attributes are removed in HTML5.

But, you can still set padding inside the table cells easily using the CSS padding property. This is a valid way to produce the same effect as table's cellpadding attribute.

The style rules in the following example will add 10 pixels of padding to the table cells.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Setting Table Cellpadding via CSS</title>
<style>
    table, th, td{
        border: 1px solid #666;
    }
    table th, table td{
        padding: 10px;
    }
</style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Row</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Clark</td>
                <td>Kent</td>
                <td>clarkkent@mail.com</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Peter</td>
                <td>Parker</td>
                <td>peterparker@mail.com</td>
            </tr>
            <tr>
                <td>3</td>
                <td>John</td>
                <td>Rambo</td>
                <td>johnrambo@mail.com</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Similarly, you can use the CSS border-spacing property to apply the spacing between the adjacent table cell borders, like cellspacing attribute. However, in order to work border-spacing the value of the border-collapse property must be separate, which is default.

Let's take a look at the following example to understand how it basically works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Setting Table Cellspacing via CSS</title>
<style>
    table{
        border-collapse: separate;
        border-spacing: 10px; /* Apply cell spacing */
    }
    table, th, td{
        border: 1px solid #666;
    }
    table th, table td{
        padding: 5px; /* Apply cell padding */
    }
</style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Row</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Clark</td>
                <td>Kent</td>
                <td>clarkkent@mail.com</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Peter</td>
                <td>Parker</td>
                <td>peterparker@mail.com</td>
            </tr>
            <tr>
                <td>3</td>
                <td>John</td>
                <td>Rambo</td>
                <td>johnrambo@mail.com</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now