CSS Table Problem

[theraggamuffin]

Hey guys,

I have been trying to sort this out for a while now and I can't think of a way to solve this properly so it validates in the w3c validator (this is for coursework you see!).

I am trying to make it so one bit of text appears on the left of the page, and the other on the right, and on the same line. To do this I have created a table and made it so the text align is left and right as appropriate. However, when I put it through the validator it says the <td align="left"> and the <td align="right> should be done in css and not html...

This is the what I have currently for my html table:

<table>
	<tr>
		<td align="left">text for the left</td>					
		<td align="right">text for the right</td>
	</tr>
</table>

I have tried making separate div tags for text align left and right in the css and added it to each td, but w3c didn't like that either...

Any suggestions? I don't mind removing the table if anyone can think of a way to make some text align left and other right, but it has to be on the same line!

Thanks

[chrishirst]

use the css text-align property.

[theraggamuffin]

Said i'd tried it man, how do i make the text align left apply to the first table entry and the text align right apply to the second...

[Phreaddee]

um no you didnt actually.
you used deprecated inline html, big difference.

<p class="right-align">right align</p>
<p class="left-align">left align</p>

.right-align {
float:right;
width:50%;
text-align:right;
}

.left-align {
float:left;
width:50%;
text-align:left;
}

[chrishirst]

And of course if you want to get into CSS a bit more you could use adjacent sibling selectors

CSS Rules

td.textleft {
    text-align: left;
}
td.textleft + td {
    text-align:right;
}

which will make text in a td directly following a td with a classname of textleft be aligned to the right.

<table>
    <tr>
       <td class="textleft">
       This will be left aligned
       </td>
       <td>
       This will be right aligned
       </td>
    </tr>
</table>

[chrishirst]

AND there is :nth-child (even|odd) pseudo selectors to play with, where alternate rows (tr:nth-child) or cells (td:nth-child) could have different rules simply based on where they were in the table structure.

[theraggamuffin]

Originally Posted by theraggamuffin

I have tried making separate div tags for text align left and right in the css and added it to each td, but w3c didn't like that either...

That was meant to mean I tried making div tags in the css with the text align in it but that didn't work!

Thanks a lot for your help guys, i used chrishirst's code and it worked in the validator as well. Cheers