PDA

View Full Version : How to align words in the same table cell?



TGIF
07-30-2006, 02:54 AM
I dont' know too much about CSS. Just wonder how to define style sheet class to align several words on the left and several words on the right in the same table cell?

Another question is: what is the child node of table element?

Thanks a lot!

mburt
07-30-2006, 03:02 AM
Well, unless you use layers, and unless you use two different cells, I don't see how you could do this. But, as usual, I'm probably wrong, because there's probably some different way to do this I'm unaware of. So, don't give up on this yet, but I can't see how it would be done.

TGIF
07-30-2006, 03:06 AM
Thank you for your fast reply!

I didn't expect it was that hard! It's from an interview question.

Do you know the answer for the second question?

Thanks.


Well, unless you use layers, and unless you use two different cells, I don't see how you could do this. But, as usual, I'm probably wrong, because there's probably some different way to do this I'm unaware of. So, don't give up on this yet, but I can't see how it would be done.

mburt
07-30-2006, 03:12 AM
I'm not sure on the other question.

TGIF
07-30-2006, 03:13 AM
Thank you anyway!


I'm not sure on the other question.

Twey
07-30-2006, 03:19 AM
I think the child node of a table element is the TBODY.
The ideal way to do this would be:
<td>
<p style="text-align:left;">Some left-aligned text</p>
<p style="text-align:right;">Some right-aligned text</p>
</td>I don't know if it's valid to have <p>s inside a <td> though. If not, use separate table cells.

mburt: The <layer> element has been obsolete since about Netscape 4 :-\ Nowadays we use <div>, or a more semantically-appropriate block-level element if one is available.

TGIF
07-30-2006, 03:28 AM
Thank you!

I don't know if it is valid to put <p>s in a table cell either. But I tried it just now, the text simply went to seperate line and it didn't work.

This is an interview question and I have to use same table cell to do this! It's really frustrating!


I think the child node of a table element is the TBODY.
The ideal way to do this would be:
<td>
<p style="text-align:left;">Some left-aligned text</p>
<p style="text-align:right;">Some right-aligned text</p>
</td>I don't know if it's valid to have <p>s inside a <td> though. If not, use separate table cells.

mburt: The <layer> element has been obsolete since about Netscape 4 :-\ Nowadays we use <div>, or a more semantically-appropriate block-level element if one is available.

mburt
07-30-2006, 03:29 AM
The <layer> element has been obsolete since about Netscape 4

When I said layer, I meant <div>. I guess I wasn't specific enough :)

mburt
07-30-2006, 03:30 AM
But, I still don't know how you would put it on the same line...

TGIF
07-30-2006, 03:38 AM
It's ok. I may tell them I don't know. Thank you!


But, I still don't know how you would put it on the same line...

jscheuer1
07-30-2006, 04:29 AM
About as simple as it gets:


<table width="650">
<tr>
<td width="100%"><div style="float:left;">Several words some aligned</div><div style="float:right;"> right some aligned left</div></td>
</tr>
</table>

Twey
07-30-2006, 01:32 PM
If <div>s are valid, paragraphs will be too, and more semantically correct.

I didn't realise they had to be on the same line.

TGIF
07-30-2006, 05:01 PM
Thank you so much! It worked perfect!

May I have another question?

What does it mean by the example style definition given below and what are the pros and cons of doing this from dynamic content generation perspective?
#timeLineControls a {
text-decoration: none;
padding: 0px 9px;
}

Thanks a lot!



About as simple as it gets:


<table width="650">
<tr>
<td width="100%"><div style="float:left;">Several words some aligned</div><div style="float:right;"> right some aligned left</div></td>
</tr>
</table>

Twey
07-30-2006, 05:04 PM
It means that a link inside an element with the ID of "timeLineControls" should have no underline, no padding on the top or bottom, and nine pixels of padding on the left and right.

That depends on what your dynamically-generated content is.

TGIF
07-30-2006, 05:14 PM
Thank you!

But what are the pros and cons of doing this from dynamic content generation perspective?

Thanks!


It means that a link inside an element with the ID of "timeLineControls" should have no underline, no padding on the top or bottom, and nine pixels of padding on the left and right.

That depends on what your dynamically-generated content is.

Twey
07-30-2006, 05:44 PM
I repeat:
That depends on what your dynamically-generated content is.The only one that can be applied no matter what the content is that it will scale a lot better; you need only output the style information once, rather than again each time you output a new element. There may be other benefits too, but as I said, more information would be required to accurately highlight them.

TGIF
07-30-2006, 06:05 PM
Thank you so much!


I repeat:The only one that can be applied no matter what the content is that it will scale a lot better; you need only output the style information once, rather than again each time you output a new element. There may be other benefits too, but as I said, more information would be required to accurately highlight them.

jscheuer1
07-30-2006, 06:08 PM
Twey is right, style doesn't really impact dynamic content generation unless that new content falls within the element(s) selected by the style rule(s) in question or is itself selected by them and has some content that would follow the rule(s) for that selector. Even if this did happen and created an undesirable result, the content could be styled dynamically to compensate.

Conversely, if the intent is to get the new content to follow the rule(s), they will, as long as the new content is semantically correct HTML and is selected by the the rule's selector. This is often done intentionally as it will save code and processing time.