Can cells be css-ed

[dougie]

Rather than specifying each cell to be
50%, is there any way of css-ing it please? So that every <td> will automatically be 50% unless over-ridden.

<TABLE>
<TR>
<TD width="50%">
sample
</TD>
<TD width="50%">
sample
</TD>
</TR>
</TABLE>

[encyclo]

Sure thing - you might want to declare a table class just to be sure:

<TABLE class="dougie">
<TR>
<TD>
sample
</TD>
<TD>
sample
</TD>
</TR>
</TABLE>

And the CSS:

table.dougie td {
width:50%;
}

[dougie]

Many thanks for your input on this, I must admit I'm getting a bit confused on this.

It's for an ordinary family website, where the photos vary in width from 300px to 450px and the photos are alternatively aligned left and right vertically, with the text about the photo next to it with a little gap, (perhaps 5px), but no matter what happens, I can't seem to get the text to go next to the photo ;-(

Because theres many, many pages, I would like to do as much as poss in css.

This is what I've done so far:

<CENTER>
<TABLE>
<TBODY>
<TR>
<TD>
<P class=maintextright>sample text</P>
</TD>
<TD>
<img border="0" src="index.1.jpg" align="right">
</TD>
</TR>
</TBODY>
</TABLE>
</CENTER>

<CENTER>
<TABLE>
<TBODY>
<TR>
<TD>
<img border="0" src="index.2.jpg" align="left">
</TD>
<TD>
<P class=maintextleft>sample text</P></TD>
</TR>
</TBODY>
</TABLE>
</CENTER>

<CENTER>
<TABLE>
<TBODY>
<TR>
<TD>
<P class=maintextright>sample text</P></TD>
<TD>
<img border="0" src="index.3.jpg" align="right"></TD>
</TR>
</TBODY></TABLE></CENTER>

And in the ext stylesheet:

BODY {
FONT-WEIGHT: normal; MARGIN: 22px 12px 18px; COLOR: #000080; LINE-HEIGHT: 250%; FONT-STYLE: normal; FONT-FAMILY: arial, tahoma, verdana, helvetica, sans-serif; BACKGROUND-COLOR: #000080
}
TABLE {
BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; VERTICAL-ALIGN: top; BORDER-LEFT: #ffffff 1px solid; WIDTH: 95%; BORDER-BOTTOM: #ffffff 1px solid; BACKGROUND-COLOR: #ffffff; bordercolor: #ffffff; align: center; cell-padding: 18px
}

.maintextleft {
FONT-WEIGHT: normal; FONT-SIZE: 14px; LINE-HEIGHT: 140%; TEXT-ALIGN: left; padding: 20px;
}
.maintextright {
FONT-WEIGHT: normal; FONT-SIZE: 14px; LINE-HEIGHT: 140%; TEXT-ALIGN: right; padding: 20px;
}

Any help very much appreciated and if I haven't explained it clearly enough,please let me know.

[vkaryl]

I think this is right.... (if it's not, I'm pretty sure someone will come along to say so!)

This is the setup css:

.table { width:60%; margin:auto;}
.td1 { width:30%; text-align:left; padding:1em; border-bottom:1px solid;}
.td2 { width:30%; text-align:right; padding:1em; border-bottom:1px solid;}

This is the alternating cell in table html:

<table class="table">

<tr>
<td class="td1"><h2>Title</h2>

<div>Some sub text<br><br></div>

<div>Some body text pertaining to the photo.</div></td>

<td class="td2"><img src="path to your image" height="200px" width="202px"></td>
</tr>

<tr>

<td class="td1"><img src="path to your image" height="200px" width="202px"></td>

<td class="td2"><h2>Title</h2>

<div>Some sub text<br><br></div>

<div>Some body text pertaining to the photo.</div></td>

</tr>

</table>

Note that this is a setup for a specific site, which needs the padding and the bottom-border line.... Also note that on the specific site, the table is centered through a css <div> (not shown above) because of some wonkiness amongst the various browsers.

[dougie]

Many thanks for that, very much appreciated. The only problem is that because there's many, many pages, doing it that way, I would have to go into the html of each and every cell. At the moment, I can highlight a part of text, then apply either the class to the left or to the right, so that part is ok, but it's obviously going wrong somewhere, any ideas where?

[Saltminer]

dougie,

Use a find and replace function to change the pages.

For images you'd find:
<TD><img

Replace with:
<TD class="td1"><img

For the text find:
<TD><H1

Replace with:
<TD class="td2"><H1

Or something similar, you get the idea.

Jimmy

[Bonusbana]

td { width: 50%; }