space between columns of a table

[brynn]

Hi Friends,

I don't actually know if the solution for this is going to be in the CSS or the HTML, so I apologize if I'm putting this in the wrong board.

I'm trying to find a way to put space between the columns of a table (or horizontal space within or between the cells), without adding space between the rows (or vertical space within or between cells).

For example, I have the table 100% width, 5 columns, 20% each.  But the text goes right to the edge of the cells.  There aren't any borders in this table.  I've been searching through the HTML and CSS areas of w3schools.com.

I found padding, but that puts space around all sides of each cell.  I found padding left and padding right, but it looks like that's only for the paragraph <p>.  I tried putting the contents of each cell in a <p>.  But that adds an extra line space to the cell, and I'm trying to avoid adding vertical space.

I found cell spacing, but again, it adds space around all sides of each cell.

I'm thinking about adding 4 columns between, so for example, I might have 5 columns of 17 or 18%, and a 2 or 3% wide column in between them (which would not have any text, but maybe a couple of nbsp).  But I'm not sure if that's the best idea.

Is there a better way to achieve the extra horizontal space with creating extra vertical spacea?

Thank you very much!

[dsonesuk]

padding does work, to push its content away from the edges

https://www.w3schools.com/code/tryit.asp?filename=FVVXPR7FF6VU

[brynn]

Oh, I didn't see any example where the padding was having 2 values.  I only found examples of padding with one value.

But thank you.  I will use that!

Thanks again!

[ishan_shah]

Hello,
You should use cellspacing attribute of the table element for spacing between two columns of the table. Following is the example code of the same.
 

<table cellspacing="10">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>100</td>
  </tr>
</table>

 

[dsonesuk]

That is wrong.

1) that produces spacing between borders which the op did not want! Wanted padding horizontal only! not vertically.

2) that is html! NOT css

html cellspacing -> css border-spacing:

html cellpadding -> css padding:

Edited August 9, 2019 by dsonesuk