CODEWITHSUNDEEP
html
Neha Bange
Neha Bange

Reputation: 51

Why is cellspacing not working in this table?

<table cellspacing="2" cellpadding="2">
<tr>
<td>123
</td>
</tr>
<tr>
<td>345</td>
</tr>
<tr>
<td>456</td>
</tr>
</table>

Here I want to give a space between rows and columns, but this cell spacing is not working. What am I doing wrong?

Upvotes: 5

Views: 21320

Answers (3)

misterManSam
misterManSam

Reputation: 24692

The markup you provided works as intended, creating a 2px gap between cells. This is made obvious when the cells are given a background color.

That said, the cellspacing and cellpadding attributes for the <table> element have been deprecated and should not be used.

To create the same style as cellspacing and cellpadding you can use the CSS properties:

  • padding on the <td>

  • border-spacing on the <table>. The border-collapse property needs to be left as the default separate.

    The border-spacing CSS property specifies the distance between the borders of adjacent cells (only for the separated borders model). This is equivalent to the cellspacing attribute in presentational HTML, but an optional second value can be used to set different horizontal and vertical spacing.

Example

table {
  border-spacing: 20px;
  background: #E91E63;
}
td {
  background: #F00;
  padding: 10px;
  background: #FCE4EC;
}
<table>
  <tr>
    <td>123</td>
  </tr>
  <tr>
    <td>345</td>
  </tr>
  <tr>
    <td>456</td>
  </tr>
</table>

Upvotes: 6

Rustam Gasanov
Rustam Gasanov

Reputation: 15791

You set default value, which is 2, try to increase it and you'll see it is working

Upvotes: 1

Maunet
Maunet

Reputation: 1

use the border-collapse: collapse; CSS rule (which has the same effect: no space between table cells). Note that this may not work in older browsers like IE 5 or 6, so if you need to support them you are out of luck.

< TABLE style="clear: both; border-collapse: collapse; border-spacing: 0; width: 100%;" >

Upvotes: 0

Related Questions