Re: CSS display: table

Chris Beall <[email protected]> Wed, 15 Feb 2012 16:16:34 -0800 (PST)
Newsgroups gmane.comp.web.amaya.general
Message-ID <[email protected]>
---631991823-1183949632-1329351394=:41814
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: quoted-printable

Dominique,

Thank you.=C2=A0 I am familiar with the debate about using tables for layou=
t.=C2=A0 The technique described by Jean-Luc=C2=A0 should satisfy the puris=
ts on that point, while still allowing what is often called grid-based layo=
ut.=C2=A0 A bit of a loophole in my opinion, but it can save hours of needl=
ess debate.

My own concern with such layout, regardless of how it is achieved, is that =
it does not accommodate narrow displays as well as the various float techni=
ques do, but today's devices seem to be solving that problem (with scaling,=
 zooming, easier horizontal scrolling, etc.) so perhaps it 's no longer an =
issue.

Chris Beall

--- On Wed, 2/15/12, Dominique Mee=C3=B9s <[email protected]> wrote:

From: Dominique Mee=C3=B9s <[email protected]>
Subject: Re: CSS display: table
To: [email protected]
Date: Wednesday, February 15, 2012, 6:08 PM

=0A=0A  =0A    =0A    =0A  =0A  =0A    Chris Beall a =C3=A9crit ce qui suit=
, le 15/02/12 23:49 :=0A    =0A      =0A        =0A          =0A           =
 =E2=80=A6 In view of the=0A              fact that you must go to a lot of=
 work to add a set of=0A              classes to do this, plus assign those=
 classes carefully to=0A              each and every <div> in the tree, why=
 would you not=0A              instead just use the appropriate <table>-fam=
ily tags=0A              instead of <div>s?=C2=A0 I sense a gap in my educa=
tion;=0A              perhaps you can fill it.
=0A            =0A          =0A        =0A      =0A    =0A    This was my f=
irst reaction and I nearly posted the same question.=0A    Then I saw the l=
inuxandfriends link given by Jean-Luc Meunier refers=0A    to=0A    http://=
www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/=0A=0A =
   where there is some more =E2=80=9Cphilosophy=E2=80=9D about this. In a f=
ew words,=0A    you should use HTML tables to display tabular content, the =
kind of=0A    content you would place in a spreadsheet if it was not a webp=
age;=0A    you should use these CSS tabular possibilities if it is not typi=
cal=0A    tabular content, but mere tabular display (like a div=0A    id=3D=
"navigation" column somewhere in your page).=0A    =0A      =0A        =0A =
         =0A            --- On Tue,=0A                2/14/12, Meunier, Jea=
n-Luc <[email protected]>=0A              wrote:
=0A             =20
=0A                From: Meunier, Jean-Luc=0A                <Jean-Luc.Meun=
[email protected]>
=0A                Subject: CSS display: table
=0A                To: "[email protected]" <[email protected]>
=0A                Date: Tuesday, February 14, 2012, 10:45 AM=0A           =
     =0A                  =0A                   =20
=0A                      =E2=80=A6 See for=0A                        instan=
ce at http://linuxandfriends.com/2009/04/04/how-to-style-div-elements-as-ta=
bles/
=0A                      =0A                    =0A                  =0A   =
             =0A              =0A            =0A          =0A        =0A   =
   =0A    =0A  =0A=0A
---631991823-1183949632-1329351394=:41814
Content-Type: text/html; charset=utf-8
Content-Transfer-Encoding: quoted-printable

<table cellspacing=3D"0" cellpadding=3D"0" border=3D"0" ><tr><td valign=3D"=
top" style=3D"font: inherit;">Dominique,<br><br>Thank you.&nbsp; I am famil=
iar with the debate about using tables for layout.&nbsp; The technique desc=
ribed by Jean-Luc&nbsp; should satisfy the purists on that point, while sti=
ll allowing what is often called grid-based layout.&nbsp; A bit of a loopho=
le in my opinion, but it can save hours of needless debate.<br><br>My own c=
oncern with such layout, regardless of how it is achieved, is that it does =
not accommodate narrow displays as well as the various float techniques do,=
 but today's devices seem to be solving that problem (with scaling, zooming=
, easier horizontal scrolling, etc.) so perhaps it 's no longer an issue.<b=
r><br>Chris Beall<br><br>--- On <b>Wed, 2/15/12, Dominique Mee=C3=B9s <i>&l=
t;[email protected]&gt;</i></b> wrote:<br><blockquote style=3D"border-le=
ft: 2px solid rgb(16, 16, 255); margin-left: 5px; padding-left: 5px;"><br>F=
rom:
 Dominique Mee=C3=B9s &lt;[email protected]&gt;<br>Subject: Re: CSS disp=
lay: table<br>To: [email protected]<br>Date: Wednesday, February 15, 2012, 6=
:08 PM<br><br><div id=3D"yiv1528949077">=0A=0A  =0A    =0A    <title></titl=
e>=0A  =0A  <div>=0A    Chris Beall a =C3=A9crit ce qui suit, le 15/02/12 2=
3:49 :=0A    <blockquote type=3D"cite">=0A      <table border=3D"0" cellpad=
ding=3D"0" cellspacing=3D"0">=0A        <tbody>=0A          <tr>=0A        =
    <td style=3D"font:inherit;" valign=3D"top">=E2=80=A6 In view of the=0A =
             fact that you must go to a lot of work to add a set of=0A     =
         classes to do this, plus assign those classes carefully to=0A     =
         each and every &lt;div&gt; in the tree, why would you not=0A      =
        instead just use the appropriate &lt;table&gt;-family tags=0A      =
        instead of &lt;div&gt;s?&nbsp; I sense a gap in my education;=0A   =
           perhaps you can fill it.<br>=0A            </td>=0A          </t=
r>=0A        </tbody>=0A      </table>=0A    </blockquote>=0A    This was m=
y first reaction and I nearly posted the same question.=0A    Then I saw th=
e linuxandfriends link given by Jean-Luc Meunier refers=0A    to=0A    <a r=
el=3D"nofollow" class=3D"yiv1528949077moz-txt-link-freetext" target=3D"_bla=
nk" href=3D"http://www.digital-web.com/articles/everything_you_know_about_C=
SS_Is_wrong/">http://www.digital-web.com/articles/everything_you_know_about=
_CSS_Is_wrong/</a>=0A=0A    where there is some more =E2=80=9Cphilosophy=E2=
=80=9D about this. In a few words,=0A    you should use HTML tables to disp=
lay tabular content, the kind of=0A    content you would place in a spreads=
heet if it was not a webpage;=0A    you should use these CSS tabular possib=
ilities if it is not typical=0A    tabular content, but mere tabular displa=
y (like a div=0A    id=3D"navigation" column somewhere in your page).=0A   =
 <blockquote type=3D"cite">=0A      <table border=3D"0" cellpadding=3D"0" c=
ellspacing=3D"0">=0A        <tbody>=0A          <tr>=0A            <td styl=
e=3D"font:inherit;" valign=3D"top">--- On <b>Tue,=0A                2/14/12=
, Meunier, Jean-Luc <i><a rel=3D"nofollow" class=3D"yiv1528949077moz-txt-li=
nk-rfc2396E" ymailto=3D"mailto:[email protected]" target=3D"_=
blank" href=3D"/mc/[email protected]">&lt;Jean-L=
[email protected]&gt;</a></i></b>=0A              wrote:<br>=0A    =
          <blockquote style=3D"border-left:2px solid rgb(16, 16,=0A        =
        255);margin-left:5px;padding-left:5px;"><br>=0A                From=
: Meunier, Jean-Luc=0A                <a rel=3D"nofollow" class=3D"yiv15289=
49077moz-txt-link-rfc2396E" ymailto=3D"mailto:[email protected]=
om" target=3D"_blank" href=3D"/mc/[email protected].=
com">&lt;[email protected]&gt;</a><br>=0A                Subj=
ect: CSS display: table<br>=0A                To: <a rel=3D"nofollow" class=
=3D"yiv1528949077moz-txt-link-rfc2396E" ymailto=3D"mailto:[email protected]"=
 target=3D"_blank" href=3D"/mc/[email protected]">"www-amaya@w3=
.org"</a> <a rel=3D"nofollow" class=3D"yiv1528949077moz-txt-link-rfc2396E" =
ymailto=3D"mailto:[email protected]" target=3D"_blank" href=3D"/mc/compose?t=
[email protected]">&lt;[email protected]&gt;</a><br>=0A                Da=
te: Tuesday, February 14, 2012, 10:45 AM=0A                <div id=3D"yiv15=
28949077">=0A                  <div>=0A                    <div class=3D"yi=
v1528949077WordSection1"><br>=0A                      <p class=3D"yiv152894=
9077MsoNormal">=E2=80=A6 See for=0A                        instance at <a r=
el=3D"nofollow" target=3D"_blank" href=3D"http://linuxandfriends.com/2009/0=
4/04/how-to-style-div-elements-as-tables/">http://linuxandfriends.com/2009/=
04/04/how-to-style-div-elements-as-tables/</a><br>=0A                      =
</p>=0A                    </div>=0A                  </div>=0A            =
    </div>=0A              </blockquote>=0A            </td>=0A          </=
tr>=0A        </tbody>=0A      </table>=0A    </blockquote>=0A  </div>=0A=
=0A</div></blockquote></td></tr></table>
---631991823-1183949632-1329351394=:41814--