Dreamweaver - CSS style for table rows

Author

CSS style for table rows

John Williams

2004-06-11, 7:14 pm

I have a table with 4 rows and 1 column which I use as a menu. The
top row is the menu title and has a different background colour,
colour and font (bold) to the other rows, which are menu items. I
achieve this by applying a 'menuhead' CSS style to the <TD> tag of the
top row and a 'menuitem' style to the <TD> tag of the other rows.

Is there an easier way of doing this using CSS, e.g. a single style
applied to the <TABLE> tag which defines the top row one way and the
other rows another?

Michael Fesser

2004-06-11, 7:14 pm

.oO(John Williams)

>I have a table with 4 rows and 1 column which I use as a menu. The
>top row is the menu title and has a different background colour,
>colour and font (bold) to the other rows, which are menu items. I
>achieve this by applying a 'menuhead' CSS style to the <TD> tag of the
>top row and a 'menuitem' style to the <TD> tag of the other rows.

Not necessary, only one class or ID for the table is required (but you
should consider to not use a table for that, there are better ways, for
example unordered lists).

>Is there an easier way of doing this using CSS, e.g. a single style
>applied to the <TABLE> tag which defines the top row one way and the
>other rows another?

Remove the classes menuhead and menuitem, you don't need them. Replace
the first <td> with <th> and use descendant selectors to style it:

HTML:
<table id="nav">
<tr><th>menu head</th></tr>
<tr><td>menu item 1</td></tr>
<tr><td>menu item 2</td></tr>
....
</table>

CSS:
#nav th {background: ...; color: ...; font-weight: bold}
#nav td {background: ...; color: ...}

That's enough.

Micha

Gary White

2004-06-11, 7:14 pm

On 11 Jun 2004 09:50:01 -0700, johnwilliams_esquire@hotmail.com (John
Williams) wrote:

>I have a table with 4 rows and 1 column which I use as a menu. The
>top row is the menu title and has a different background colour,
>colour and font (bold) to the other rows, which are menu items. I
>achieve this by applying a 'menuhead' CSS style to the <TD> tag of the
>top row and a 'menuitem' style to the <TD> tag of the other rows.
>
>Is there an easier way of doing this using CSS, e.g. a single style
>applied to the <TABLE> tag which defines the top row one way and the
>other rows another?

No, but you could easily define a CSS style for the menu:

..menu th{ style for the header here }
..menu td{ style for the menu items here }

Then use a nested table for the menu and assign class="menu" to the
table.

Gary