Jump to content
brynn

space between columns of a table

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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>


 

Share this post


Link to post
Share on other sites

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 by dsonesuk

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...