Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
Table cells
16 views
Skip to first unread message
emf
May 12, 2013, 10:54:57 PM5/12/13
to
In table 1 below, I tried to use td { width: } to set the width of cells
so that in the first row the first cell will be 5em, the 2nd, 3rd, and
4th 10em, and the 5th 5em, while in the second row there will be 4 cells
of 10em, and I realized that it doesn't work: obviously the interpreter
gives priority to aligning columns than to the width property.
In table 2 I solved the problem by including ruler row with 8 5em cells,
using colspan="2" to designate the 10em cells, and making the ruler row
almost invisible - just a slight increase in the padding.
In table 3 I used 2 different tables and using border-collapse: collapse
to make them appear as 1 table, and in table 4 I put these tables inside
the cells of the 2 rows of a single table.
Of these solutions I tend to prefer 2 and 3. Unless there is a way to
make the first work.
I've been testing on FF, but also had a look at IE, that seems to have
some problem with representing solid borders - not to mention the
positioning of the table descriptions...
Any thoughts?
Here is the code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table</title>
<style type="text/css">
body {
background-color: black;
color:white;
}
table {
width: 40em;
margin: auto;
border: 2px solid white;
}
td {
border: 1px solid yellow;
text-align: center;
}
table td.hlf { width: 5em; }
table td.qrt { width: 10em; }
/* for table 2 */
tr#rlr td {
width: 5em;
border: 0;
padding: 0;
}
/* for table 3 */
table.t2 { border-collapse: collapse; }
.up { border-bottom: 0; }
.dn { border-top: 0; }
</style>
</head>
<body>
Table 1: specified cell widths
<table class="t1">
<tr>
<td class="hlf">5</td>
<td class="qrt">10</td>
<td class="qrt">10</td>
<td class="qrt">10</td>
<td class="hlf">5</td>
</tr>
<tr>
<td class="qrt">10</td>
<td class="qrt">10</td>
<td class="qrt">10</td>
<td class="qrt">10</td>
</tr>
<table>
Table 2: the ruler solution
<table class="t1">
<tr>
<td>1</td>
<td colspan="2">2</td>
<td colspan="2">2</td>
<td colspan="2">2</td>
<td>1</td>
</tr>
<tr>
<td colspan="2">2</td>
<td colspan="2">2</td>
<td colspan="2">2</td>
<td colspan="2">2</td>
</tr>
<tr
id="rlr"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<table>
Table 3: 2 tables collapsed to appear as 1
<table class="t2 up">
<tr>
<td class="hlf">5</td>
<td class="qrt">10</td>
<td class="qrt">10</td>
<td class="qrt">10</td>
<td class="hlf">5</td>
</tr>
</table>
<table class="t2 dn">
<tr>
<td class="qrt">10</td>
<td class="qrt">10</td>
<td class="qrt">10</td>
<td class="qrt">10</td>
</tr>
</table>
Table 4: 2 tables inside 1 table
<table class="t2">
<tr>
<td>
<table">
<tr>
<td class="hlf">5</td>
<td class="qrt">10</td>
<td class="qrt">10</td>
<td class="qrt">10</td>
<td class="hlf">5</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td class="qrt">10</td>
<td class="qrt">10</td>
<td class="qrt">10</td>
<td class="qrt">10</td>
</tr>
<table>
</td>
</tr>
</table>
</body>
</html>
--
It ain't THAT, babe! - A radical reinterpretation
https://files.nyu.edu/emf202/public/bd/itaintmebabe.html
so that in the first row the first cell will be 5em, the 2nd, 3rd, and
4th 10em, and the 5th 5em, while in the second row there will be 4 cells
of 10em, and I realized that it doesn't work: obviously the interpreter
gives priority to aligning columns than to the width property.
In table 2 I solved the problem by including ruler row with 8 5em cells,
using colspan="2" to designate the 10em cells, and making the ruler row
almost invisible - just a slight increase in the padding.
In table 3 I used 2 different tables and using border-collapse: collapse
to make them appear as 1 table, and in table 4 I put these tables inside
the cells of the 2 rows of a single table.
Of these solutions I tend to prefer 2 and 3. Unless there is a way to
make the first work.
I've been testing on FF, but also had a look at IE, that seems to have
some problem with representing solid borders - not to mention the
positioning of the table descriptions...
Any thoughts?
Here is the code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table</title>
<style type="text/css">
body {
background-color: black;
color:white;
}
table {
width: 40em;
margin: auto;
border: 2px solid white;
}
td {
border: 1px solid yellow;
text-align: center;
}
table td.hlf { width: 5em; }
table td.qrt { width: 10em; }
/* for table 2 */
tr#rlr td {
width: 5em;
border: 0;
padding: 0;
}
/* for table 3 */
table.t2 { border-collapse: collapse; }
.up { border-bottom: 0; }
.dn { border-top: 0; }
</style>
</head>
<body>
Table 1: specified cell widths
<table class="t1">
<tr>
<td class="hlf">5</td>
<td class="qrt">10</td>
<td class="qrt">10</td>
<td class="qrt">10</td>
<td class="hlf">5</td>
</tr>
<tr>
<td class="qrt">10</td>
<td class="qrt">10</td>
<td class="qrt">10</td>
<td class="qrt">10</td>
</tr>
<table>
Table 2: the ruler solution
<table class="t1">
<tr>
<td>1</td>
<td colspan="2">2</td>
<td colspan="2">2</td>
<td colspan="2">2</td>
<td>1</td>
</tr>
<tr>
<td colspan="2">2</td>
<td colspan="2">2</td>
<td colspan="2">2</td>
<td colspan="2">2</td>
</tr>
<tr
id="rlr"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<table>
Table 3: 2 tables collapsed to appear as 1
<table class="t2 up">
<tr>
<td class="hlf">5</td>
<td class="qrt">10</td>
<td class="qrt">10</td>
<td class="qrt">10</td>
<td class="hlf">5</td>
</tr>
</table>
<table class="t2 dn">
<tr>
<td class="qrt">10</td>
<td class="qrt">10</td>
<td class="qrt">10</td>
<td class="qrt">10</td>
</tr>
</table>
Table 4: 2 tables inside 1 table
<table class="t2">
<tr>
<td>
<table">
<tr>
<td class="hlf">5</td>
<td class="qrt">10</td>
<td class="qrt">10</td>
<td class="qrt">10</td>
<td class="hlf">5</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td class="qrt">10</td>
<td class="qrt">10</td>
<td class="qrt">10</td>
<td class="qrt">10</td>
</tr>
<table>
</td>
</tr>
</table>
</body>
</html>
--
It ain't THAT, babe! - A radical reinterpretation
https://files.nyu.edu/emf202/public/bd/itaintmebabe.html
Jukka K. Korpela
May 13, 2013, 1:14:17 AM5/13/13
to
2013-05-13 5:54, emf wrote:
> In table 1 below, I tried to use td { width: } to set the width of cells
> so that in the first row the first cell will be 5em, the 2nd, 3rd, and
> 4th 10em, and the 5th 5em, while in the second row there will be 4 cells
> of 10em, and I realized that it doesn't work
Your HTML code has serious markup errors, even <table> elements that
> In table 1 below, I tried to use td { width: } to set the width of cells
> so that in the first row the first cell will be 5em, the 2nd, 3rd, and
> 4th 10em, and the 5th 5em, while in the second row there will be 4 cells
> of 10em, and I realized that it doesn't work
have not been closed properly with </table> - using <table> instead of
</table>! There are too many problems to discuss, and they are not
relevant to the topic, so I will just say: Use the Validator, Luke! But
beware of the dark side - HTML5 validators http://validator.nu are
experimental software that checks against some mutable definition. (But
they do find table structure errors better than classic HTML validators.)
What you want is a grid, and it is unclear whether you really have
tabular data, but I have returned my Purist's hat and don't object to
using "layout tables" any more when they serve a useful purpose in a
reasonable way (many layout tables don't). For grid layout, there are
several CSS approaches, including the Grid Layout module, but it has a
sad and messy history, so it will probably not be generally useful for
many years.
To create a grid described above, you really need eight columns, and it
is best to set the widths to the columns, not cells. You would make the
columns 5em wide and just have most of your cells span two columns:
<!DOCTYPE HTML>
<meta charset=utf-8>
<title>table</title>
<style type="text/css">
td { border: solid 1px; }
<style type="text/css">
col { width: 5em; }
</style>
</head>
<body>
<table>
<col><col><col><col><col><col><col><col>
<tr>
<td>5</td>
<td colspan=2>10</td>
<td colspan=2>10</td>
<td colspan=2>10</td>
<td>5</td>
</tr>
<tr>
<td colspan=2>10</td>
<td colspan=2>10</td>
<td colspan=2>10</td>
<td colspan=2>10</td>
</tr>
</table>
However, this won't really enforce a fixed grid. If your cell contains
"supercalifragilisticexpialidocious", a column will get wider than
declared, and even table { table-layout: fixed; } won't help. To get a
fixed grid, you will need to make sure that no cell contains anything
that requires more width than allowed by the column widths. This may
mean that you need to introduce hyphenation of long words some how and
to avoid long nonbreakable strings; do not use the popular word-break:
break-word unless forced to - it lit erally brea ks thing s up.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
Osmo Saarikumpu
May 13, 2013, 4:51:16 AM5/13/13
to
On 13.5.2013 8:14, Jukka K. Korpela wrote:
> However, this won't really enforce a fixed grid. If your cell contains
> "supercalifragilisticexpialidocious", a column will get wider than
> declared, and even table { table-layout: fixed; } won't help.
It seems that instructing the browser to use the fixed table layout
> However, this won't really enforce a fixed grid. If your cell contains
> "supercalifragilisticexpialidocious", a column will get wider than
> declared, and even table { table-layout: fixed; } won't help.
algorithm while only setting the width of the columns is not sufficient
to enforce a fixed grid. Probably not very useful in practice, but
adding a width to the table itself, e.g.:
table {
table-layout:fixed;
width:40em;
}
seems to enforce the fixed table layout algorithm, at least with the
four browsers I have at the moment (IE8 being the oldest).
--
Best wishes, Osmo
tlvp
May 13, 2013, 12:52:36 PM5/13/13
to
On Sun, 12 May 2013 22:54:57 -0400, emf wrote:
> In table 1 below, I tried to use td { width: } to set the width of cells
> so that in the first row the first cell will be 5em, the 2nd, 3rd, and
> 4th 10em, and the 5th 5em, while in the second row there will be 4 cells
> of 10em, and I realized that it doesn't work: obviously the interpreter
> gives priority to aligning columns than to the width property.
>
> In table 2 I solved the problem by including ruler row with 8 5em cells,
> using colspan="2" to designate the 10em cells, and making the ruler row
> almost invisible - just a slight increase in the padding. ...
> In table 1 below, I tried to use td { width: } to set the width of cells
> so that in the first row the first cell will be 5em, the 2nd, 3rd, and
> 4th 10em, and the 5th 5em, while in the second row there will be 4 cells
> of 10em, and I realized that it doesn't work: obviously the interpreter
> gives priority to aligning columns than to the width property.
>
> In table 2 I solved the problem by including ruler row with 8 5em cells,
> using colspan="2" to designate the 10em cells, and making the ruler row
To reinforce the good advice Jukka and Osmo offer, let me just emphasize
the lesson you've already learned, namely: (i) that lower rows of a table
insist on their cells' widths being exactly the same as the widths of the
correspondingly placed cells of the first row; and (ii) that the "best"
conceptual solution (in my eyes, certainly, but YMMV) is that motivating
your "table 2" approach, but modified so as to do without the "ruler row",
roughly as follows (styles shown inline to relieve fallible human memory,
and borders omitted so as not to muck up the dimensional arithmetic; I must
confess, perplexedly, that different browsers disagree just how to render
this, even though the w3 validator (fed an appropriate DOCTYPE as aperitif
before this main course) is happy):
<table style="width: 40em"><tr>
<td style="width: 5em"> . 5a . </td>
<td colspan="2" style="width: 10em"> . 10b . </td>
<td colspan="2" style="width: 10em"> . 10c . </td>
<td colspan="2" style="width: 10em"> . 10d . </td>
<td style="width: 5em"> . 5 . </td>
</tr><tr>
<td colspan="2" style="width: 10em"> . 10a . </td>
<td colspan="2" style="width: 10em"> . 10b . </td>
<td colspan="2" style="width: 10em"> . 10c . </td>
<td colspan="2" style="width: 10em"> . 10d . </td>
</tr></table>
HTH. Cheers, -- tlvp
--
Avant de repondre, jeter la poubelle, SVP.
Osmo Saarikumpu
May 14, 2013, 2:36:04 AM5/14/13
to
On 13.5.2013 19:52, tlvp wrote:
> ... I must
JFTR, here is a version, that renders consistenly with the browsers I
have at my disposal:
<!DOCTYPE HTML>
<meta charset=utf-8>
<title>Fixed Grid?</title>
<style>
col {width:5em;}
</style>
<table>
<col>
<col span=2>
<col span=2>
<col span=2>
<col>
<tr>
<td>5
<td colspan=2>10
<td colspan=2>supercalifragilisticexpialidocious
<td colspan=2>10
<td>5
<tr>
<td colspan=2>10
<td colspan=2>10
<td colspan=2>10
<td colspan=2>supercalifragilisticexpialidocious
</table>
--
Best wishes, Osmo
> ... I must
> confess, perplexedly, that different browsers disagree just how to render
> this, even though the w3 validator (fed an appropriate DOCTYPE as aperitif
> before this main course) is happy): ...
> this, even though the w3 validator (fed an appropriate DOCTYPE as aperitif
JFTR, here is a version, that renders consistenly with the browsers I
have at my disposal:
<!DOCTYPE HTML>
<meta charset=utf-8>
<title>Fixed Grid?</title>
<style>
table {table-layout:fixed;width:40em;}
td {border:solid 1px;overflow:hidden;}
col {width:5em;}
</style>
<table>
<col>
<col span=2>
<col span=2>
<col span=2>
<col>
<tr>
<td>5
<td colspan=2>10
<td colspan=2>supercalifragilisticexpialidocious
<td colspan=2>10
<td>5
<tr>
<td colspan=2>10
<td colspan=2>10
<td colspan=2>10
<td colspan=2>supercalifragilisticexpialidocious
</table>
--
Best wishes, Osmo
Thomas 'PointedEars' Lahn
May 14, 2013, 4:02:59 AM5/14/13
to
Osmo Saarikumpu wrote:
> On 13.5.2013 19:52, tlvp wrote:
>> ... I must confess, perplexedly, that different browsers disagree just
>> how to render this, even though the w3 validator (fed an appropriate
>> DOCTYPE as aperitif before this main course) is happy): ...
>
> JFTR, here is a version, that renders consistenly with the browsers I
> have at my disposal: […]
> On 13.5.2013 19:52, tlvp wrote:
>> ... I must confess, perplexedly, that different browsers disagree just
>> how to render this, even though the w3 validator (fed an appropriate
>> DOCTYPE as aperitif before this main course) is happy): ...
>
> JFTR, here is a version, that renders consistenly with the browsers I
Which browsers, exactly (unforged UA, max. details)?
PointedEars
--
Sometimes, what you learn is wrong. If those wrong ideas are close to the
root of the knowledge tree you build on a particular subject, pruning the
bad branches can sometimes cause the whole tree to collapse.
-- Mike Duffy in cljs, <news:Xns9FB6521286...@94.75.214.39>
dorayme
May 14, 2013, 4:09:14 AM5/14/13
to
In article <kmsm0i$9s1$1...@speranza.aioe.org>,
!Important information: Good in Mac IE 5.2, except it does not grok
the border-collapse.
--
dorayme
Osmo Saarikumpu <os...@weppipakki.com> wrote:
> On 13.5.2013 19:52, tlvp wrote:
>
> > ... I must
> > confess, perplexedly, that different browsers disagree just how to render
> > this, even though the w3 validator (fed an appropriate DOCTYPE as aperitif
> > before this main course) is happy): ...
>
> JFTR, here is a version, that renders consistenly with the browsers I
> have at my disposal:
>
> <!DOCTYPE HTML>
> <meta charset=utf-8>
> <title>Fixed Grid?</title>
> <style>
> table {table-layout:fixed;width:40em;}
> td {border:solid 1px;overflow:hidden;}
> col {width:5em;}
> </style>
> <table>
> <col>
> ...
> On 13.5.2013 19:52, tlvp wrote:
>
> > ... I must
> > confess, perplexedly, that different browsers disagree just how to render
> > this, even though the w3 validator (fed an appropriate DOCTYPE as aperitif
> > before this main course) is happy): ...
>
> JFTR, here is a version, that renders consistenly with the browsers I
> have at my disposal:
>
> <!DOCTYPE HTML>
> <meta charset=utf-8>
> <title>Fixed Grid?</title>
> <style>
> table {table-layout:fixed;width:40em;}
> td {border:solid 1px;overflow:hidden;}
> col {width:5em;}
> </style>
> <table>
> <col>
!Important information: Good in Mac IE 5.2, except it does not grok
the border-collapse.
--
dorayme
Jonathan N. Little
May 14, 2013, 10:00:54 AM5/14/13
to
you use IE at all if you have a Mac? Is anyone still trying to
accommodate IR 5.x on any platform? Does anyone bother with IE 6 for
that matter? Can you not wait for the time when IE 6 - 8 can be binned?
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
emf
May 14, 2013, 4:58:00 PM5/14/13
to
On 2013-05-13 01:14 Jukka K. Korpela wrote:
> 2013-05-13 5:54, emf wrote:
>
>> In table 1 below, I tried to use td { width: } to set the width of cells
>> so that in the first row the first cell will be 5em, the 2nd, 3rd, and
>> 4th 10em, and the 5th 5em, while in the second row there will be 4 cells
>> of 10em, and I realized that it doesn't work
>
> Your HTML code has serious markup errors, even <table> elements that
> have not been closed properly with </table> - using <table> instead of
> </table>! There are too many problems to discuss, and they are not
> relevant to the topic, so I will just say: Use the Validator, Luke! But
> beware of the dark side - HTML5 validators http://validator.nu are
> experimental software that checks against some mutable definition. (But
> they do find table structure errors better than classic HTML validators.)
I can't believe I can be so careless and repeat mistakes that I have
> 2013-05-13 5:54, emf wrote:
>
>> In table 1 below, I tried to use td { width: } to set the width of cells
>> so that in the first row the first cell will be 5em, the 2nd, 3rd, and
>> 4th 10em, and the 5th 5em, while in the second row there will be 4 cells
>> of 10em, and I realized that it doesn't work
>
> Your HTML code has serious markup errors, even <table> elements that
> have not been closed properly with </table> - using <table> instead of
> </table>! There are too many problems to discuss, and they are not
> relevant to the topic, so I will just say: Use the Validator, Luke! But
> beware of the dark side - HTML5 validators http://validator.nu are
> experimental software that checks against some mutable definition. (But
> they do find table structure errors better than classic HTML validators.)
made and corrected in the past. Yes, I always use the validator before
posting webpages, but I thought that it wasn't necessary in this occasion.
<col>, which is exactly what I needed, and if I did come across it I did
not realize it's usefulness.
>
> However, this won't really enforce a fixed grid. If your cell contains
> "supercalifragilisticexpialidocious", a column will get wider than
> declared, and even table { table-layout: fixed; } won't help. To get a
> fixed grid, you will need to make sure that no cell contains anything
> that requires more width than allowed by the column widths. This may
> mean that you need to introduce hyphenation of long words some how and
> to avoid long nonbreakable strings; do not use the popular word-break:
> break-word unless forced to - it lit erally brea ks thing s up.
Yes, yes. I used em and monospace font to be able to count exactly the
> However, this won't really enforce a fixed grid. If your cell contains
> "supercalifragilisticexpialidocious", a column will get wider than
> declared, and even table { table-layout: fixed; } won't help. To get a
> fixed grid, you will need to make sure that no cell contains anything
> that requires more width than allowed by the column widths. This may
> mean that you need to introduce hyphenation of long words some how and
> to avoid long nonbreakable strings; do not use the popular word-break:
> break-word unless forced to - it lit erally brea ks thing s up.
width of each cell.
Thanks,
emf
--
Natal Transits Calculator
https://files.nyu.edu/emf202/public/jv/nataltransits.html
emf
May 14, 2013, 5:29:37 PM5/14/13
to
they should. Compare the 2 tables below. In the second table the
centered "I" are not aligned exactly with the 5em cell borders:
<!DOCTYPE HTML>
<head>
<meta charset=utf-8>
<title>table</title>
<style type="text/css">
body { background-color: black; color: white; }
table { border: 1px solid white; width: 40em; }
<style type="text/css">
body { background-color: black; color: white; }
td { border: 1px solid white; text-align: center; }
col { width: 5em; }
</style>
</head>
<body>
<col> solution
</style>
</head>
<body>
<table>
<col><col><col><col><col><col><col><col>
<tr>
<td></td>
<col><col><col><col><col><col><col><col>
<tr>
<td colspan=2></td>
<td colspan=2>I</td>
<td colspan=2></td>
<td></td>
</tr>
<tr>
<td colspan=2>I</td>
<td colspan=2></td>
<td colspan=2></td>
<td colspan=2>I</td>
</tr>
</table>
specifying only width of table and of 5em cells
<table>
<tr>
<td style="width: 5em"></td>
<td colspan="2" style="width: 10em"></td>
<td colspan="2" style="width: 10em">I</td>
<td colspan="2" style="width: 10em"></td>
<td style="width: 5em"></td>
</tr>
<tr>
<td colspan="2" style="width: 10em">I</td>
<td colspan="2" style="width: 10em"></td>
<td colspan="2" style="width: 10em"></td>
<td colspan="2" style="width: 10em">I</td>
</tr>
</table>
</body>
</html>
emf
emf
May 14, 2013, 5:32:52 PM5/14/13
to
On 2013-05-13 04:51 Osmo Saarikumpu wrote:
> On 13.5.2013 8:14, Jukka K. Korpela wrote:
>> However, this won't really enforce a fixed grid. If your cell contains
>> "supercalifragilisticexpialidocious", a column will get wider than
>> declared, and even table { table-layout: fixed; } won't help.
>
> It seems that instructing the browser to use the fixed table layout
> algorithm while only setting the width of the columns is not sufficient
> to enforce a fixed grid. Probably not very useful in practice, but
> adding a width to the table itself, e.g.:
>
> table {
> table-layout:fixed;
> width:40em;
> }
Again I learned something new. Useful to remember. Thanks.
> On 13.5.2013 8:14, Jukka K. Korpela wrote:
>> However, this won't really enforce a fixed grid. If your cell contains
>> "supercalifragilisticexpialidocious", a column will get wider than
>> declared, and even table { table-layout: fixed; } won't help.
>
> It seems that instructing the browser to use the fixed table layout
> algorithm while only setting the width of the columns is not sufficient
> to enforce a fixed grid. Probably not very useful in practice, but
> adding a width to the table itself, e.g.:
>
> table {
> table-layout:fixed;
> width:40em;
> }
emf
dorayme
May 14, 2013, 6:21:37 PM5/14/13
to
In article <kmtfrj$1jr$1...@dont-email.me>,
--
dorayme
"Jonathan N. Little" <lws...@gmail.com> wrote:
> !Important questions: Who would be using IE 5.2 on a Mac now?
Worldwide? On an average day? Maybe five people.
> !Important questions: Who would be using IE 5.2 on a Mac now?
--
dorayme
dorayme
May 14, 2013, 6:25:48 PM5/14/13
to
In article <kmu8g0$ikl$1...@speranza.aioe.org>, emf <emf...@gmail.com>
wrote:
> I used em and monospace font to be able to count exactly the
> width of each cell.
Another way to experiment to see width in cells, perhaps easier, is to
do it in px, you get to see the result in an immediate way, especially
if you put in a background picture on BODY that displays a pixel grid
and use pictures in the cells.
--
dorayme
wrote:
> I used em and monospace font to be able to count exactly the
> width of each cell.
do it in px, you get to see the result in an immediate way, especially
if you put in a background picture on BODY that displays a pixel grid
and use pictures in the cells.
--
dorayme
Osmo Saarikumpu
May 15, 2013, 5:21:46 AM5/15/13
to
On 14.5.2013 11:02, Thomas 'PointedEars' Lahn wrote:
1) Mozilla/5.0 (Windows NT 5.1; rv:21.0) Gecko/20100101 Firefox/21.0
2) Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.31 (KHTML, like Gecko)
Chrome/26.0.1410.64 Safari/537.31
3) Opera/9.80 (Windows NT 5.1) Presto/2.12.388 Version/12.15
4) Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0;
InfoPath.3; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR
3.5.30729; .NET4.0C; .NET4.0E)
--
Best wishes, Osmo
> Osmo Saarikumpu wrote:
>> JFTR, here is a version, that renders consistenly with the browsers I
>> have at my disposal: […]
>
> Which browsers, exactly (unforged UA, max. details)?
The following four:
>> JFTR, here is a version, that renders consistenly with the browsers I
>> have at my disposal: […]
>
> Which browsers, exactly (unforged UA, max. details)?
1) Mozilla/5.0 (Windows NT 5.1; rv:21.0) Gecko/20100101 Firefox/21.0
2) Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.31 (KHTML, like Gecko)
Chrome/26.0.1410.64 Safari/537.31
3) Opera/9.80 (Windows NT 5.1) Presto/2.12.388 Version/12.15
4) Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0;
InfoPath.3; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR
3.5.30729; .NET4.0C; .NET4.0E)
--
Best wishes, Osmo
Jonathan N. Little
May 15, 2013, 1:33:37 PM5/15/13
to
Gus Richter
May 16, 2013, 12:25:25 AM5/16/13
to
On 5/15/2013 1:33 PM, Jonathan N. Little wrote:
> dorayme wrote:
>> In article <kmtfrj$1jr$1...@dont-email.me>,
>> "Jonathan N. Little" <lws...@gmail.com> wrote:
>>
>>> !Important questions: Who would be using IE 5.2 on a Mac now?
>>
>> Worldwide? On an average day? Maybe five people.
>>
>
> Well I better support those five, eh? ;-)
Must be a Kanuck, huh?
> dorayme wrote:
>> In article <kmtfrj$1jr$1...@dont-email.me>,
>> "Jonathan N. Little" <lws...@gmail.com> wrote:
>>
>>> !Important questions: Who would be using IE 5.2 on a Mac now?
>>
>> Worldwide? On an average day? Maybe five people.
>>
>
> Well I better support those five, eh? ;-)
--
Gus
emf
May 18, 2013, 6:33:07 AM5/18/13
to
Eureka!:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table</title>
<style type="text/css">
body {
background-color: black;
color:white;
}
table {
width: 40em;
margin: auto;
border: 2px solid white;
}
td {
border: 1px solid yellow;
width: 10em;
}
table td.hlf { width: 5em; }
</style>
</head>
<body>
Table 1: without colspan="2"
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
</table>
Table 2: with colspan="2"
<td colspan="2">10</td>
<td colspan="2">10</td>
<td colspan="2">10</td>
<td colspan="2">10</td>
<td colspan="2">10</td>
</tr>
</table>
<body>
</html>
I just realized the problem with my code. The problem in table 1 is that
the browser does not apply the specified width of the cells because it
conflicts with the implicit colspan="1".
Of course, each cell except the narrow ones extends to ("spans") 2 cells
of the other row, from the middle of one to the middle of the other.
Adding colspan="2" in table 2 corrects the problem without specifying
the number of columns.
emf
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table</title>
<style type="text/css">
body {
background-color: black;
color:white;
}
table {
width: 40em;
margin: auto;
border: 2px solid white;
}
td {
border: 1px solid yellow;
}
table td.hlf { width: 5em; }
</style>
</head>
<body>
Table 1: without colspan="2"
<table class="t1">
<tr>
<td class="hlf">5</td>
<td>10</td>
<tr>
<td class="hlf">5</td>
<td>10</td>
<td>10</td>
<td class="hlf">5</td>
</tr>
<tr>
<td>10</td>
</tr>
<tr>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
</table>
Table 2: with colspan="2"
<table class="t1">
<tr>
<td class="hlf">5</td>
<td colspan="2">10</td>
<tr>
<td class="hlf">5</td>
<td colspan="2">10</td>
<td colspan="2">10</td>
<td class="hlf">5</td>
</tr>
<tr>
<td colspan="2">10</td>
</tr>
<tr>
<td colspan="2">10</td>
<td colspan="2">10</td>
<td colspan="2">10</td>
</tr>
</table>
<body>
</html>
I just realized the problem with my code. The problem in table 1 is that
the browser does not apply the specified width of the cells because it
conflicts with the implicit colspan="1".
Of course, each cell except the narrow ones extends to ("spans") 2 cells
of the other row, from the middle of one to the middle of the other.
Adding colspan="2" in table 2 corrects the problem without specifying
the number of columns.
emf
Thomas 'PointedEars' Lahn
May 18, 2013, 12:46:20 PM5/18/13
to
emf wrote:
> Eureka!:
> […]
Utter nonsense. The “colspan” attribute specifies across how many columns a
table cell (“th” or “td” element) should span. That is, in other rows there
would be cells which do *not* span as many columns, whose “colspan”
attribute value would be smaller or not specified.
table
,-----------------------------------------------.
tr : th[colspan=2] : th[colspan=1] :
:-----------------------------------------------:
tr : th[colspan=1] : th[colspan=2] :
:-----------------------------------------------:
tr : th[colspan=3] :
:-----------------------------------------------:
tr : th[colspan=1] : td[colspan=1] : td[colspan=1] :
`-----------------------------------------------'
You are trolling, yes?
> Eureka!:
> […]
table cell (“th” or “td” element) should span. That is, in other rows there
would be cells which do *not* span as many columns, whose “colspan”
attribute value would be smaller or not specified.
table
,-----------------------------------------------.
tr : th[colspan=2] : th[colspan=1] :
:-----------------------------------------------:
tr : th[colspan=1] : th[colspan=2] :
:-----------------------------------------------:
tr : th[colspan=3] :
:-----------------------------------------------:
tr : th[colspan=1] : td[colspan=1] : td[colspan=1] :
`-----------------------------------------------'
You are trolling, yes?
dorayme
May 18, 2013, 6:47:47 PM5/18/13
to
In article <kn7lc8$r75$1...@speranza.aioe.org>, emf <emf...@gmail.com>
wrote:
> Eureka!:
that the author can keep the *rows themselves* within a table equal
width. Your making the tables a definite width (40em) actually results
in your cells in your second row in the second table not 10em each (as
specified in the CSS) but whatever is needed to make the table 40em
with four cells. The browser takes over and forces the resolution of
the seeming conflict in favour of your table width (I mean, one can at
least conceive it might ignore it instead and do something else you
don't want- like in the first table).
--
dorayme
wrote:
> Eureka!:
>
> table {
> width: 40em;
> margin: auto;
> border: 2px solid white;
> }
> td {
> border: 1px solid yellow;
> width: 10em;
> }
> table td.hlf { width: 5em; }
>
> table {
> width: 40em;
> margin: auto;
> border: 2px solid white;
> }
> td {
> border: 1px solid yellow;
> width: 10em;
> }
> table td.hlf { width: 5em; }
>
> I just realized the problem with my code. The problem in table 1 is that
> the browser does not apply the specified width of the cells because it
> conflicts with the implicit colspan="1".
>
> Of course, each cell except the narrow ones extends to ("spans") 2 cells
> of the other row, from the middle of one to the middle of the other.
> Adding colspan="2" in table 2 corrects the problem without specifying
> the number of columns.
>
Well, COLSPAN is for the purpose of spanning cells from row to row so
> the browser does not apply the specified width of the cells because it
> conflicts with the implicit colspan="1".
>
> Of course, each cell except the narrow ones extends to ("spans") 2 cells
> of the other row, from the middle of one to the middle of the other.
> Adding colspan="2" in table 2 corrects the problem without specifying
> the number of columns.
>
that the author can keep the *rows themselves* within a table equal
width. Your making the tables a definite width (40em) actually results
in your cells in your second row in the second table not 10em each (as
specified in the CSS) but whatever is needed to make the table 40em
with four cells. The browser takes over and forces the resolution of
the seeming conflict in favour of your table width (I mean, one can at
least conceive it might ignore it instead and do something else you
don't want- like in the first table).
--
dorayme
emf
May 19, 2013, 3:36:02 AM5/19/13
to
On 2013-05-18 18:47 dorayme wrote:
> ...
table is only a little wider, and with it you allow room for browser
interpretation. I had used table width at the phase when I was trying to
make the code work the way I wanted it to. It is clearly unnecessary.
But the main issue is that (a) without specifying colspan="2", the
default colspan="1" forces the cells to align one under the other, which
is as they should do usually, though not in my case. (b) With
colspan="2" (or more) and without specifying cell widths, the cells are
again aligned properly, as in the Pointed Ears' diagram in message
above, which is the typical use of colspan. These 2 uses I learned a
long time ago. What I just realized is that (c) when you specify cell
widths *and* use colspan="2", you can have rows with cells of varying
widths.
I am sure there may be limitations to this method, but it works in my
case and it will take some experimentation with different cell widths
and different browsers to find out what they are. But with my method it
seems to me that it should be possible to have cells of varying widths
on different rows, as for example in charts with horizontal bars.
Below is the code of 2 tables both with specified cell widths and using
colspan="2"; table width though is specified only in table 1 but not in
table 2. Clearly table 2 is preferable since it allows less space for
browser interpretation, unless there is some particular reason to resize
the table to a specific width.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table</title>
<style type="text/css">
body {
background-color: black;
color:white;
}
table {
text-align: center;
width: 10em; /* default */
}
table td.hlf { width: 5em; }
table.t1 { width: 40em; }
</style>
</head>
<body>
Table 1: with colspan="2", table width: 40em;
<table class="t1">
<tr>
<td class="hlf">1</td>
</tr>
<tr>
</tr>
</table>
Table 2: with colspan="2", without specified table width
<table>
<tr>
<td class="hlf"></td>
</tr>
<tr>
</tr>
</table>
<body>
</html>
Cheers,
> ...
> Well, COLSPAN is for the purpose of spanning cells from row to row so
> that the author can keep the *rows themselves* within a table equal
> width. Your making the tables a definite width (40em) actually results
> in your cells in your second row in the second table not 10em each (as
> specified in the CSS) but whatever is needed to make the table 40em
> with four cells. The browser takes over and forces the resolution of
> the seeming conflict in favour of your table width (I mean, one can at
> least conceive it might ignore it instead and do something else you
> don't want- like in the first table).
You are right about the table width. Without that specification the
> that the author can keep the *rows themselves* within a table equal
> width. Your making the tables a definite width (40em) actually results
> in your cells in your second row in the second table not 10em each (as
> specified in the CSS) but whatever is needed to make the table 40em
> with four cells. The browser takes over and forces the resolution of
> the seeming conflict in favour of your table width (I mean, one can at
> least conceive it might ignore it instead and do something else you
> don't want- like in the first table).
table is only a little wider, and with it you allow room for browser
interpretation. I had used table width at the phase when I was trying to
make the code work the way I wanted it to. It is clearly unnecessary.
But the main issue is that (a) without specifying colspan="2", the
default colspan="1" forces the cells to align one under the other, which
is as they should do usually, though not in my case. (b) With
colspan="2" (or more) and without specifying cell widths, the cells are
again aligned properly, as in the Pointed Ears' diagram in message
above, which is the typical use of colspan. These 2 uses I learned a
long time ago. What I just realized is that (c) when you specify cell
widths *and* use colspan="2", you can have rows with cells of varying
widths.
I am sure there may be limitations to this method, but it works in my
case and it will take some experimentation with different cell widths
and different browsers to find out what they are. But with my method it
seems to me that it should be possible to have cells of varying widths
on different rows, as for example in charts with horizontal bars.
Below is the code of 2 tables both with specified cell widths and using
colspan="2"; table width though is specified only in table 1 but not in
table 2. Clearly table 2 is preferable since it allows less space for
browser interpretation, unless there is some particular reason to resize
the table to a specific width.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table</title>
<style type="text/css">
body {
background-color: black;
color:white;
}
table {
margin: auto;
border: 2px solid white;
}
td {
border: 1px solid white;
border: 2px solid white;
}
td {
text-align: center;
width: 10em; /* default */
}
table td.hlf { width: 5em; }
table.t1 { width: 40em; }
</style>
</head>
<body>
Table 1: with colspan="2", table width: 40em;
<table class="t1">
<tr>
<td class="hlf">1</td>
<td colspan="2">2</td>
<td colspan="2">2</td>
<td colspan="2">2</td>
<td class="hlf">1</td>
<td colspan="2">2</td>
<td colspan="2">2</td>
</tr>
<tr>
<td colspan="2">2</td>
<td colspan="2">2</td>
<td colspan="2">2</td>
<td colspan="2">2</td>
<td colspan="2">2</td>
<td colspan="2">2</td>
</tr>
</table>
Table 2: with colspan="2", without specified table width
<table>
<tr>
<td class="hlf"></td>
<td colspan="2">2</td>
<td colspan="2">2</td>
<td colspan="2">2</td>
<td class="hlf"></td>
<td colspan="2">2</td>
<td colspan="2">2</td>
</tr>
<tr>
<td colspan="2">2</td>
<td colspan="2">2</td>
<td colspan="2">2</td>
<td colspan="2">2</td>
<td colspan="2">2</td>
<td colspan="2">2</td>
</tr>
</table>
<body>
</html>
Cheers,
Osmo Saarikumpu
May 19, 2013, 7:28:43 AM5/19/13
to
On 14.5.2013 11:02, Thomas 'PointedEars' Lahn wrote:
> Osmo Saarikumpu wrote:
> Osmo Saarikumpu wrote:
>> JFTR, here is a version, that renders consistenly with the browsers I
>> have at my disposal: […]
>
> Which browsers, exactly (unforged UA, max. details)?
Had an opportunity to test with:
>> have at my disposal: […]
>
> Which browsers, exactly (unforged UA, max. details)?
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET4.0C
and somewhat surprisingly, it concurred also.
--
Best wishes, Osmo
0 new messages