ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

Set cellpadding and cellspacing in CSS

CSS | cellpadding and cellspacing: Here, we are going to learn how to set cellpadding and cellspacing in CSS?
Submitted by Anjali Singh, on February 07, 2020

Introduction:

It is not unknown anymore that now and then we make use of tables in our web page or website, therefore we all are familiar with how to create tables or grids in our website or web page but there are times when we want to adjust the spacing between the cells of the tables or grids and for that to happen there are some properties that should be taken into consideration. There are mainly two properties that help us achieve this task and those properties are cellpadding and cellspacing.

Trivia:

Before we further move with the properties, let us understand why would we want some spacing and padding between our cells of tables or grids. We often tend to accumulate lots of data into our tables or grids and while doing so, sometimes the tables or grids become too clumsy which in turn gets incomprehensive for users. Therefore, a certain amount of padding and spacing is of utmost importance to segregate the data and by doing so the tables or grids would also appear to be much more neat and comprehensive. It is a good practice to add some spacing or padding whenever we are dealing with a large amount of data. Now let us look at the properties one by one with the help of examples.

Cellpadding

The cellpadding property in CSS is used to define the space between the cells of the table and its border. It takes only one value that is the length of the padding to be applied in pixels. Sounds pretty easy right? All you gotta do is set up the value of length and you can easily add padding between the cells of your tables or grids.

Syntax:

    <table cellpadding = "length">

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        table,
        th,
        td {
            border: 2px solid #f40;
        }
    </style>
</head>

<body>
    <p>Table with cellpadding</p>
    <table cellpadding="10">
        <tr>
            <th>Name</th>
            <th>Course</th>
            <th>Credits</th>
        </tr>
        <tr>
            <td>Anjali</td>
            <td>DBMS</td>
            <td>3</td>
        </tr>
        <tr>
            <td>Nidhi</td>
            <td>Software Eng.</td>
            <td>2</td>
        </tr>
    </table>
</body>

</html>

Output

Set cellpadding and cellspacing in CSS (1)

In the above example, it is very clearly seen that cellpadding property is used to add padding of 10px is applied to the table cells.

Cellspacing

The cellspacing property in CSS is used to define the space between the cells of the table. It takes only one value that is the length of the padding to be applied in pixels. Just like Cellpadding the Cellspacing property is no big deal when it comes to implication, similar to Cellpadding it also takes up length value to add spacing to your cells in the grids or tables.

Syntax:

    <table cellspacing = "length">

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        table,
        th,
        td {
            border: 2px solid #f40;
        }
    </style>
</head>

<body>
    <p>Table with cellspacing</p>
    <table cellspacing="20">
        <tr>
            <th>Name</th>
            <th>Course</th>
            <th>Credits</th>
        </tr>
        <tr>
            <td>Anjali</td>
            <td>DBMS</td>
            <td>3</td>
        </tr>
        <tr>
            <td>Nidhi</td>
            <td>Software Eng.</td>
            <td>2</td>
        </tr>
    </table>
</body>

</html>

Output

Set cellpadding and cellspacing in CSS (2)

In the above example, the cellspacing of 20px is applied to the cells of the table and you can also observe how the cells are evenly spaced throughout the table.

CSS Tutorial & Examples »


ADVERTISEMENT



ADVERTISEMENT



Comments and Discussions

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.