CSS Inheritance and tables

pagates · September 24th, 2003, 02:39 PM

Hi All,

I am a newbie at CSS, and I'm trying to create a table where the first cell of each row is left-aligned, and the rest are center-aligned.

Does anybody have an example of this? I thought there would be a way using inheritance and the relationship of <tr> and <td> elements, but I can't quite get it.

Thanks,
pagates

Imar · September 24th, 2003, 02:57 PM

Hi Pagates,

Try this:

Code:

<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td style="text-align: left">Example</td>
    <td style="text-align: center">Example</td>
    <td style="text-align: center">Example</td>
  </tr>
  <tr>
    <td style="text-align: left">Example</td>
    <td style="text-align: center">Example</td>
    <td style="text-align: center">Example</td>
  </tr>
</table>

This will align the first column to the left, and the others are centered.

Alternatively, you can create a custom class and apply that to the cell:

Code:

<html>
<head>
    <title>Align Example</title>
<style>
.LeftAligned
{
    text-align: left;
}

.Centered
{
    text-align: center;
}
</style>
</head>
<body>
<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="LeftAligned">Example</td>
    <td class="Centered">Example</td>
    <td class="Centered">Example</td>
  </tr>
  <tr>
    <td class="LeftAligned">Example</td>
    <td class="Centered">Example</td>
    <td class="Centered">Example</td>
  </tr>
</table>
</body>
</html>

This makes it easier to apply other style information to each table cell.

You are right that CSS uses inheritance. However, each TD is not a child of another TD, but "a brother or sister", so the inheritance doesn't take place.

Cheers,

Imar

---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

pagates · September 25th, 2003, 07:46 AM

Hi Imar,

Thanks for the reply, but perhaps I wasn't as clear as I could have been. Is realize that the <td> elements are siblings -my question is more are the <td> elements children of the <tr> elements?

I was trying to avoid having to put a class with each <td>, but rather putting it on (what I assumed was a parent) the <tr>.

Thanks,
PAGates

Imar · September 25th, 2003, 01:30 PM

Well, yes. Each td tag inherits from its parent, the tr tag. However, you want each child to behave differently, so you can't define a global definition on the tr tag (There is no such attribute as: apply-this-to-column-one-and-this-to-all-other-columns for the tr tag).

What you could do is define the most common attribute (center in your example) on the tr tag, so all children (each table cell for that row) inherits it. Then just for the first cell in each row, you'll need to override the text-align style:

Code:

<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr style="text-align:center;">
    <td style="text-align:Left;">Example</td>
    <td>Example</td>
    <td>Example</td>
  </tr>
  <tr style="text-align:center;">
    <td style="text-align:Left;">Example</td>
    <td>Example</td>
    <td>Example</td>
  </tr>
</table>

This way, you save yourself some typing / clicking, and the source of your page gets a bit smaller.

Does this help?

Cheers,

Imar

---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

pagates · September 26th, 2003, 12:51 PM

Thanks - that seems to be the way to go.

On a related note, any idea why this would work:
/* Start External CSS */
tr.something
{ font-family: Arial,Geneva,sans-serif; font-size: xx-small;
text-align: center; color: black;
}

td.goleft {text-align: left;}

body.solid
{ background-color: Blue; text-align: center; )

h3.titlebar { text-align: center; }
/* End External CSS */

But not this?
/* Start External CSS */
body.solid
{ background-color: Blue; text-align: center; )

h3.titlebar { text-align: center; }

tr.something
{ font-family: Arial,Geneva,sans-serif; font-size: xx-small;
text-align: center; color: black;
}

td.goleft {text-align: left;}
/* End External CSS */

Thanks,
PAG

Imar · September 30th, 2003, 01:50 AM

Hi,

A bit late reaction, but can you define "does not work"? What's happening to the page? What behavior are you seeing. You may want to post an additional testing HTML page, so it's easier to reproduce the behavior.

Cheers,

Imar

---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.