Maison  >  Article  >  interface Web  >  Pourquoi ne devrions-nous pas utiliser des tableaux pour la mise en page HTML ?

Pourquoi ne devrions-nous pas utiliser des tableaux pour la mise en page HTML ?

WBOY
WBOYavant
2023-09-04 18:25:06583parcourir

Pourquoi ne devrions-nous pas utiliser des tableaux pour la mise en page HTML ?

Dans cet article, nous discuterons de la disposition des tables et de ses fonctionnalités. Nous apprendrons pourquoi la disposition en tableau est la disposition la moins utilisée en HTML et pourquoi ce n'est pas une disposition recommandée lors de la conception de sites Web.

La mise en page en HTML spécifie l'organisation de base et le style visuel d'un site Web. La mise en page HTML d'un site Web sert de guide sur la façon de placer les éléments HTML. Il vous permet de créer un site Web à l'aide de balises HTML de base.

Mise en page de la table

En raison de sa complexité, la mise en page des tableaux est l'une des mises en page les moins recommandées en HTML. Comme son nom l’indique, il est basé sur l’élément

. L'élément
fournit une fonctionnalité permettant de définir les données par lignes et colonnes. La balise

agit à la fois comme une balise de début et de fin, ce qui en fait une balise de conteneur. Bien que trois balises méta soient nécessaires pour organiser les données dans un tableau, nous pouvons utiliser plusieurs éléments HTML au sein d'un seul élément.

Le premier ajoute une nouvelle ligne au tableau en utilisant la balise

, qui signifie "ligne du tableau". La seconde est la balise
, qui représente le titre du tableau et stocke le titre du tableau. Le dernier est , qui correspond aux données du tableau, pour obtenir les informations qui doivent être stockées dans le tableau.

Exemple

L'exemple suivant crée un tableau contenant une seule ligne.

<!DOCTYPE html>
<html>
   <style>
      table, th, td {
         border:1px solid black;
      }
   </style>
   <body>
      <table>
         <tr>
            <th>This tag defines the heading of the table</th>
         </tr>
         <tr>
            <td>This tag gets the information to be stores in the rows and columns </td>
            <p> HTML components can be used inside table tags, and tables can include number of table rows and table data.</p>
         </tr>
      </table>
   </body>
</html>

Exemple

L'exemple suivant crée un tableau avec plusieurs lignes -

<!DOCTYPE html>
<html>
   <style>
      table, th, td {
         border:1px solid black;
      }
   </style>
   <body>
      <table style width=40%>
         <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Roll</th>
         </tr>
         <tr>
            <td>Rama</td>
            <td>17</td>
            <td>1001</td>
         </tr>
         <tr>
            <td>Radha</td>
            <td>18</td>
            <td>1002</td>
         </tr>
      </table>
   </body>
</html>

Pourquoi nous ne devrions pas utiliser de tableaux pour la mise en page HTML

Voici quelques raisons pour lesquelles il n'est pas recommandé d'utiliser des tableaux pour la mise en page HTML -

  • Lorsque nous ouvrons un document HTML dans un navigateur Web, les moteurs de recherche commencent à lire le document HTML. Dès qu'il lit le code HTML, il commence à afficher le contenu Web. Mais il est difficile pour les moteurs de recherche d'afficher la disposition des tableaux car ils doivent attendre la balise de fermeture

, il faut donc plus de temps pour afficher une page Web avec une disposition des tableaux.
  • La disposition des tableaux gêne le référencement. Lorsque nous créons un tableau HTML, nous devons d'abord définir tous les éléments nécessaires du tableau, tels que les lignes du tableau, l'en-tête du tableau et les données du tableau. Si nous souhaitons ajouter un autre élément HTML dans le tableau, il sera rendu en dernier selon le processus de rendu. Disons donc que si nous voulons ajouter une barre de navigation alors elle apparaîtra à la fin du tableau. Cela rend le contenu de la page Web encombré.

  • Si vous utilisez HTML4.01, vous ne pouvez pas utiliser la disposition des tableaux car elle vous permet uniquement d'utiliser des tableaux simples pour afficher des informations tabulaires. C'est pourquoi nous utilisons principalement HTML5 au lieu de HTML4.

  • Vous ne pouvez pas utiliser de tableaux imbriqués dans une disposition de tableau car cela rendra la maintenance du tableau plus complexe. Si vous créez des tableaux imbriqués et qu'après quelques jours vous devez apporter des modifications aux données, vous devez alors parcourir l'intégralité des données, ce qui prend du temps et est un processus complexe.

  • Une autre raison de ne pas utiliser de tableaux pour la mise en page HTML est sa flexibilité. Lors de la création d'un tableau, vous devez lui donner une largeur spécifiée, le tableau mettra alors plus de temps à se charger sur des écrans de largeurs différentes. Dans ce cas, votre table semble correcte sur l'écran d'un ordinateur portable, mais lorsque vous la chargez sur un autre appareil comme un téléphone ou un moniteur, elle ne s'adapte pas à la taille d'écran appropriée de l'appareil.

  • La taille de la page joue un rôle important dans le choix de la mise en page du site Web, car plus la taille de la page est petite, moins il faut de temps au navigateur pour afficher la page. Dans le cas d'une mise en page de tableau, nous devons définir trois balises méta, sans ces balises le tableau n'affichera pas correctement les données. On peut également ajouter plus d'éléments HTML, mais ces trois éléments doivent être présents, ce qui augmente globalement la taille de la page.

  • Conclusion

    Dans cet article, nous avons discuté de la disposition des tableaux et de ses propriétés. Nous avons brièvement discuté d'un certain nombre de points concernant la disposition des tableaux, qui, tous combinés, suffisent à démontrer pourquoi la disposition des tableaux n'est pas la disposition HTML recommandée à utiliser lors de la conception d'un site Web. En discutant de tous ces points, nous avons comparé la disposition des tableaux avec la disposition Div.

    La mise en page Div est la mise en page HTML la plus couramment utilisée et est fortement recommandée en raison de ses propriétés. Essayez de garder tous les points ci-dessus à l’esprit lorsque vous choisissez une mise en page HTML pour votre site Web. À titre de recommandation, nous vous recommandons d'utiliser la mise en page Div si elle répond aux exigences de votre site Web.

    Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

    Déclaration:
    Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer