ADVERTISEMENTS

How to remove cellspacing from HTML tables using CSS

We can remove cellspacing with css property border-collapse. It is used to specify whether or not the borders of a table should be collapsed into a single border or be separated. We can set two possible values:

  • collapse : This value causes the borders of the table cells to be collapsed into a single border, effectively removing any space between cells. This is the default value for border-collapse in most web browsers.
  • separate : This value causes the borders of the table cells to be separated, resulting in the typical table layout with distinct borders around each cell.

The following example will explain about cellspacing removal from HTML table element. You can easily copy it and use with your own code.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Remove Cellspacing from HTML Tables in CSS</title>
<style>
    table, th, td{
        border: 1px solid #666;
    }
    table{
        border-collapse: collapse;
    }
</style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Row</th>
                <th>First</th>
                <th>Second</th>
                <th>Third</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Kelvin</td>
                <td>Landlord</td>
                <td>XYZ</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Peter</td>
                <td>Parker</td>
                <td>ABC</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Rambo</td>
                <td>Smith</td>
                <td>DEF</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

 

Supported Browsers:
  • Internet Explorer
  • Mozilla Firefox
  • Google Chrome
  • Opera
  • Safari

CSS is a styling language used to control the presentation of HTML webpages. You can learn CSS from our CSS Tutorials and CSS Examples

ADVERTISEMENTS