SearchSearch   

Setting a style for multiple table cells

  
   Webmaster Forums (Home) -> CSS RSS
Next:  overflow:hidden bug in IE5/Mac?  
Author Message
Adam

External


Since: Aug 11, 2007
Posts: 2



(Msg. 1) Posted: Sat Aug 11, 2007 6:45 pm
Post subject: Setting a style for multiple table cells
Archived from groups: comp>infosystems>www>authoring>stylesheets (more info?)
Is it possible to set a style using a "div" or other element for
multiple table cells instead of placing a "div" in each cell?

For example, can I somehow do this:

<table class="layout" width="80%" border=0>
<tr>
<td colspan=3 height=1><hr style="margin:0; padding:0;" width=100%
height=1></td>
</tr>
<tr>
<div style="font-family: 'trebuchet', sans-serif; font-size:10pt; line-
height:normal; font-style:italic;">
<td width="34%" align=center>accupuncture</td>
<td width="34%" align=center>herbology</td>
<td width="34%" align=center>holistics</td>
</div>
</tr>
<tr>
<td colspan=3 height=1><hr style="margin:0; padding:0;" width=100%
height=1></td>
</tr>
</table>

instead of this:

<table class="layout" width="80%" border=0>
<tr>
<td colspan=3 height=1><hr style="margin:0; padding:0;" width=100%
height=1></td>
</tr>
<tr>
<td style="font-family: 'trebuchet', sans-serif; font-size:10pt; line-
height:normal; font-style:italic;" width="34%"
align=center>accupuncture</td>
<td style="font-family: 'trebuchet', sans-serif; font-size:10pt; line-
height:normal; font-style:italic;" width="34%" align=center>herbology</
td>
<td style="font-family: 'trebuchet', sans-serif; font-size:10pt; line-
height:normal; font-style:italic;" width="34%" align=center>holistics</
td>
</tr>
<tr>
<td colspan=3 height=1><hr style="margin:0; padding:0;" width=100%
height=1></td>
</tr>
</table>
Back to top
Jonathan N. Little

External


Since: Feb 02, 2005
Posts: 2526



(Msg. 2) Posted: Sat Aug 11, 2007 11:16 pm
Post subject: Re: Setting a style for multiple table cells
Archived from groups: per prev. post (more info?)
Adam wrote:
> Is it possible to set a style using a "div" or other element for
> multiple table cells instead of placing a "div" in each cell?
>
> For example, can I somehow do this:
>
> <table class="layout" width="80%" border=0>
> <tr>
> <td colspan=3 height=1><hr style="margin:0; padding:0;" width=100%
> height=1></td>
> </tr>
> <tr>
> <div style="font-family: 'trebuchet', sans-serif; font-size:10pt; line-
> height:normal; font-style:italic;">
> <td width="34%" align=center>accupuncture</td>
> <td width="34%" align=center>herbology</td>
> <td width="34%" align=center>holistics</td>
> </div>
> </tr>
> <tr>
> <td colspan=3 height=1><hr style="margin:0; padding:0;" width=100%
> height=1></td>
> </tr>
> </table>
>

No

Learn about classes...

<td class="special">accupuncture</td>...





--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Back to top
Ben C

External


Since: Sep 30, 2006
Posts: 838



(Msg. 3) Posted: Sun Aug 12, 2007 4:10 am
Post subject: Re: Setting a style for multiple table cells
Archived from groups: per prev. post (more info?)
On 2007-08-12, Adam <swordams.RemoveThis@gmail.com> wrote:
> Is it possible to set a style using a "div" or other element for
> multiple table cells instead of placing a "div" in each cell?
>
> For example, can I somehow do this:
>
><table class="layout" width="80%" border=0>
><tr>
><td colspan=3 height=1><hr style="margin:0; padding:0;" width=100%
> height=1></td>
></tr>
><tr>
><div style="font-family: 'trebuchet', sans-serif; font-size:10pt; line-
> height:normal; font-style:italic;">
><td width="34%" align=center>accupuncture</td>
><td width="34%" align=center>herbology</td>
><td width="34%" align=center>holistics</td>
></div>
></tr>
><tr>
><td colspan=3 height=1><hr style="margin:0; padding:0;" width=100%
> height=1></td>
></tr>
></table>

In the distant past I think you might have used the "col" and "colgroup"
elements to propagate attributes to cells in a column. But even then
there's no "rowgroup" I don't think. Anyway now you can just use a
descendent selector:

<tr class="foo">
<td>...</td>
</tr>

then in the CSS

tr.foo td
{
font-family: Trebuchet, sans-serif;
...
}
Back to top
John Hosking

External


Since: Jan 07, 2007
Posts: 318



(Msg. 4) Posted: Sun Aug 12, 2007 5:12 am
Post subject: Re: Setting a style for multiple table cells
Archived from groups: per prev. post (more info?)
Adam wrote:
> Is it possible to set a style using a "div" or other element for
> multiple table cells instead of placing a "div" in each cell?
>
> For example, can I somehow do this:

> <tr>
> <div...>
> <td ...>accupuncture

No

>
> instead of this:
>
> <table class="layout" width="80%" border=0>
> <tr>
> <td colspan=3 height=1><hr style="margin:0; padding:0;" width=100%
> height=1></td>
> </tr>

Looks like you might be (ab)using the table for layout, in which case
the first row (above) and possibly the third row could be refined away.
One man's <tr><td><hr></td></tr> is another man's border-top. Wink

> <tr>
> <td style="font-family: 'trebuchet', sans-serif; font-size:10pt; line-
> height:normal; font-style:italic;" width="34%"
> align=center>accupuncture</td>
> <td style="font-family: 'trebuchet', sans-serif; font-size:10pt; line-
> height:normal; font-style:italic;" width="34%" align=center>herbology</
> td>
> <td style="font-family: 'trebuchet', sans-serif; font-size:10pt; line-
> height:normal; font-style:italic;" width="34%" align=center>holistics</
> td>
> </tr>
> <tr>
> <td colspan=3 height=1><hr style="margin:0; padding:0;" width=100%
> height=1></td>
> </tr>
> </table>

td { font: 10pt italic 'trebuchet', sans-serif; line-height:normal; }

Note: unles you're printing with this ruleset, try using em or % units
instead of pt.

<tr>
<td width="34%" align=center>accupuncture</td>
<td width="34%" align=center>herbology</td>
<td width="34%" align=center>holistics</td>
</tr>

You see this has nothing to do with divs; it has to do with eradicating
inline styles. Depending on the other content of your table, your other
tables, your other styles and applicable defaults, you could also do
something about the align=center clumpies, too.


--
John
Pondering the value of the UIP: http://blinkynet.net/comp/uip5.html
Back to top
Adam

External


Since: Aug 11, 2007
Posts: 2



(Msg. 5) Posted: Sun Aug 12, 2007 7:09 am
Post subject: Re: Setting a style for multiple table cells
Archived from groups: per prev. post (more info?)
Thank you!
Originally I didn't want to add a class to the stylesheet since this
instance will only be used once per page, but I realize now that this
doesn't make any sense, so I created a class for the <td>
Using a border-top and border-bottom instead of <hr>'s makes perfect
sense; it just never occured to me for some reason. However, even
though my margins and paddings are all set to 0, I still get a 1px gap
in each border between the cells. How can I remedy this?

Thanks,
Adam

On Aug 12, 5:24 am, "Jukka K. Korpela" <jkorp... DeleteThis @cs.tut.fi> wrote:
> Scripsit John Hosking:
>
> > Looks like you might be (ab)using the table for layout,
>
> The class="layout" tells that rather honestly. Smile It's an interesting
> layout that tries to use three columns, each 34%, so that they sum up to
> more 100%.
>
> > td { font: 10pt italic 'trebuchet', sans-serif; line-height:normal; }
>
> > Note: unles you're printing with this ruleset, try using em or % units
> > instead of pt.
>
> For some odd reason, none of the commentators have pointed that the font
> family name 'trebuchet' is wrong. There is no such font in this universe, as
> far as I know. The name is 'Trebuchet MS'. The case of letters might not
> matter, but the second word surely does.
>
> > <tr>
> > <td width="34%" align=center>accupuncture</td>
> > <td width="34%" align=center>herbology</td>
> > <td width="34%" align=center>holistics</td>
> > </tr>
>
> Well, you could also use <tr align="center"> to avoid writing the same
> attribute thrice. Or you might even use CSS!
>
> --
> Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/
Back to top
dorayme

External


Since: Feb 19, 2006
Posts: 3160



(Msg. 6) Posted: Sun Aug 12, 2007 12:04 pm
Post subject: Re: Setting a style for multiple table cells
Archived from groups: per prev. post (more info?)
In article
<1186883106.169797.54870 RemoveThis @i38g2000prf.googlegroups.com>,
Adam <swordams RemoveThis @gmail.com> wrote:

> Is it possible to set a style using a "div" or other element for
> multiple table cells instead of placing a "div" in each cell?

You can set a style on cells, of course:

td {font-family: 'trebuchet', sans-serif;text-align: center; etc}.

And you don't have to use further elements inside the cells. In
your example (that may be better made as a list btw) all you had
was one word things like "holistics". So, just style tds.

You can set a style on elements within a cell. If you know you
will be using them:

td div {font-family: 'trebuchet', sans-serif; etc}.

--
dorayme
Back to top
Jukka K. Korpela

External


Since: Feb 13, 2004
Posts: 3794



(Msg. 7) Posted: Sun Aug 12, 2007 12:04 pm
Post subject: Re: Setting a style for multiple table cells
Archived from groups: per prev. post (more info?)
Scripsit Ben C:

> In the distant past I think you might have used the "col" and
> "colgroup" elements to propagate attributes to cells in a column.

This opens a can of worms, since cells are never descendants of columns and
since HTML and CSS specifications seem to have differing view on such
"propagation". It's safest to assume that if it works, it's just an
accident. But columns can be selected using "advanced" CSS selectors. For
example,
:first-child + td + td { ... }
causes "..." to be applied to cells in the third column. Alas, IE 6 doesn't
support this at all.

> But even then there's no "rowgroup" I don't think.

There is. The <tbody> element is a tool for grouping consecutive <tr>
elements into one element that can be styled separate. Usual CSS Caveats
apply, especially those about missing support in browsers.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
Back to top
Jukka K. Korpela

External


Since: Feb 13, 2004
Posts: 3794



(Msg. 8) Posted: Sun Aug 12, 2007 12:04 pm
Post subject: Re: Setting a style for multiple table cells
Archived from groups: per prev. post (more info?)
Scripsit John Hosking:

> Looks like you might be (ab)using the table for layout,

The class="layout" tells that rather honestly. Smile It's an interesting
layout that tries to use three columns, each 34%, so that they sum up to
more 100%.

> td { font: 10pt italic 'trebuchet', sans-serif; line-height:normal; }
>
> Note: unles you're printing with this ruleset, try using em or % units
> instead of pt.

For some odd reason, none of the commentators have pointed that the font
family name 'trebuchet' is wrong. There is no such font in this universe, as
far as I know. The name is 'Trebuchet MS'. The case of letters might not
matter, but the second word surely does.

> <tr>
> <td width="34%" align=center>accupuncture</td>
> <td width="34%" align=center>herbology</td>
> <td width="34%" align=center>holistics</td>
> </tr>

Well, you could also use <tr align="center"> to avoid writing the same
attribute thrice. Or you might even use CSS!

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
Back to top
Jonathan N. Little

External


Since: Feb 02, 2005
Posts: 2526



(Msg. 9) Posted: Sun Aug 12, 2007 12:04 pm
Post subject: Re: Setting a style for multiple table cells
Archived from groups: per prev. post (more info?)
Jukka K. Korpela wrote:
> Scripsit Ben C:

>> But even then there's no "rowgroup" I don't think.
>
> There is. The <tbody> element is a tool for grouping consecutive <tr>
> elements into one element that can be styled separate. Usual CSS Caveats
> apply, especially those about missing support in browsers.
>

Or one can simply style the 'tr' element.



--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Back to top
Jukka K. Korpela

External


Since: Feb 13, 2004
Posts: 3794



(Msg. 10) Posted: Tue Aug 14, 2007 3:02 am
Post subject: Re: Setting a style for multiple table cells
Archived from groups: per prev. post (more info?)
Scripsit Adam:

> However, even
> though my margins and paddings are all set to 0, I still get a 1px gap
> in each border between the cells. How can I remedy this?

Are you sure it's 1px? The common default is _two_ pixels spacing between
cells (between borders of adjacent cells). You can remove it by setting
cellspacing="0" in the <table> tag. The CSS counterpart to this is
border-spacing: 0 but it doesn't work on IE.

You could set border-collapse: collapse, which works even on IE, but in
addition to removin the spacing between cells, it collapses adjacent borders
into one so that e.g. a 1px border against a 1px border gives a 1px border,
not 2px.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
Back to top
Display posts from previous:   
       Webmaster Forums (Home) -> CSS
Page 1 of 1

 
 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 vote in polls in this forum