Ce document date de 2011 et aborde l'utilisation des tableaux dans le design web, discutant à la fois de leurs inconvénients et de leurs avantages. Il propose également des alternatives modernes basées sur le CSS, tout en soulignant les évolutions qui rendent les tableaux moins nécessaires dans la conception actuelle. Finalement, il encourage à réfléchir à l'adoption de solutions plus adaptées aux standards contemporains du web.

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

7. AVOUEZ !
« tableau, c'est le Mal ! »

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 !

15. DESSOUS DE TABLE
1997

16. DESSOUS DE TABLE
2000

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.

25. les tableaux, c'est mal (1)

26. les tableaux, c'est mal (2)

27. les tableaux, c'est mal (3)

28. les tableaux, c'est mal (4)

29. les tableaux, c'est mal (5)

30. les tableaux, c'est mal (6)

31. les tableaux, c'est mal (7)

32. les tableaux, c'est mal (8)

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