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

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?

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?

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.

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

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.

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.

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.