SlideShare uma empresa Scribd logo
1 de 108
Baixar para ler offline
VIVE LES TABLEAUX
DE MISE EN PAGE !
et si la solution était là depuis le début ?




         Raphaël Goetter ~ Paris Web 2011
Au tableau : élève Raphaël Goetter




                                     © Dew
TABLE(AU) DES
  MATIERES
     (hé hé)
1. Les dessous de table            = c'est quoi ?
2. Comment noircir le tableau      = c'est naze !
3. Table ronde des alternatives    = le reste, c'est
                                   mieux ?
4. Faisons table rase du passé
5. Remettons-nous en cell !        = cool des CSS !
6. Et si on passait à table ?
7. Tables de la Loi                = hey ça
8. Des tableaux de maîtres         marche !
9. Encore une ombre au tableau ?   = mais c'est
                                   naze alors ?
10. Table de chevet
QUESTION DU JOUR 1
     fétichisme ?
QUESTION DU JOUR 2
     voisin, voisine
AVOUEZ !
« tableau, c'est le Mal ! »
LE DESIGN WEB
quelles techniques aujourd’hui ?




   float      position: absolute
LE DESIGN WEB
          quelles techniques aujourd’hui ?
                          compatibilité
  position: relative
                                spacer.gif    flux
           frames       bugs
 <br><br><br>               <table>       rowspan

bidouilles      float      position: absolute reset
     marges négatives
                          commentaires       clear
calques                   conditionnels
             colspan                         hacks
  frameworks CSS               &nbsp;
LE DESIGN WEB
          quelles techniques aujourd’hui ?
                          compatibilité
  position: relative
                                spacer.gif    flux
           frames       bugs
 <br><br><br>               <table>       rowspan

bidouilles      float      position: absolute reset
     marges négatives
                          commentaires       clear
calques                   conditionnels
             colspan                         hacks
  frameworks CSS               &nbsp;
LE DESIGN WEB
     on ne devrait plus en être là !
           En attendant CSS3,
et si les tableaux étaient la solution ?
LE DESIGN WEB
          quelles techniques aujourd’hui ?
                          compatibilité
  position: relative
                                spacer.gif    flux
           frames       bugs
 <br><br><br>               <table>       rowspan

bidouilles      float      position: absolute reset
     marges négatives
                          commentaires       clear
calques                   conditionnels
             colspan                         hacks
  frameworks CSS               &nbsp;
DESSOUS DE TABLE
en mode « comment ça marche ? »
DESSOUS DE TABLE
     De la naissance à la mise au bûcher

1996 →naissance (3Ko, 54px)
1996 →David Siegel
     « creating killer web sites »
1997 →spécifications HTML 3.2
1997 →Halelluia !
2000 →au bûcher !
DESSOUS DE TABLE
      1997
DESSOUS DE TABLE
      2000
DESSOUS DE TABLE
C'est quoi déjà un tableau ?
DESSOUS DE TABLE
      C'est quoi déjà un tableau ?


<table>
   <tr>
       <td> cellule1 </td>
       <td> cellule2 </td>
       <td> cellule3 </td>
   </tr>
</table>
DESSOUS DE TABLE
C'est quoi déjà un tableau ?
DESSOUS DE TABLE
Particularités et avantages

                        Blocs alignés
                        parfaitement
                        (sans sortir du flux)
DESSOUS DE TABLE
Particularités et avantages




                        Hauteurs
                        identiques
DESSOUS DE TABLE
Particularités et avantages

                      Centrage
                      horizontal et
                      vertical
                      simplissime
DESSOUS DE TABLE
 Particularités et avantages

Compatible partout !
(since 1997)
NOIRCIR LE TABLEAU
            les tableaux, c'est mal

Un courant de pratique
accompagnant les <table> :
● imbrications multiples,
● colspan, rowspan,

● border, bgcolor

● cellspacing, cellpadding,

● <font>, <center>, valign

● spacer.gif,

● etc.
les tableaux, c'est mal (1)
les tableaux, c'est mal (2)
les tableaux, c'est mal (3)
les tableaux, c'est mal (4)
les tableaux, c'est mal (5)
les tableaux, c'est mal (6)
les tableaux, c'est mal (7)
les tableaux, c'est mal (8)
NOIRCIR LE TABLEAU
  les tableaux, c'est mal

                  Mais que leur
                  reproche-t-on au
                  juste ?
1
 LOURDS, COMPLEXES
imbroglio et soupe de tags au menu
2
 PEU FLEXIBLES
colonnes et cellules figées
3
    PAS ACCESSIBLES
suivi impossible sur lecteurs d'écran
4
    PAS PERFORMANTS
chargement de tout le tableau avant de
             l'afficher
5
    INCONTRÔLABLES
les contenus font éclater les cellules
6
PAS SEMANTIQUES
 c'est pas fait pour ça !
7
    ET LES MOBILES ?
« le Web mobile a tué les tableaux »
8
     BALISES SUPERFLUES
<table> et <tr> obligatoires pour bénéficier
                  d'un <td>
9
METHODE OBSOLETE
 vive le code des années 90 !
1   2   3
4   5   6
7   8   9
TABLE RONDE DES ALTERNATIVES
 les tableaux sont le Mal, alors on fait quoi ?
                On bidouille !
TABLE RONDE DES ALTERNATIVES
                pas de tableaux ?

    →on remplace toutes les cellules par des <div> !




                                             ici le site
    </div>                                   d'une
   </div>
  </div>
                                             agence
                                             web
TABLE RONDE DES ALTERNATIVES
         pas de tableaux ?
                             →… ou par
                             d'autres
                             éléments



                             ici <dl>, <dd>, <dt>
TABLE RONDE DES ALTERNATIVES
             éléments côte à côte ?
→ float
 (pas conçu pour ça au départ, alambiqué)


                                            Bug
                                            Bug
                                            Bug
                                            Bug
                                            Bug
                                            Bug
                                            Bug
                                            Bug
                                            ...
TABLE RONDE DES ALTERNATIVES
      hauteurs de colonnes identiques ?

   →faux-columns (image qui se répète)

                                  background.jpg
                                  (trèèèès long)
TABLE RONDE DES ALTERNATIVES
          centrage vertical ?

  <div>                    obscurs calculs
                           de demi-hauteur
                           (avec JavaScript),
                           + positionnement
                           absolu en % avec
                           marges négatives

                           e=mc²
TABLE RONDE DES ALTERNATIVES
    hauteur 100% avec pied de Xpx en bas ?

JavaScript
calcul de hauteur

CSS3
height : calc(100%-
50px)

CSS3
box-sizing :
content-box
TABLE RONDE DES ALTERNATIVES
   séparateur (bordure) entre deux blocs ?
   →Image de fond sur le parent →largeur fixe
   →CSS3 multicolonnes

  Lorem Elsass ipsum     Spätzle und mollis
  schnaps id, libero,    Hans munster porta
  suspendisse            geht's Strasbourg
  adipiscing Mauris      Heineken
  gewurztraminer gal
  Chulien schpeck sit
  ch'ai libero.
MIEUX ?
              VRAIMENT MIEUX ?
faux-columns                divite

  CSS3
                                 marges
 JavaScript                      négative
                                          s


floa t et bugs
FAISONS TABLE RASE DU
        PASSE
            dans la pratique,
            les inconvénients
            des tableaux
            HTML sont
            souvent exagérés
POSTULAT
deux blocs voisins de même hauteur
POSTULAT
   deux blocs voisins de même hauteur

         → hors du flux
float    → réorganisation des autres éléments
         → dépassement du conteneur
         → propriété clear
         → ajout d’élément HTML inutile
         → bugs des navigateurs

         + création d’une image de fond qui se
         répète (« faux-column »)
         → maintenance fastidieuse + largeurs fixes,
         etc.
1               SOUPE DE TAGS ?
                ah, on n'est pas obligé d'avoir des
                tableaux partout dans la page ?


<table>
   <tr>
       <td>Menu</td>
       <td>Contenu</td>
   <tr>
</table>
1                 SOUPE DE TAGS ?
                  ah, on n'est pas obligé d'avoir des
                  tableaux partout dans la page ?
→ pas obligé
d'imbriquer les éléments

→ pas obligé de
structurer toute la page
en tableau

→ pas obligé d'utiliser
colspan / rowspan
2   PEU FLEXIBLES ?
    mais c'est pas ce qu'on veut  ?
2               PEU FLEXIBLES ?
                mais c'est pas ce qu'on veut  ?

→ on souhaite
justement deux colonnes
indissociables

→ on cherche justement
obtenir les avantages
que cela procure
3                   PAS ACCESSIBLES ?
                   un tableau « linéarisable » est
                   parfaitement accessible

Accessiweb 2.1 :

●
●   Le contenu linéarisé reste compréhensible
●
●   Soit summary="" soit pas de summary
●
● Le tableau de mise en forme ne doit pas posser de balises
caption, th, thead, tfoot
●
●Les cellules du tableau de mise en forme (balise td) ne
doivent pas posséder d'attributs scope, headers, colgroup, axis.
4   PAS PERFORMANTS ?
    table-layout , vous connaissez ?




                                300 pixels
4   PAS PERFORMANTS ?
    table-layout , vous connaissez ?




                                400 pixels
4   PAS PERFORMANTS ?
    table-layout , vous connaissez ?
                         table {
                           table-layout : fixed ;
                         }




                                   300 pixels
4                    PAS PERFORMANTS ?
                     table-layout , vous connaissez ?

table {
  table-layout : fixed ;
}
→ Le moteur de navigateur connaît dès le départ la largeur
du tableau et peut l'afficher



    6 OK !
5                 INCONTRÔLABLES ?
                  table-layout , qu'on vous dit  !

table-layout : fixed →

Le conteneur « tableau » n'est plus dépendant de la largeur
de ses contenus.

Il conserve les dimensions qu'on lui a fixées.

YAY.
6              PAS SEMANTIQUES ?
               c'est pas fait pour ça ! stoo



OK, soit. On y reviendra
7              ET LES MOBILES ?
               iPhone a tué les tableaux HTML



OK, soit. On y reviendra
8              BALISES SUPERFLUES ?
               table, tr, td... c'est trop !



OK, soit. On y reviendra
9              METHODE OBSOLETE ?
               génération 90's



OK, soit. On y reviendra
1   2   3
4   5   6
7   8   9
CONCLUSION ?
      on y gagne sur plusieurs tableaux !


Des inconvénients ? Oui
Des avantages ? Oui
CONCLUSION ?
 on y gagne sur plusieurs tableaux !




Je n'ai pas dit...
REMETTONS-NOUS EN CELL !
    et si la solution était... CSS ?
DISPLAY
        vous connaissez ?
block       inline          none
DISPLAY
           vous connaissez ?
inline-block            list-item
DISPLAY
                  vous connaissez ?
table, table-cell, table-row, table-caption, inline-table,
table-header-group, table-footer-group, etc.
DISPLAY
                 CSS table model


<table>      …     display : table
<tr>         …     display : table-row
td>, <th>    …     display : table-cell
<caption>    …     display : table-caption
<thead>      …     display : table-header-group
<tbody>      …     display : table-row-group
<tfoot>      …     display : table-footer-group
<col>        …     display : table-column
<colgroup>   …     display : table-column-group
DISPLAY
                  CSS table model


<table>                   <nav>Menu</nav>
   <tr>                   <article>Contenu</article>
       <td>Menu</td>
       <td>Contenu</td>   nav, article {
   <tr>                     display : table-cell ;
</table>                  }
DISPLAY
            CSS table model




Séparation fond-forme o/
DEMOS
     Vive les tableaux de mise en page !
1- Hauteurs de frères identiques
2- Alignement vertical
 3- Site de 100% de haut avec pied de page de
hauteur fixe
4- Répartition de la largeur restante
5- Répartition de la hauteur restante
6- Menu de navigation
DEMOS
Vive les tableaux de mise en page !
           Bonus : Apple !
DEMOS
Vive les tableaux de mise en page !
           Bonus : Apple !
DISPLAY
               CSS table model

6- pas sémantique -> [résolu]
7- impossible de gérer plusieurs médias -> [résolu]
8- balises superflues -> [résolu]
9- obsolescence de la méthode -> [résolu]
1   2   3
4   5   6
7   8   9
ET SI ON PASSAIT A TABLE ?
    compatibilités navigateurs
ET SI ON PASSAIT A TABLE ?
     compatibilités navigateurs


OK
ET SI ON PASSAIT A TABLE ?
     compatibilités navigateurs


OK   OK
ET SI ON PASSAIT A TABLE ?
     compatibilités navigateurs


OK   OK       OK
ET SI ON PASSAIT A TABLE ?
     compatibilités navigateurs


OK   OK       OK      OK
ET SI ON PASSAIT A TABLE ?
     compatibilités navigateurs


OK   OK       OK      OK          OK
                             euh oui enfin...
                             à partir de IE8
ET SI ON PASSAIT A TABLE ?
    compatibilités navigateurs




               IE6+IE7
               →8%
ET SI ON PASSAIT A TABLE ?
    compatibilités navigateurs




               IE6+IE7
               →6%
ET SI ON PASSAIT A TABLE ?
           compatibilités navigateurs

CSS2 Table display (caniuse.com)
ET SI ON PASSAIT A TABLE ?
           compatibilités navigateurs

CSS3 Flexible box layout (caniuse.com)
ET SI ON PASSAIT A TABLE ?
           compatibilités navigateurs

CSS3 Grid Layout (caniuse.com)
ET SI ON PASSAIT A TABLE ?
       compatibilités navigateurs

 Fallback : display-table.htc (2ko)
TABLES DE LA LOI
   anges et démos
TABLES DE LA LOI
                         anges et démos
1. les colonnes sont parfaites et toujours de même longueur, sans
besoin de bidouilles,
2. les éléments alentours ne nécessitent pas de traitement de faveur
(clear ou autre), puisque tout demeure dans le flux courant,
3. la gestion des alignements verticaux, notamment du centrage,
devient élémentaire,
4. la fluidité des blocs est innée : finie le casse-tête du pied de page
toujours collé en bas quelle que soit la longueur de la page, ou les
éléments devant occuper toute la hauteur de page moins X pixels,
5. il est même envisageable de réordonner du contenu et de passer
visuellement un élément prioritairement à d’autres en jouant avec la
valeur table-caption
TABLEAUX DE MAÎTRES
  pour aller encore plus loin
TABLEAUX DE MAÎTRES
              pour aller encore plus loin
→ table-layout : remettez-vous en cell (démo)
→ border-collapse : surveillez votre tableau de bord (démo)
→ border-spacing (ex- cellspacing) (démo) 2 valeurs possibles
→ empty-cells / :empty : débarrassez-vous des cellules mortes
(démo)
→ lignes paires impaires (nth-child) (démo)
→ Styler des colonnes : col, nth-child ou th+td+td
→ Jouer avec table-caption : Réordonnement des blocs (aussi
avec table-header-group et table-footer-group) : pensez aux
dessous de table (démo)
ENCORE UNE OMBRE AU
            TABLEAU
                     dérives et excès
Full tableaux
tableaux imbriqués
colspan, rowspan
etc.
ENCORE UNE OMBRE AU
      TABLEAU
     dérives et excès
ENCORE UNE OMBRE AU
            TABLEAU
                             lacunes
Pas de padding sur les éléments en table-row, table-row-group, table-
header-group, table-footer-group, table-column-group et table-column.
ENCORE UNE OMBRE AU
            TABLEAU
                             lacunes
Pas de padding sur les éléments en table-row, table-row-group, table-
header-group, table-footer-group, table-column-group et table-column.

Autres lacunes de table-row : pas de position, width, min/max-width,
min/max-height, vertical-align, border, padding, margin, overflow
ENCORE UNE OMBRE AU
             TABLEAU
                              lacunes
Pas de padding sur les éléments en table-row, table-row-group, table-
header-group, table-footer-group, table-column-group et table-column.

Autres lacunes de table-row : pas de position, width, min/max-width,
min/max-height, vertical-align, border, padding, margin, overflow

table-caption : 1 seul par tableau
ENCORE UNE OMBRE AU
             TABLEAU
                              lacunes
Pas de padding sur les éléments en table-row, table-row-group, table-
header-group, table-footer-group, table-column-group et table-column.

Autres lacunes de table-row : pas de position, width, min/max-width,
min/max-height, vertical-align, border, padding, margin, overflow

table-caption : 1 seul par tableau

positionnement absolu impossible directement au sein d'un table-cell
TABLE DE CHEVET
   l'indispensable

             « Everything you know
             about CSS is wrong ! »

             Rachel Andrew & Kevin
             Yank

             Sitepoint 1998

             ISBN-13: 978-0980455229
MERCI !
« In Vino Veri Table »




                        Raphaël Goetter
                          www.alsacreations.com
                          www.goetter.fr
                          www.ie7nomore.com
                          twitter : @goetter

PS : attention aux excès de table

Mais conteúdo relacionado

Mais procurados

Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...
Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...
Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...Kate De Gourdon
 
SGBDR - MySQL
SGBDR - MySQLSGBDR - MySQL
SGBDR - MySQLMusatge
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)Khaled Djebloun
 
Développement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebDéveloppement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebYoann Gotthilf
 
La puissance des pseudo-éléments
La puissance des pseudo-élémentsLa puissance des pseudo-éléments
La puissance des pseudo-élémentsGeoffrey Croftє
 

Mais procurados (9)

Jquery mobile
Jquery mobileJquery mobile
Jquery mobile
 
SASS
SASSSASS
SASS
 
Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...
Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...
Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...
 
SGBDR - MySQL
SGBDR - MySQLSGBDR - MySQL
SGBDR - MySQL
 
CSS 3
CSS 3CSS 3
CSS 3
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
 
Développement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebDéveloppement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs Web
 
Introduction a jQuery
Introduction a jQueryIntroduction a jQuery
Introduction a jQuery
 
La puissance des pseudo-éléments
La puissance des pseudo-élémentsLa puissance des pseudo-éléments
La puissance des pseudo-éléments
 

Mais de Raphaël Goetter

10 Revelations sur le Web Mobile
10 Revelations sur le Web Mobile10 Revelations sur le Web Mobile
10 Revelations sur le Web MobileRaphaël Goetter
 
Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heureRaphaël Goetter
 
Futur du-positionnement-css
Futur du-positionnement-cssFutur du-positionnement-css
Futur du-positionnement-cssRaphaël Goetter
 
HTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realiteHTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realiteRaphaël Goetter
 
Le Futur du positionnement CSS
Le Futur du positionnement CSSLe Futur du positionnement CSS
Le Futur du positionnement CSSRaphaël Goetter
 
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...Raphaël Goetter
 
Soyez revolutionnaire, utilisez CSS2 !
Soyez revolutionnaire, utilisez CSS2 !Soyez revolutionnaire, utilisez CSS2 !
Soyez revolutionnaire, utilisez CSS2 !Raphaël Goetter
 
Presentation de la Kiwi Party 2011
Presentation de la Kiwi Party 2011Presentation de la Kiwi Party 2011
Presentation de la Kiwi Party 2011Raphaël Goetter
 
Atelier CSS positionnement (Paris web 2007)
Atelier CSS positionnement (Paris web 2007)Atelier CSS positionnement (Paris web 2007)
Atelier CSS positionnement (Paris web 2007)Raphaël Goetter
 
Jouons un peu avec CSS3 (Kiwiparty avril 2010)
Jouons un peu avec CSS3 (Kiwiparty avril 2010)Jouons un peu avec CSS3 (Kiwiparty avril 2010)
Jouons un peu avec CSS3 (Kiwiparty avril 2010)Raphaël Goetter
 
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010Raphaël Goetter
 

Mais de Raphaël Goetter (13)

10 Revelations sur le Web Mobile
10 Revelations sur le Web Mobile10 Revelations sur le Web Mobile
10 Revelations sur le Web Mobile
 
Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heure
 
Futur du-positionnement-css
Futur du-positionnement-cssFutur du-positionnement-css
Futur du-positionnement-css
 
HTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realiteHTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realite
 
Le Futur du positionnement CSS
Le Futur du positionnement CSSLe Futur du positionnement CSS
Le Futur du positionnement CSS
 
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
 
Quiz finalistes
Quiz finalistesQuiz finalistes
Quiz finalistes
 
Quiz
QuizQuiz
Quiz
 
Soyez revolutionnaire, utilisez CSS2 !
Soyez revolutionnaire, utilisez CSS2 !Soyez revolutionnaire, utilisez CSS2 !
Soyez revolutionnaire, utilisez CSS2 !
 
Presentation de la Kiwi Party 2011
Presentation de la Kiwi Party 2011Presentation de la Kiwi Party 2011
Presentation de la Kiwi Party 2011
 
Atelier CSS positionnement (Paris web 2007)
Atelier CSS positionnement (Paris web 2007)Atelier CSS positionnement (Paris web 2007)
Atelier CSS positionnement (Paris web 2007)
 
Jouons un peu avec CSS3 (Kiwiparty avril 2010)
Jouons un peu avec CSS3 (Kiwiparty avril 2010)Jouons un peu avec CSS3 (Kiwiparty avril 2010)
Jouons un peu avec CSS3 (Kiwiparty avril 2010)
 
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
 

Vive les tableaux de mise en page !

  • 1. VIVE LES TABLEAUX DE MISE EN PAGE ! et si la solution était là depuis le début ? Raphaël Goetter ~ Paris Web 2011
  • 2. Au tableau : élève Raphaël Goetter © Dew
  • 3. TABLE(AU) DES MATIERES (hé hé)
  • 4. 1. Les dessous de table = c'est quoi ? 2. Comment noircir le tableau = c'est naze ! 3. Table ronde des alternatives = le reste, c'est mieux ? 4. Faisons table rase du passé 5. Remettons-nous en cell ! = cool des CSS ! 6. Et si on passait à table ? 7. Tables de la Loi = hey ça 8. Des tableaux de maîtres marche ! 9. Encore une ombre au tableau ? = mais c'est naze alors ? 10. Table de chevet
  • 5. QUESTION DU JOUR 1 fétichisme ?
  • 6. QUESTION DU JOUR 2 voisin, voisine
  • 8. LE DESIGN WEB quelles techniques aujourd’hui ? float position: absolute
  • 9. LE DESIGN WEB quelles techniques aujourd’hui ? compatibilité position: relative spacer.gif flux frames bugs <br><br><br> <table> rowspan bidouilles float position: absolute reset marges négatives commentaires clear calques conditionnels colspan hacks frameworks CSS &nbsp;
  • 10. LE DESIGN WEB quelles techniques aujourd’hui ? compatibilité position: relative spacer.gif flux frames bugs <br><br><br> <table> rowspan bidouilles float position: absolute reset marges négatives commentaires clear calques conditionnels colspan hacks frameworks CSS &nbsp;
  • 11. LE DESIGN WEB on ne devrait plus en être là ! En attendant CSS3, et si les tableaux étaient la solution ?
  • 12. LE DESIGN WEB quelles techniques aujourd’hui ? compatibilité position: relative spacer.gif flux frames bugs <br><br><br> <table> rowspan bidouilles float position: absolute reset marges négatives commentaires clear calques conditionnels colspan hacks frameworks CSS &nbsp;
  • 13. DESSOUS DE TABLE en mode « comment ça marche ? »
  • 14. DESSOUS DE TABLE De la naissance à la mise au bûcher 1996 →naissance (3Ko, 54px) 1996 →David Siegel « creating killer web sites » 1997 →spécifications HTML 3.2 1997 →Halelluia ! 2000 →au bûcher !
  • 17. DESSOUS DE TABLE C'est quoi déjà un tableau ?
  • 18. DESSOUS DE TABLE C'est quoi déjà un tableau ? <table> <tr> <td> cellule1 </td> <td> cellule2 </td> <td> cellule3 </td> </tr> </table>
  • 19. DESSOUS DE TABLE C'est quoi déjà un tableau ?
  • 20. DESSOUS DE TABLE Particularités et avantages Blocs alignés parfaitement (sans sortir du flux)
  • 21. DESSOUS DE TABLE Particularités et avantages Hauteurs identiques
  • 22. DESSOUS DE TABLE Particularités et avantages Centrage horizontal et vertical simplissime
  • 23. DESSOUS DE TABLE Particularités et avantages Compatible partout ! (since 1997)
  • 24. NOIRCIR LE TABLEAU les tableaux, c'est mal Un courant de pratique accompagnant les <table> : ● imbrications multiples, ● colspan, rowspan, ● border, bgcolor ● cellspacing, cellpadding, ● <font>, <center>, valign ● spacer.gif, ● etc.
  • 33. NOIRCIR LE TABLEAU les tableaux, c'est mal Mais que leur reproche-t-on au juste ?
  • 34. 1 LOURDS, COMPLEXES imbroglio et soupe de tags au menu
  • 35. 2 PEU FLEXIBLES colonnes et cellules figées
  • 36. 3 PAS ACCESSIBLES suivi impossible sur lecteurs d'écran
  • 37. 4 PAS PERFORMANTS chargement de tout le tableau avant de l'afficher
  • 38. 5 INCONTRÔLABLES les contenus font éclater les cellules
  • 39. 6 PAS SEMANTIQUES c'est pas fait pour ça !
  • 40. 7 ET LES MOBILES ? « le Web mobile a tué les tableaux »
  • 41. 8 BALISES SUPERFLUES <table> et <tr> obligatoires pour bénéficier d'un <td>
  • 42. 9 METHODE OBSOLETE vive le code des années 90 !
  • 43. 1 2 3 4 5 6 7 8 9
  • 44. TABLE RONDE DES ALTERNATIVES les tableaux sont le Mal, alors on fait quoi ? On bidouille !
  • 45. TABLE RONDE DES ALTERNATIVES pas de tableaux ? →on remplace toutes les cellules par des <div> ! ici le site </div> d'une </div> </div> agence web
  • 46. TABLE RONDE DES ALTERNATIVES pas de tableaux ? →… ou par d'autres éléments ici <dl>, <dd>, <dt>
  • 47. TABLE RONDE DES ALTERNATIVES éléments côte à côte ? → float (pas conçu pour ça au départ, alambiqué) Bug Bug Bug Bug Bug Bug Bug Bug ...
  • 48. TABLE RONDE DES ALTERNATIVES hauteurs de colonnes identiques ? →faux-columns (image qui se répète) background.jpg (trèèèès long)
  • 49. TABLE RONDE DES ALTERNATIVES centrage vertical ? <div> obscurs calculs de demi-hauteur (avec JavaScript), + positionnement absolu en % avec marges négatives e=mc²
  • 50. TABLE RONDE DES ALTERNATIVES hauteur 100% avec pied de Xpx en bas ? JavaScript calcul de hauteur CSS3 height : calc(100%- 50px) CSS3 box-sizing : content-box
  • 51. TABLE RONDE DES ALTERNATIVES séparateur (bordure) entre deux blocs ? →Image de fond sur le parent →largeur fixe →CSS3 multicolonnes Lorem Elsass ipsum Spätzle und mollis schnaps id, libero, Hans munster porta suspendisse geht's Strasbourg adipiscing Mauris Heineken gewurztraminer gal Chulien schpeck sit ch'ai libero.
  • 52. MIEUX ? VRAIMENT MIEUX ? faux-columns divite CSS3 marges JavaScript négative s floa t et bugs
  • 53. FAISONS TABLE RASE DU PASSE dans la pratique, les inconvénients des tableaux HTML sont souvent exagérés
  • 54. POSTULAT deux blocs voisins de même hauteur
  • 55. POSTULAT deux blocs voisins de même hauteur → hors du flux float → réorganisation des autres éléments → dépassement du conteneur → propriété clear → ajout d’élément HTML inutile → bugs des navigateurs + création d’une image de fond qui se répète (« faux-column ») → maintenance fastidieuse + largeurs fixes, etc.
  • 56. 1 SOUPE DE TAGS ? ah, on n'est pas obligé d'avoir des tableaux partout dans la page ? <table> <tr> <td>Menu</td> <td>Contenu</td> <tr> </table>
  • 57. 1 SOUPE DE TAGS ? ah, on n'est pas obligé d'avoir des tableaux partout dans la page ? → pas obligé d'imbriquer les éléments → pas obligé de structurer toute la page en tableau → pas obligé d'utiliser colspan / rowspan
  • 58. 2 PEU FLEXIBLES ? mais c'est pas ce qu'on veut  ?
  • 59. 2 PEU FLEXIBLES ? mais c'est pas ce qu'on veut  ? → on souhaite justement deux colonnes indissociables → on cherche justement obtenir les avantages que cela procure
  • 60. 3 PAS ACCESSIBLES ? un tableau « linéarisable » est parfaitement accessible Accessiweb 2.1 : ● ● Le contenu linéarisé reste compréhensible ● ● Soit summary="" soit pas de summary ● ● Le tableau de mise en forme ne doit pas posser de balises caption, th, thead, tfoot ● ●Les cellules du tableau de mise en forme (balise td) ne doivent pas posséder d'attributs scope, headers, colgroup, axis.
  • 61. 4 PAS PERFORMANTS ? table-layout , vous connaissez ? 300 pixels
  • 62. 4 PAS PERFORMANTS ? table-layout , vous connaissez ? 400 pixels
  • 63. 4 PAS PERFORMANTS ? table-layout , vous connaissez ? table { table-layout : fixed ; } 300 pixels
  • 64. 4 PAS PERFORMANTS ? table-layout , vous connaissez ? table { table-layout : fixed ; } → Le moteur de navigateur connaît dès le départ la largeur du tableau et peut l'afficher 6 OK !
  • 65. 5 INCONTRÔLABLES ? table-layout , qu'on vous dit  ! table-layout : fixed → Le conteneur « tableau » n'est plus dépendant de la largeur de ses contenus. Il conserve les dimensions qu'on lui a fixées. YAY.
  • 66. 6 PAS SEMANTIQUES ? c'est pas fait pour ça ! stoo OK, soit. On y reviendra
  • 67. 7 ET LES MOBILES ? iPhone a tué les tableaux HTML OK, soit. On y reviendra
  • 68. 8 BALISES SUPERFLUES ? table, tr, td... c'est trop ! OK, soit. On y reviendra
  • 69. 9 METHODE OBSOLETE ? génération 90's OK, soit. On y reviendra
  • 70. 1 2 3 4 5 6 7 8 9
  • 71. CONCLUSION ? on y gagne sur plusieurs tableaux ! Des inconvénients ? Oui Des avantages ? Oui
  • 72. CONCLUSION ? on y gagne sur plusieurs tableaux ! Je n'ai pas dit...
  • 73. REMETTONS-NOUS EN CELL ! et si la solution était... CSS ?
  • 74. DISPLAY vous connaissez ? block inline none
  • 75. DISPLAY vous connaissez ? inline-block list-item
  • 76. DISPLAY vous connaissez ? table, table-cell, table-row, table-caption, inline-table, table-header-group, table-footer-group, etc.
  • 77. DISPLAY CSS table model <table> … display : table <tr> … display : table-row td>, <th> … display : table-cell <caption> … display : table-caption <thead> … display : table-header-group <tbody> … display : table-row-group <tfoot> … display : table-footer-group <col> … display : table-column <colgroup> … display : table-column-group
  • 78. DISPLAY CSS table model <table> <nav>Menu</nav> <tr> <article>Contenu</article> <td>Menu</td> <td>Contenu</td> nav, article { <tr> display : table-cell ; </table> }
  • 79. DISPLAY CSS table model Séparation fond-forme o/
  • 80. DEMOS Vive les tableaux de mise en page ! 1- Hauteurs de frères identiques 2- Alignement vertical 3- Site de 100% de haut avec pied de page de hauteur fixe 4- Répartition de la largeur restante 5- Répartition de la hauteur restante 6- Menu de navigation
  • 81. DEMOS Vive les tableaux de mise en page ! Bonus : Apple !
  • 82. DEMOS Vive les tableaux de mise en page ! Bonus : Apple !
  • 83. DISPLAY CSS table model 6- pas sémantique -> [résolu] 7- impossible de gérer plusieurs médias -> [résolu] 8- balises superflues -> [résolu] 9- obsolescence de la méthode -> [résolu]
  • 84. 1 2 3 4 5 6 7 8 9
  • 85. ET SI ON PASSAIT A TABLE ? compatibilités navigateurs
  • 86. ET SI ON PASSAIT A TABLE ? compatibilités navigateurs OK
  • 87. ET SI ON PASSAIT A TABLE ? compatibilités navigateurs OK OK
  • 88. ET SI ON PASSAIT A TABLE ? compatibilités navigateurs OK OK OK
  • 89. ET SI ON PASSAIT A TABLE ? compatibilités navigateurs OK OK OK OK
  • 90. ET SI ON PASSAIT A TABLE ? compatibilités navigateurs OK OK OK OK OK euh oui enfin... à partir de IE8
  • 91. ET SI ON PASSAIT A TABLE ? compatibilités navigateurs IE6+IE7 →8%
  • 92. ET SI ON PASSAIT A TABLE ? compatibilités navigateurs IE6+IE7 →6%
  • 93. ET SI ON PASSAIT A TABLE ? compatibilités navigateurs CSS2 Table display (caniuse.com)
  • 94. ET SI ON PASSAIT A TABLE ? compatibilités navigateurs CSS3 Flexible box layout (caniuse.com)
  • 95. ET SI ON PASSAIT A TABLE ? compatibilités navigateurs CSS3 Grid Layout (caniuse.com)
  • 96. ET SI ON PASSAIT A TABLE ? compatibilités navigateurs Fallback : display-table.htc (2ko)
  • 97. TABLES DE LA LOI anges et démos
  • 98. TABLES DE LA LOI anges et démos 1. les colonnes sont parfaites et toujours de même longueur, sans besoin de bidouilles, 2. les éléments alentours ne nécessitent pas de traitement de faveur (clear ou autre), puisque tout demeure dans le flux courant, 3. la gestion des alignements verticaux, notamment du centrage, devient élémentaire, 4. la fluidité des blocs est innée : finie le casse-tête du pied de page toujours collé en bas quelle que soit la longueur de la page, ou les éléments devant occuper toute la hauteur de page moins X pixels, 5. il est même envisageable de réordonner du contenu et de passer visuellement un élément prioritairement à d’autres en jouant avec la valeur table-caption
  • 99. TABLEAUX DE MAÎTRES pour aller encore plus loin
  • 100. TABLEAUX DE MAÎTRES pour aller encore plus loin → table-layout : remettez-vous en cell (démo) → border-collapse : surveillez votre tableau de bord (démo) → border-spacing (ex- cellspacing) (démo) 2 valeurs possibles → empty-cells / :empty : débarrassez-vous des cellules mortes (démo) → lignes paires impaires (nth-child) (démo) → Styler des colonnes : col, nth-child ou th+td+td → Jouer avec table-caption : Réordonnement des blocs (aussi avec table-header-group et table-footer-group) : pensez aux dessous de table (démo)
  • 101. ENCORE UNE OMBRE AU TABLEAU dérives et excès Full tableaux tableaux imbriqués colspan, rowspan etc.
  • 102. ENCORE UNE OMBRE AU TABLEAU dérives et excès
  • 103. ENCORE UNE OMBRE AU TABLEAU lacunes Pas de padding sur les éléments en table-row, table-row-group, table- header-group, table-footer-group, table-column-group et table-column.
  • 104. ENCORE UNE OMBRE AU TABLEAU lacunes Pas de padding sur les éléments en table-row, table-row-group, table- header-group, table-footer-group, table-column-group et table-column. Autres lacunes de table-row : pas de position, width, min/max-width, min/max-height, vertical-align, border, padding, margin, overflow
  • 105. ENCORE UNE OMBRE AU TABLEAU lacunes Pas de padding sur les éléments en table-row, table-row-group, table- header-group, table-footer-group, table-column-group et table-column. Autres lacunes de table-row : pas de position, width, min/max-width, min/max-height, vertical-align, border, padding, margin, overflow table-caption : 1 seul par tableau
  • 106. ENCORE UNE OMBRE AU TABLEAU lacunes Pas de padding sur les éléments en table-row, table-row-group, table- header-group, table-footer-group, table-column-group et table-column. Autres lacunes de table-row : pas de position, width, min/max-width, min/max-height, vertical-align, border, padding, margin, overflow table-caption : 1 seul par tableau positionnement absolu impossible directement au sein d'un table-cell
  • 107. TABLE DE CHEVET l'indispensable « Everything you know about CSS is wrong ! » Rachel Andrew & Kevin Yank Sitepoint 1998 ISBN-13: 978-0980455229
  • 108. MERCI ! « In Vino Veri Table » Raphaël Goetter www.alsacreations.com www.goetter.fr www.ie7nomore.com twitter : @goetter PS : attention aux excès de table