homepage Welcome to WebmasterWorld Guest from 174.129.103.100
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Help request: table cell spacing issue
mattdna




msg:4382710
 5:31 pm on Nov 2, 2011 (gmt 0)

HTML newbie here....

I have a table with 3 horizontal cells, with the cellspacing currently set to 10. see code below.

I want to increase the space between cells 1 and 2 and cells 2 and 3 without increasing the spacing on the other 3 sides of the cell.

So ideally the spacing values for the 1st cell would be: top cell spacing 10, right 20, bottom 10, and left 5. Then same values for cell 2, and finally same values for cell 3 but with the right being 5 (to create the same width in from edge of page).

Can anyone help me with the code for this?

Thanks




<table width="100" cellpadding="10" cellspacing="10">
<tbody>
<tr align="center" valign="bottom">

<td style="border: 1px solid rgb(220, 220, 220);">CONTENT</td>

<td style="border: 1px solid rgb(220, 220, 220);">CONTENT</td>

<td style="border: 1px solid rgb(220, 220, 220);">CONTENT</td>

</tr>

</tbody>
</table>

 

lucy24




msg:4382791
 8:44 pm on Nov 2, 2011 (gmt 0)

Urk. Take a little time off to learn basic CSS. Properties like spacing, padding and borders should never be in the html itself-- especially when they are the same over and over again.

Table cells have two properties that often look alike to the viewer but they're different behind the scenes.

"spacing" is the CSS property border-spacing or border-collapse. It's set globally on the whole table, and can be set separately for horizontal and vertical. This is the space between cells.

"padding" is the CSS property cell-padding. It can be set globally for all cells, or for a named class of cells, or one individual cell. And the four sides in each case can be set individually or all as a group. This is the blank space around the edges of a cell.

The easiest way to see the difference is to set different background-colors on the table and on the cell.

:: shuffling papers ::

[w3.org...]

Scroll down to the various colorful pictures starting about halfway down the page (Forums software is wonky about linking to # fragments).

zabalex




msg:4382853
 11:36 pm on Nov 2, 2011 (gmt 0)

Hi,
Also the tbody is not required now a days as it was being used some years before. If you have to call some style many number of times on a page just write it on a css file and include the css file in the header of the page and just call the class whenever required to use that style. As you have used

style="border: 1px solid rgb(220, 220, 220);" for three times you could better write it on a css file like

.tdborder {border: 1px solid rgb(220, 220, 220);}

and call the class in your td like
<td class"tdborder"> it will serve the same as you have mentioned.

regards
zabalex

lucy24




msg:4382878
 12:38 am on Nov 3, 2011 (gmt 0)

Oh, and let's make that color #DDD, shorthand for #DDDDDD. DD is 221; use "web-safe" colors whenever you can. Uhm, yes, I do have the multiples of 17 up to 255 memorized, along with their hexadecimal equivalents. Why do you ask?

mattdna




msg:4383000
 11:21 am on Nov 3, 2011 (gmt 0)

Lucy / Zabalex - thanks for taking the time to reply - appreciate it.

My site is actually built using CSS, but when I attempted to do tables in CSS, for some reason they wouldn't display properly in Internet Explorer - some of the borders were missing. The table was fine when viewed in Dreamweaver, but not in IE (ok in Chrome too - haven't tried Firefox). So I gave up trying to do in CSS and used the above HTML code - which seems to work fine in all browsers. Is there something I don't know about table compatibility with IE?

Lucy - thanks for the link - I will read that and have any another stab at doing in CSS.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved