WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > CSS Table Problem

Reply
  Thread Tools Display Modes
Old 16th April 12, 06:07 PM   #1
theraggamuffin
WLC Member
 
Join Date: Apr 2012
Posts: 3
Default CSS Table Problem

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:

Code:
<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
theraggamuffin is offline   Reply With Quote
Old 16th April 12, 06:17 PM   #2
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,197
Default Re: CSS Table Problem

use the css text-align property.
chrishirst is offline   Reply With Quote
Old 16th April 12, 06:19 PM   #3
theraggamuffin
WLC Member
 
Join Date: Apr 2012
Posts: 3
Default Re: CSS Table Problem

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...
theraggamuffin is offline   Reply With Quote
Old 16th April 12, 11:49 PM   #4
Phreaddee
WLC Lover
 
Phreaddee's Avatar
 
Join Date: Oct 2010
Location: Newcastle, NSW, Australia
Posts: 733
Default Re: CSS Table Problem

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

HTML Code:
<p class="right-align">right align</p>
<p class="left-align">left align</p>
Code:
.right-align {
float:right;
width:50%;
text-align:right;
}

.left-align {
float:left;
width:50%;
text-align:left;
}
Phreaddee is offline   Reply With Quote
Old 17th April 12, 11:11 AM   #5
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,197
Default Re: CSS Table Problem

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

CSS Rules
Code:
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.


HTML Code:
<table>
    <tr>
       <td class="textleft">
       This will be left aligned
       </td>
       <td>
       This will be right aligned
       </td>
    </tr>
</table>
chrishirst is offline   Reply With Quote
Old 17th April 12, 11:34 AM   #6
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,197
Default Re: CSS Table Problem

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.
chrishirst is offline   Reply With Quote
Old 17th April 12, 11:37 AM   #7
theraggamuffin
WLC Member
 
Join Date: Apr 2012
Posts: 3
Default Re: CSS Table Problem

Quote:
Originally Posted by theraggamuffin View Post
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
theraggamuffin is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 07:30 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.