Table problem

[mattmerc]

Hi all,

I have some information I'm trying to format inside <td></td> tags.
Let's use this for example:

<table width="100%">
<tr>
<td>left right</td>
</tr>
</table>

So now I have a row across the screen with the words left and right.
What I want is for "left" to appear on the left side of the cell and
for "right" to appear on the right side of the cell.

The first reaction would be to split into two cells and use
align="left" and align ="right". This does not work because for my site
I am forced to use a company .css stylesheet. The <td> has a blue
background and there is a break in the color if I use two <td> tags. I
really need to do this inside one cell and have 1/2 the text on the
left and 1/2 on the right. Aligning with divs or spans does not work
for some reason.

any help is appreciated. Thanks.

 

[Els]

Hi all,

I have some information I'm trying to format inside <td></td> tags.
Let's use this for example:

<table width="100%">
<tr>
<td>left right</td>
</tr>
</table>

So now I have a row across the screen with the words left and right.
What I want is for "left" to appear on the left side of the cell and
for "right" to appear on the right side of the cell.

The first reaction would be to split into two cells and use
align="left" and align ="right". This does not work because for my site
I am forced to use a company .css stylesheet. The <td> has a blue
background and there is a break in the color if I use two <td> tags. I
really need to do this inside one cell and have 1/2 the text on the
left and 1/2 on the right. Aligning with divs or spans does not work
for some reason.

If you would show the code you used with divs or spans, we would most
likely be able to tell you why they don't work for you.

 

[=?ISO-8859-1?Q?L=FCpher_Cypher?=]

Hi all,

I have some information I'm trying to format inside <td></td> tags.
Let's use this for example:

<table width="100%">
<tr>
<td>left right</td>
</tr>
</table>

So now I have a row across the screen with the words left and right.
What I want is for "left" to appear on the left side of the cell and
for "right" to appear on the right side of the cell.

The first reaction would be to split into two cells and use
align="left" and align ="right". This does not work because for my site
I am forced to use a company .css stylesheet. The <td> has a blue
background and there is a break in the color if I use two <td> tags. I
really need to do this inside one cell and have 1/2 the text on the
left and 1/2 on the right. Aligning with divs or spans does not work
for some reason.

any help is appreciated. Thanks.

<td>
<table style="width:100%; margin:0; padding:0;">
<tr>
<td style="text-align:left;">left</td>
<td style="text-align:right;">right</td>
</table>
</td>

 

[Barbara de Zoete]

<td>
<table style="width:100%; margin:0; padding:0;">
<tr>
<td style="text-align:left;">left</td>
<td style="text-align:right;">right</td>
</table>
</td>

How is it that data that is supposed to go into one table cell, can all of
a sudden be put into two cells without breaking the logic of the table
somehow?


--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

 

[=?ISO-8859-15?Q?L=FCpher_Cypher?=]

How is it that data that is supposed to go into one table cell, can all
of a sudden be put into two cells without breaking the logic of the
table somehow?

Oh, sorry, forgot closing </tr> before </table>.
Answering the question, you can simply put another table into a cell and
span it 100% (of the cell)

 

[Barbara de Zoete]

Answering the question, you can simply put another table into a cell and
span it 100% (of the cell)

Hmm, probably not a clear question

IF your table is like:
.------.-------.-----------.------.
| desc | desc2 | desc3 | etc |
|======|=======|===========|======|
| data | data | data data | data |
|------|-------|-----------|------|
| data | data | data data | data |
`------'-------'-----------'------'

Where 'desc3' relates logically to both cells containing 'data data', how
do you keep this logical connection with the actual _data_ [1]? Just
putting in another datatable doesn't make sense to me, if earlier the data
was supposed to go in to just one data cell.


[1]unless you're trying to use tables for layout purposes, in which case,
I've lost interest

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

 

[=?ISO-8859-15?Q?L=FCpher_Cypher?=]

Answering the question, you can simply put another table into a cell
and span it 100% (of the cell)

Hmm, probably not a clear question

IF your table is like:
.------.-------.-----------.------.
| desc | desc2 | desc3 | etc |
|======|=======|===========|======|
| data | data | data data | data |
|------|-------|-----------|------|
| data | data | data data | data |
`------'-------'-----------'------'

Where 'desc3' relates logically to both cells containing 'data data',
how do you keep this logical connection with the actual _data_ [1]? Just
putting in another datatable doesn't make sense to me, if earlier the
data was supposed to go in to just one data cell.


[1]unless you're trying to use tables for layout purposes, in which
case, I've lost interest

Well, in this case table is used for layout.
If that doesn't do it, I see no other way.. Using span's or div's is
essentially doing the same thing - you are trying to "split" one cell
into two (you are basically replacing td's with span's/div's).

..-------.-----------.-----------------------------------------------.
| desc2 | desc3 | etc |
|=======|====================================================|======|
| data | <table><tr><td>data</td><td>data</td></tr></table> | data |
`-------'----------------------------------------------------'------'

vs.

..-------.-----------.-----------------------------------------------.
| desc2 | desc3 | etc |
|=======|====================================================|======|
| data | <span>data</span><span>data</span> | data |
`-------'----------------------------------------------------'------'

 

[Barbara de Zoete]

Barbara de Zoete wrote:

How is it that data that is supposed to go into one table cell, can
all of a sudden be put into two cells without breaking the logic of
the table somehow?

Where 'desc3' relates logically to both cells containing 'data data',
how do you keep this logical connection with the actual _data_ [1]?
Just putting in another datatable doesn't make sense to me, if earlier
the data was supposed to go in to just one data cell.

Using span's or div's is essentially doing the same thing - you are
trying to "split" one cell into two (you are basically replacing td's
with span's/div's).

Only in looks, appearance, not logically.

.-------.-----------.-----------------------------------------------.
| desc2 | desc3 | etc |
|=======|====================================================|======|
| data | <table><tr><td>data</td><td>data</td></tr></table> | data |
`-------'----------------------------------------------------'------'

vs.

.-------.-----------.-----------------------------------------------.
| desc2 | desc3 | etc |
|=======|====================================================|======|
| data | <span>data</span><span>data</span> | data |
`-------'----------------------------------------------------'------'

No, they are essentially different. Really. In the second table the data
in the spans are logically still in one data cell. In the first example
the data is split up, logically, and put into two seperate data cells.

But you gave me another idea, though I would do things differently. Maybe
helpful for OP though:

<table>
<tr>
<td><span id="left">left</span><span id="right">right</span></td>
</tr>
</table>

table {
width:100%; }

td span {
display: table-cell;
vertical-align: top; /*or where you need it to align*/
width:50%; }

span.left {
text-align: left;
padding-right:4em; } /*or half of any other margin you
want to appear between the two*/

span.right {
text-align:right;
padding-left:4em; }


--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

 

[Barbara de Zoete]

<td><span id="left">left</span><span id="right">right</span></td>
span.left {
span.right {

Grmbl... Either the id's are supposed to be classes or the .. are supposed
to be ## or the example isn't doing anything.


--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

 

[=?ISO-8859-15?Q?L=FCpher_Cypher?=]

On Tue, 03 Jan 2006 18:35:29 +0100, Lüpher Cypher

Barbara de Zoete wrote:

How is it that data that is supposed to go into one table cell, can
all of a sudden be put into two cells without breaking the logic of
the table somehow?
Where 'desc3' relates logically to both cells containing 'data data',
how do you keep this logical connection with the actual _data_ [1]?
Just putting in another datatable doesn't make sense to me, if
earlier the data was supposed to go in to just one data cell.

Using span's or div's is essentially doing the same thing - you are
trying to "split" one cell into two (you are basically replacing td's
with span's/div's).

Only in looks, appearance, not logically.

.-------.-----------.-----------------------------------------------.
| desc2 | desc3 | etc |
|=======|====================================================|======|
| data | <table><tr><td>data</td><td>data</td></tr></table> | data |
`-------'----------------------------------------------------'------'

vs.

.-------.-----------.-----------------------------------------------.
| desc2 | desc3 | etc |
|=======|====================================================|======|
| data | <span>data</span><span>data</span> | data |
`-------'----------------------------------------------------'------'

No, they are essentially different. Really. In the second table the data
in the spans are logically still in one data cell. In the first example
the data is split up, logically, and put into two seperate data cells.

Well, would it really make difference? You simply use the first table
for logic separation of data and the second for layout of data

But you gave me another idea, though I would do things differently.
Maybe helpful for OP though:

<table>
<tr>
<td><span id="left">left</span><span id="right">right</span></td>
</tr>
</table>

table {
width:100%; }

td span {
display: table-cell;
vertical-align: top; /*or where you need it to align*/
width:50%; }

span.left {
text-align: left;
padding-right:4em; } /*or half of any other margin you
want to appear between the two*/

span.right {
text-align:right;
padding-left:4em; }

Hmm.. This does not seem to work. At least in Firefox 1.5

 

[=?ISO-8859-15?Q?L=FCpher_Cypher?=]

Grmbl... Either the id's are supposed to be classes or the .. are
supposed to be ## or the example isn't doing anything.

It's <element>.<class> and <element>#<id>

 

[Barbara de Zoete]

It's <element>.<class> and <element>#<id>

Yeahah, doh. (slaps own forehead; checks hair for colour; brown)

I just made a typo there.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

 

[Barbara de Zoete]

Well, would it really make difference? You simply use the first table
for logic separation of data

I thought one was _not_ supposed to separate the data. The data is in one
data cell and I presume it is there, in one cell, for a reason, and thus
is supposed to logically stay in one data cell. That is why I think you
shouldn't be making two data cells of it (still, if subsiding to table
layout, all of this goes out of the window of course).

and the second for layout of data

See?



--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

 

[=?ISO-8859-15?Q?L=FCpher_Cypher?=]

I thought one was _not_ supposed to separate the data. The data is in
one data cell and I presume it is there, in one cell, for a reason, and
thus is supposed to logically stay in one data cell. That is why I think
you shouldn't be making two data cells of it (still, if subsiding to
table layout, all of this goes out of the window of course).

Well, then, I can argue that, since you need part of that data on the
left and the other part on the right, the original data consists of two
"sub-datas" And hence splitting into two cells

 

[Barbara de Zoete]

Well, then, I can argue that, since you need part of that data on the
left and the other part on the right, the original data consists of two
"sub-datas"

Nice argument.

And hence splitting into two cells

In some odd way you just proved my instincts to be correct on how tables
and layout have nothing to do with each other[1]. Well, sort of. At least
to me you did

Because <more serious now /> you do have a point. If the data in one cell
needs to be seperated so obviously as is proposed in this case, one is
probably dealing with two different sets of data anyway. Than the table
needs an extra column with a column 'lable' and all. Presuming we're not
talking about:

.--------------------.-----------------.
| item | Price |
|====================|=================|
| Book | ¤ 23,00 ea. |
|--------------------|-----------------|
| Good Book | ¤ 42,00 ea. |
|--------------------|-----------------|
| Free advise | Yeah, right |
`--------------------'-----------------'

Where the ¤¤ have to stay on the left and the numbers (and the 'ea.') have
to go to the right. Although, rethinking that, you could argue that the
sign for euro indicates a valuta and therefore could go in its own column
labled 'valuta', and the ea. indicates the amount the price is valid for
and could get a column of its own labled 'per'.
Hmmm, that sounds about right to me. I just seem to have proven your
argument, I think.





[1]unless the layout of the table is there to support visually the logic
that is there between the column- and row lables and de data in the data
cells

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'