Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Using CSS to replace cellpadding,cellspacing,etc

Status
Not open for further replies.
webRAD

webRAD

Programmer
Oct 13, 2002
8
AU
Hi all,
Pls refer to the HTML code written below, I am trying to achieve same appearance using Styles (CSS1 preferably) but not been able to. What I am trying to do is remove everything like border,cellspacing, etc from table tag, so table tag should then look like <Table class=&quot;TheCSSClass&quot;>.

Any help be much appreciated. Thanks in advance.

<html><body>
<TABLE align=center border=&quot;0&quot;><TR><TD>Form Description<BR><BR></TD></TR></TABLE>
<TABLE align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;2&quot; bordercolor=&quot;#000040&quot; bgcolor=&quot;#E0E0E0&quot;><TR bgcolor=&quot;#08298C&quot;><TD><DIV align=&quot;center&quot;><FONT color=&quot;#FFFFFF&quot;><B>Form Heading</B></FONT></DIV></TD></TR><TR bgcolor=&quot;#E0E0E0&quot;><TD width=&quot;&quot;><TABLE align=&quot;center&quot; cellpadding=&quot;5&quot;>
<TR><TD>omWebText4
<br>omWebText5
<br>omWebText6
</TD></TR></TABLE></TD></TR></TABLE>
</Body></Html>
 
Sort by date Sort by votes
There's no way to do it: CSS and tables doesn't like each other so much.
You have to use OR completely tableless, CSS-based layout (which is not an obvious thing in many cases), or use tables with some CSS applied to it's cells:

<style>
.one { padding-top: 10px; backgroung-color: black; color: gold; font: bold 9pt verdana,arial,sans-serif }
.two { padding-left: 15px; padding-right: 5px; backgroung-color: green; color: white }
</style>

. . .

<table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot;>
<tr>
<td class=&quot;one&quot;>1st cell</td>
<td class=&quot;two&quot;>2nd cell</td>
</tr>
</table>

In order to make it more cross-browser, you need to apply the styles to a block element and place all cell contents inside it:
<td><p class=&quot;one&quot;>1st cell</p></td>
It is also recommended to do it this way, because not all CSS properties can be applied to table elements.
 
Upvote 0 Downvote
Thanks for your reply,

I tried the solution, appearance is now better then what I acheived before. But the problem still remains same, for some reasons I cant write cellpadding, cellspacing,or border inside the table tag. I guess this wont be possible to do with CSS. I am not very fond of using table, All I would like to have is same appearance. Is there any way I can do it completely tableless, CSS-based layout that you mentioned.

Pls help I am very new to this CSS stuff.
 
Upvote 0 Downvote
In two words: place different content blocks next to each other to &quot;simulate&quot; table with cell spacing. There's no any general rules here - it depend on your particular case.
But, as I said, it's not an obvious thing to make it cross-browser (the way it should be), especially for a beginner.
Search the web for CSS layout articles and examples.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
743
pmonett
pmonett
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
701
bdwilcox
bdwilcox
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
595
PeDa
PeDa
198709km
  • Locked
  • Question
Grouping XML key value using XSLT
Replies
0
Views
610
198709km
198709km

Part and Inventory Search

Sponsor

Back
Top