Pourquoi ne sommes-nous pas supposés utiliser <table> dans un design?

41

Quelles sont certaines des raisons claires et logiques pour lesquelles nous ne devrions pas concevoir de sites Web avec des tableaux? Où sont les avantages, qu'est-ce qui a motivé cette idée dans l'industrie? Quand est-il possible d'utiliser une table?

— Incognito
source

Vivement discuté sur SO stackoverflow.com/questions/83073/…

— Gabriele Petrioli

Google utilise les tableaux eux-mêmes, dans Adwords par exemple. Avec des millions d'annonceurs qui se connectent et travaillent avec des données dynamiques, il est beaucoup plus facile de coder autour d'une <table>grille CSS. J'utilise datatables.net pour quelques applications et vous pouvez voir une liste de ceux qui utilisent ce plugin jquery sur leur site. Beaucoup de sites utilisent encore des tableaux pour de bonnes raisons. J'utilise uniquement des tableaux lorsque je travaille avec beaucoup de données dynamiques qui doivent être triées par pagination de colonnes, etc.

— Anagio

71

1) Les tableaux ne doivent pas être utilisés pour les mises en page car ils sont:

Lent à rendre car le navigateur doit télécharger la plupart - sinon la totalité - du tableau pour le rendre correctement
Ils nécessitent plus de HTML que les dispositions non-table, ce qui signifie un chargement et un rendu plus lents, ainsi qu'une utilisation accrue de la bande passante.
Ils peuvent être un cauchemar à entretenir car ils peuvent rapidement devenir complexes
Ils peuvent casser la copie de texte
Ils affectent négativement les lecteurs d’écran et peuvent rendre votre contenu inaccessible à certains utilisateurs.
Ils ne sont pas aussi souples que d'utiliser un balisage sémantique approprié
Ils n'ont jamais été destinés à être utilisés pour la mise en page
Il est très difficile de contrôler les tableaux en un format réactif.

2) Utilisez un tableau pour les données tabulaires. C'est à quoi servent les tables.

Voir aussi: Pourquoi les gens font-ils des tables avec des divs?

— John Conde
source

1

Bien, donc si j’ai une section sur les détails du contact, il est acceptable d’avoir un tableau, mais la présentation graphique d’une page est en DIV ou quelque chose de similaire pour eux. J'ai vu certains concepteurs les éviter tous ensemble dans des zones contenant des données tabulaires et utilisant des DIV.

— Incognito

18

Les concepteurs qui évitent complètement les tables ne savent pas ce qu'ils font. Ils ont mal compris ce que "n'utilise pas de tableaux pour la mise en page" signifie.

— John Conde

1

Il est stupide d'éviter complètement les tableaux, mais il existe des alternatives légitimes aux tableaux pour les informations de contact. Une liste de définitions est une bonne alternative, en particulier lors de la mise en oeuvre d'une hCard: cagintranet.com/archive/…

— Lèse majesté

2

@Litso: Vous devriez lire les spécifications du W3C DLavant de décider en quoi c'est bon ou pas.

— Lèse majesté

1

Il existe également une balise CSS position: table pour créer des mises en forme basées sur des tables sans les mettre en HTML. Il existe quelques cas de niche dans lesquels les tables constituent toujours la meilleure option / la plus simple pour les dispositions. Jetez un coup d'oeil @ css-tricks.com/fluid-width-equal-height-columns pour voir ce que je veux dire.

— Evan Plaice

8

Les tableaux sont destinés aux données tabulaires et non à la conception. Les gens comprennent souvent mal la motivation derrière la création de pages "sans tableau".

Il est faux d'utiliser des tableaux pour créer votre mise en page. Vous devez utiliser d’autres éléments pour la mise en page (div, listes, sections, articles, en-têtes, pieds de page, apartements, etc.). Et vous pouvez obtenir d'excellents effets avec un minimum de HTML / CSS (laissant votre code sémantiquement significatif, léger et facile à gérer).

Bien sûr, les données tabulaires doivent être à l'intérieur d'un élément de table. Si vous le souhaitez, vous pouvez améliorer même la sémantique des tableaux en ajoutant thead, tfoot, tbody, th, th, caption, etc. Tous ces éléments sont destinés à être utilisés avec des tableaux et, croyez-moi, ils peuvent rendre votre tableau beaucoup plus descriptif. .

Donc, le problème est que vous n'allez pas avec une conception basée sur des tables et utilisez n'importe quelle solution HTML / CSS qui vous convient. Commencez à partir du balisage sémantique HTML, puis construisez une conception avec CSS. Cela devrait garder quelqu'un en sécurité. Utilisez ceci comme une règle de base.

— Dave
source

3

Les tableaux sont supposés contenir des données et non des éléments de conception.

— sdadffdfd
source

3

Les tableaux ne doivent être utilisés que lors de l'affichage de données tabulaires. Sinon, ils sont généralement un mauvais choix pour l'affichage.

— Chris Ballance
source

Pourquoi le vote négatif?

— Chris Ballance

0

La vraie cause pour ne pas utiliser de tables est:

La disposition par défaut d'une table est la suivante: table-layout:fixed

Cela indique au navigateur d'analyser la table et de fixer les cellules afin qu'elles contiennent les éléments qu'elles contiennent, ce qui prend un certain temps. (c'est pourquoi les tables sont si bonnes pour des données complexes)

Ligne de fond: la table sera rendue une fois que tout le contenu sera rendu, contrairement à l'utilisation d'éléments DIV, par exemple.

— YardenST
source

-3

J'utilise des tableaux pour la structure de conception Web dans un mélange de liquides et de fixes, et je sais que beaucoup disent que les tableaux sont pour noobs, d'autres disent qu'ils sont pour les vieux élèves. autre chose.

Quoi de mieux un <br>ou un <p></p>? La même chose

Mes anciennes tables de ma nouvelle conception Web de 2015 et moi-même pouvons donner des coups de fouet à tout le monde avec mon mobile convivial 100% largeur mélangé avec 2 colonnes latérales de 200 pixels chacune.

De toute évidence, à l’intérieur des tables, il est moche de mettre de plus en plus de tables, c’est là que DIVS est utile. Les tables peuvent faire des choses que les divs ne peuvent pas et les divs peuvent faire des choses que les tables ne peuvent pas.

Ceux qui disent que la mise en page par défaut est fixe? Je te donne un exemple

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200">left</td>
    <td width="100%">middle</td>
    <td width="200">right</td>
  </tr>
</table>

Voyez-vous le potentiel maintenant? Jetez un coup d'oeil sur le PC et le téléphone portable. Ah ouais et je n'ai même pas besoin de bootstrap.

Maintenant, pour faire la même chose avec les div, vous devez écrire beaucoup de code CSS pour afficher align float et crap. Qui a écrit moins de code? Moi! De quoi les clients ont-ils besoin? Un mec terminant une page dans 1 an ou dans 1 mois?

Améliorons maintenant le design avec les divs

<div style="width:100%; min-width:1000px; height:200px;">top menu or nav</div>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200">left</td>
    <td width="100%">middle</td>
    <td width="200">right</td>
  </tr>
</table>
<div style="width:100%; min-width:1000px; height:200px;">top menu or nav</div>

Tellement beau une disposition de conception de 5 colonnes utilisant des div et des tables

Votre réponse est la suivante: ensemble, ils fonctionnent mieux, ils sont plus rapides et le résultat est beau, même sur les téléviseurs et les petits téléphones portables.

— Rodrigo Santiaborg
source