PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Tue Dec 18, 2018 7:15 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 5 posts ] 
Author Message
PostPosted: Mon Apr 22, 2002 7:46 am 
Offline
Forum Contributor

Joined: Thu Apr 18, 2002 5:33 pm
Posts: 116
Lately, I have been thinking about table border spacing with CSS. More specifically, I have been thinking about automatic table border spacing using "border-collapse: separate". When using "border-collapse: separate", Internet Explorer 6 automatically creates space between the cells in a table. From what I have read, "border-spacing" should allow one to specify the amount of space between the cells (for example, "border-spacing: 10px"), but I have not had any luck with it whether or not borders are actually specified for the cells. Am I doing something wrong here?

Syntax: [ Download ] [ Hide ]
<!--

The table's background color shows through the spacing around the cells it contains.

The foreground color is irrelevant, but it is there to keep the World Wide Web Consortium'
s HTML validator from issuing a warning.  :)

-->

<TABLE STYLE="width: 100%; border-collapse: separate; border-spacing: 1px; background-color: #999; color: inherit">

  <TR>
    <TH STYLE="width: 25%; padding: 3px; background-color: #666; color: #fc6; font-weight: bold">Weapon</TH>
    <TH STYLE="width: 25%; padding: 3px; background-color: #666; color: #fc6; font-weight: bold">Typical Damage</TH>
    <TH STYLE="width: 25%; padding: 3px; background-color: #666; color: #fc6; font-weight: bold">Kill Chance</TH>
    <TH STYLE="width: 25%; padding: 3px; background-color: #666; color: #fc6; font-weight: bold">Special Properties</TH>
  </TR>

  <TR>
    <TD STYLE="width: 25%; padding: 3px; background-color: #ccc; color: #000">Fist</TD>
    <TD STYLE="width: 25%; padding: 3px; background-color: #ccc; color: #000">1-20 × Player Level</TD>
   <TD STYLE="width: 25%; padding: 3px; background-color: #ccc; color: #000">None</TD>
    <TD STYLE="width: 25%; padding: 3px; background-color: #ccc; color: #000">None</TD>
  </TR>

  <TR>
    <TD STYLE="width: 25%; padding: 3px; background-color: #ccc; color: #000">Knife</TD>
    <TD STYLE="width: 25%; padding: 3px; background-color: #ccc; color: #000">5-35 × Player Level</TD>
   <TD STYLE="width: 25%; padding: 3px; background-color: #ccc; color: #000">70% (Throat Only)</TD>
    <TD STYLE="width: 25%; padding: 3px; background-color: #ccc; color: #000">None</TD>
  </TR>

  <TR>
    <TD STYLE="width: 25%; padding: 3px; background-color: #ccc; color: #000">Sword</TD>
    <TD STYLE="width: 25%; padding: 3px; background-color: #ccc; color: #000">20-100 × Player Level</TD>
   <TD STYLE="width: 25%; padding: 3px; background-color: #ccc; color: #000">50% + Area Modifier</TD>
    <TD STYLE="width: 25%; padding: 3px; background-color: #ccc; color: #000">Fear (Non-Swordsmen)</TD>
  </TR>

  <TR>
    <TD STYLE="width: 25%; padding: 3px; background-color: #ccc; color: #000">Curry of Fury (Thai Hot)</TD>
    <TD STYLE="width: 25%; padding: 3px; background-color: #ccc; color: #000">1 (NOT × Player Level!)</TD>
   <TD STYLE="width: 25%; padding: 3px; background-color: #ccc; color: #000">1%</TD>
    <TD STYLE="width: 25%; padding: 3px; background-color: #ccc; color: #000">Confusion; Laughter</TD>
  </TR>

</TABLE>


By the way, I have not yet tried this in Netscape 6 or Opera because I have not yet installed them on my notebook, which is now serving as my main computer. I suppose I could do so now, but it is time to get up and get ready for school in fifteen minutes. Darn... I really should have gone to sleep at some point! 8O


Top
 Profile  
 
 Post subject:
PostPosted: Tue Apr 23, 2002 6:38 pm 
Offline
Moderator
User avatar

Joined: Tue Apr 23, 2002 6:00 pm
Posts: 531
Location: Lowell, MA USA
thats correct. the way IE6 handles the argument is not correct though. in fact i believe IE is dumb to this directive. depending on what effect you are looking for, you could try the margin and/or padding directives.


Top
 Profile  
 
 Post subject:
PostPosted: Sat May 18, 2002 9:52 am 
Offline
Forum Contributor

Joined: Thu May 02, 2002 11:51 am
Posts: 101
Location: New Mexico, USA
To get this effect I nest tables within tables and use the attribute cellspacing = "x" within the table tag. It works cross browser, IE,NN, & Opera all recognize the cellspacing attribute.


Top
 Profile  
 
 Post subject:
PostPosted: Sat May 18, 2002 9:39 pm 
Offline
Forum Contributor

Joined: Tue Apr 23, 2002 6:45 pm
Posts: 188
Location: Netherlands
Yup cellspacing is grand.. though there is a downside... You can use the table bgcolor in IE to show the cellspacing as a subtle border, but NN disregards the table bgcolor.

Thus you get a different look for both browsers, if you set the table bgcolor. Ehm... but I do it anyway ;)


Top
 Profile  
 
 Post subject:
PostPosted: Mon Jun 03, 2002 2:06 pm 
Offline
Forum Newbie

Joined: Sun Jun 02, 2002 9:33 am
Posts: 15
Location: BG
IE6 differs with the way it handels width & heights (spacing is related to width of left & right laying elements :wink: ) from earlier versions of IE. So You can be shure of that if You look at your page in IE5 it will be 'quite'different. :x

Evternal life to MS


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 5 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 4 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group