Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > HTML > HTML Code Clinic
|
HTML Code Clinic Do you have some HTML code you'd like to share and get suggestions from others for tweaking or improving it? This discussion is the place.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the HTML Code Clinic section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old September 24th, 2003, 02:39 PM
Authorized User
 
Join Date: Jun 2003
Posts: 23
Thanks: 0
Thanked 0 Times in 0 Posts
Default CSS Inheritance and tables

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
 
Old September 24th, 2003, 02:57 PM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

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.
 
Old September 25th, 2003, 07:46 AM
Authorized User
 
Join Date: Jun 2003
Posts: 23
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
 
Old September 25th, 2003, 01:30 PM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

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.
 
Old September 26th, 2003, 12:51 PM
Authorized User
 
Join Date: Jun 2003
Posts: 23
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
 
Old September 30th, 2003, 01:50 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

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.





Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS HELP:! CSS EXPANDIBLE BACKGROUND FOR TITLE phpuser2000 CSS Cascading Style Sheets 2 December 19th, 2007 12:36 AM
Rich's new CSS book: Beginning CSS 2nd Edition jminatel BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 0 June 15th, 2007 11:55 AM
What's better - Web Pages built with Tables or CSS Adam H-W CSS Cascading Style Sheets 1 July 7th, 2006 10:07 AM
Applying CSS to tables andyhague CSS Cascading Style Sheets 4 April 5th, 2006 05:30 AM
Tables vs. layers (CSS question) jacob HTML Code Clinic 6 December 1st, 2003 06:21 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.