By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,008 Members | 2,963 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,008 IT Pros & Developers. It's quick & easy.

Formating a table

P: n/a
BT
I'm trying to format a three column table and I can't get things to line up
the way I need to. The first column is text of variable length that might
wrap onto multiple lines. It is within <p></p> tags to right/left justify
it. The second column is a column of ditto marks, centered left/right in
the cell and aligned with the bottom line of text of column 1. The third
column is a column of numbers also aligned with the bottom line of text in
column 1, but these numbers need to be right justified.

Here is the code:

<tr>
<td valign="top"><p>Ressaldar Fatteh Khan, Khuttuk, who at
the head of seventy men of the Guides'
Cavalry defeated and drove into
Mooltan a Brigade of Sikh Cavalry,
from a picture by W. Carpenter. By
kind permission of General Sir Peter
Lumsden, G.C.B.</p> </td>
<td valign="bottom" align="center"> &quot; </td>
<td valign="bottom" align="right">24</td>
</tr>
If I remove the <p> tags from the first column, I can get the valign correct
in columns 2 and 3, but I loose the left/right justification I need in
column 1. I tried to add <p> tags to columns 2 & 3, but then I seem to
loose the left/right alignment of column 2 and 3. I tried to change valign
in column 1 to 'top', with no improvement.

Any ideas? thanks, BDT


Sep 4 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
BT
BTW, I'm doing this as Doctype: XHTML 1.0 Strict and I've been checking its
layout in Firefox V 1.0.6 and MS IE 6.

thanks, BDT

"BT" <no@xnono.com> wrote in message
news:o5********************@tornado.texas.rr.com.. .
I'm trying to format a three column table and I can't get things to line
up the way I need to. The first column is text of variable length that
might wrap onto multiple lines. It is within <p></p> tags to right/left
justify it. The second column is a column of ditto marks, centered
left/right in the cell and aligned with the bottom line of text of column
1. The third column is a column of numbers also aligned with the bottom
line of text in column 1, but these numbers need to be right justified.

Here is the code:

<tr>
<td valign="top"><p>Ressaldar Fatteh Khan, Khuttuk, who at
the head of seventy men of the Guides'
Cavalry defeated and drove into
Mooltan a Brigade of Sikh Cavalry,
from a picture by W. Carpenter. By
kind permission of General Sir Peter
Lumsden, G.C.B.</p> </td>
<td valign="bottom" align="center"> &quot; </td>
<td valign="bottom" align="right">24</td>
</tr>
If I remove the <p> tags from the first column, I can get the valign
correct in columns 2 and 3, but I loose the left/right justification I
need in column 1. I tried to add <p> tags to columns 2 & 3, but then I
seem to loose the left/right alignment of column 2 and 3. I tried to
change valign in column 1 to 'top', with no improvement.

Any ideas? thanks, BDT

Sep 4 '05 #2

P: n/a
"BT" <no@xnono.com> wrote:
I'm trying to format a three column table and I can't get things to
line up the way I need to.
Your question would thus appear to relate to CSS rather than HTML.
The first column is text of variable length
that might wrap onto multiple lines. It is within <p></p> tags to
right/left justify it.
Whether you use <p> markup should depend solely on the question whether you
have a _paragraph_ of text.

Besides, <p> markup does not cause any "right/left justify", whatever you
mean by that. You need to explain your problem using common terms, not
invented expressions.

Oh, and please post the URL.
The second column is a column of ditto marks,
No, in your snippet, it contains the Ascii quotation mark.
If I remove the <p> tags from the first column, I can get the valign
correct in columns 2 and 3, but I loose the left/right justification I
need in column 1.


Remove the tags, since you have no paragraph there. Then write suitable
CSS, or if you insist on using deprecated technology, some clumsy HTML
attributes for vertical and horizontal alignment. If problems remain, post
the URL and explain what you regard as undesirable in the appearance.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

Sep 4 '05 #3

P: n/a
BT

"Jukka K. Korpela" <jk******@cs.tut.fi> wrote in message
news:Xn****************************@193.229.0.31.. .
"BT" <no@xnono.com> wrote:
I'm trying to format a three column table and I can't get things to
line up the way I need to.
Your question would thus appear to relate to CSS rather than HTML.


Yes, it could be done with CSS, but since the page will only have one
table there seems to be little or no reason to set it up with CSS. If there
is a good CSS solution, please advise.
The first column is text of variable length
that might wrap onto multiple lines. It is within <p></p> tags to
right/left justify it.
Whether you use <p> markup should depend solely on the question whether
you
have a _paragraph_ of text.


Yes, there is a paragraph of text as the code example shows.

Besides, <p> markup does not cause any "right/left justify", whatever you
mean by that. You need to explain your problem using common terms, not
invented expressions.
Perhaps my terminology confuses you. Before I added the <p> tags, the text
was left justified, probably by default (left justified meaning that the
left side
of each line was even with any line in the same paragraph immediate above
and/or below it) and the right side of the paragraph was ragged with no
alignment.

After I added the <p> tags, both the left and right sides of the paragraph
lined up
smoothly. What is the 'common term' for this paragraph layout?

Oh, and please post the URL.
There is no URL yet. This is a small table in a book of about 8000
lines and will eventually be posted to www.gutenberg.org
The second column is a column of ditto marks,
No, in your snippet, it contains the Ascii quotation mark.


You are correct.
If I remove the <p> tags from the first column, I can get the valign
correct in columns 2 and 3, but I loose the left/right justification I
need in column 1.
Remove the tags, since you have no paragraph there. Then write suitable
CSS, or if you insist on using deprecated technology, some clumsy HTML
attributes for vertical and horizontal alignment. If problems remain, post
the URL and explain what you regard as undesirable in the appearance.


As indicated in my follow-up, 'Doctype: XHTML Strict' so I don't plan
to use any deprecated tags. As a volunteer learning to do this I recognize
that I may end up with some clumsy HTML. I only ask for assistance to
learn and to minimize clumsy HTML.

If there isn't enough info here for you to be able to offer meaningful
assistance, perhaps someone else can.

thank you, BDT

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

Sep 4 '05 #4

P: n/a

BT wrote:
I'm trying to format a three column table and I can't get things to line up
the way I need to ..... Any ideas? thanks, BDT


Check these references:

http://www.w3.org/2002/11/homepage

http://www.w3.org/2002/03/csslayout-howto

http://www.glish.com/css/

--
James Pickering
http://jp29.org/
(CSS 3 column layout)

Sep 4 '05 #5

P: n/a
BT wrote :
I'm trying to format a three column table and I can't get things to line up
the way I need to. The first column is text of variable length that might
wrap onto multiple lines.
Are you using the correct markup for a paragraph then? The best practice
is to render a paragraph is to use a <p> and the best practice to render
tabular data is to use a <table>. Otherwise, your markup code can not
best be rendered, can not best degrade gracefully in several media, user
agents, web-aware applications.

It is within <p></p> tags to right/left justify it. The second column is a column of ditto marks,
Sorry... what's ditto marks?

centered left/right in the cell and aligned with the bottom line of text of column 1. The third
column is a column of numbers also aligned with the bottom line of text in
column 1, but these numbers need to be right justified.

Can you post an url about all this? Are you truly designing for major
blocks of content or for tabular data here... I'm still not sure...
Here is the code:

<tr>
<td valign="top"><p>Ressaldar Fatteh Khan, Khuttuk, who at
the head of seventy men of the Guides'
Cavalry defeated and drove into
Mooltan a Brigade of Sikh Cavalry,
from a picture by W. Carpenter. By
kind permission of General Sir Peter
Lumsden, G.C.B.</p> </td>
<td valign="bottom" align="center"> &quot; </td>
<td valign="bottom" align="right">24</td>
</tr>
Can you describe what your webpage is about, general description...
If I remove the <p> tags from the first column, I can get the valign correct
in columns 2 and 3, but I loose the left/right justification I need in
column 1. I tried to add <p> tags to columns 2 & 3, but then I seem to
loose the left/right alignment of column 2 and 3. I tried to change valign
in column 1 to 'top', with no improvement.

Any ideas? thanks, BDT


Here's a few resources to help you start. I have not checked in details
each of these resources but I'd say they should bring you more values
than problems, in the short term and long run:

Learning HTML and CSS:
- HTML Dog: http://www.htmldog.com/
- CSS Recommendations, best CSS practices and 12 very valuable CSS tips:
http://www.456bereastreet.com/lab/de...standards/css/
- http://tutorials.alsacreations.com/

Learning website design (a bit outdated at places but overall excellent
resources):
Dan's website design tips:
http://webtips.dan.info/

W3C Quality Assurance tips (I highly recommend each tip):
Quality Tips for Webmasters
http://www.w3.org/QA/Tips/

List of CSS templates:
http://www.maxdesign.com.au/presenta...outs/index.cfm

Simple 2 column CSS layout with tutorial on how to create templates:
http://www.456bereastreet.com/lab/de...slayout/2-col/
How to create templates is useful as you learn eventually how to manage,
tweak, tune, upgrade, customize or modify your own webpages based on
such template

3 columns (abs. pos.) scalable and fluid:
http://www.positioniseverything.net/...l.stretch.html

3 columns scalable and fluid (The “I can't believe it's not a table!”
layout):
http://www.positioniseverything.net/threecolbglong.html

Gérard
--
remove blah to email me
Sep 4 '05 #6

P: n/a
"BT" <no@xnono.com> wrote:
Yes, it could be done with CSS, but since the page will only have one
table there seems to be little or no reason to set it up with CSS. If
there is a good CSS solution, please advise.
It's probably easier in CSS than in HTML, even if you need to use class
attributes in many cells. (Still simpler than putting several attributes in
cells.)
Whether you use <p> markup should depend solely on the question
whether you have a _paragraph_ of text.


Yes, there is a paragraph of text as the code example shows.


It's not a paragraph under a normal definition of "paragraph".
Before I added the <p> tags, the
text was left justified, probably by default
Left justified is generally the default in HTML.
After I added the <p> tags, both the left and right sides of the
paragraph lined up
smoothly. What is the 'common term' for this paragraph layout?
That's called justification, and adding the <p> markup did _not_ cause it
unless you have some style sheet that sets properties for p elements.

Justification is seldom justified on the Web, since browsers do it so
poorly and since it reduces legibility.

So why did you add the <p> tags?
Oh, and please post the URL.


There is no URL yet.


Then create one and post it. Even if it's just your current best effort.
After all, it's a matter of simple upload.
As indicated in my follow-up, 'Doctype: XHTML Strict' so I don't plan
to use any deprecated tags.


Why do you plan to use XHTML? Do you realize that IE does not grok XHTML?

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

Sep 4 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.