Maison > Article > interface Web > Comparaison de la disposition Div et de la disposition des tableaux en HTML

Comparaison de la disposition Div et de la disposition des tableaux en HTML

WBOYavant: 2023-09-08 14:13:021544parcourir

En HTML, la mise en page définit la structure de base et l'apparence d'un site Web. La mise en page HTML est un modèle qui nous montre comment les éléments HTML sont disposés dans une page Web. Il vous offre la possibilité de créer des pages Web à l'aide de simples balises HTML.

Mise en page DIV

La mise en page Div est la mise en page la plus courante en HTML, basée sur l'élément. Les éléments HTML sont utilisés pour définir des sections d'un document. Une balise est une balise conteneur, c'est-à-dire qu'elle possède une balise de début et une balise de fin.

Nous pouvons définir plusieurs éléments dans un document HTML, et chaque élément peut être utilisé pour afficher un ensemble d'informations différent. À l'intérieur de l'élément, nous pouvons utiliser plusieurs éléments HTML tels que paragpraph(

), head(

), span(), etc. Nous pouvons regrouper tous les éléments HTML des balises et leur appliquer du CSS pour les rendre plus faciles à comprendre et à rendre.

Exemple

Ce qui suit est un exemple de disposition div

<html>
<head>
   <style>
      h2,p {
         border: 2px;
         background-color: lightblue;
         text-align: center;
      }
   </style>
</head>
<body>
   <div>
      <h2>Introduction to Div tag</h2>
      <p>Div tag is the most commonly used tag for creating layout in HTML.</p>
   </div>
</body>
</html>

Mise en page de la table

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

. L'élément

fournit une fonctionnalité permettant d'organiser les données sous forme de lignes et de colonnes. La balise

est également une balise conteneur, c'est-à-dire qu'elle possède une balise de début et une balise de fin. Dans l'élément

, nous pouvons utiliser plusieurs éléments HTML, mais trois balises méta sont nécessaires pour organiser les données dans un tableau. La première est la balise qui représente une ligne du tableau et ajoute une nouvelle ligne dans le tableau.

La seconde est la balise

, qui représente le titre du tableau, qui stocke le titre du tableau. Le dernier est	, qui correspond aux données du tableau, qui stocke les informations ou les données du tableau. Exemple <!DOCTYPE html> <html> <style> table, th, td { border:1px solid black; } </style> <body> <table> <tr> <th>This contains heading of the Table</th> </tr> <tr> <td>This tag contains the data to be shown by the table.</td> </tr> <tr> <p> we can use html elements inside table tag and we can also have multiple table row and table data in a table.</p> </tr> </table> </body> </html> Disposition des tables DIV VS Voici les différences entre DIV et la disposition des tables – Taille de la page - En cas de mise en page Div, nous avons une balise qui contient uniquement des éléments HTML et nous pouvons définir leurs styles dans un seul fichier CSS alors qu'en cas de mise en page en tableau, nous avons th, td, tr et plusieurs éléments, chacun avec son propre style individuel, augmentera la taille globale de la page. Rendu de page - Le rendu de page est le temps qu'il faut au navigateur pour afficher le contenu d'une page Web. Dans le cas d'une mise en page div, le navigateur ne recherche pas la balise de fermeture, tandis que dans le cas d'une mise en page en tableau, le navigateur n'affiche le contenu de la page qu'une fois la fin de atteinte. Par conséquent, la vitesse de rendu des pages de la mise en page de table est plus lente que celle de la mise en page div. Maintenance - La mise en page Div nous offre la possibilité de modifier facilement la conception Web actuelle en changeant simplement le CSS, alors que modifier la conception actuelle dans la mise en page de tableau est difficile car nous devons changer le code. Cohérence - Dans la mise en page div, nous n'avons pas besoin de suivre un modèle d'élément HTML pour obtenir la cohérence dans la page Web, mais si nous manquons un élément comme une ligne de tableau, alors dans la mise en page du tableau, l'en-tête du tableau, les données du tableau, alors la structure de l'ensemble du contenu changera et perdra sa cohérence. Recommandation - Il est fortement recommandé d'utiliser la disposition div pour créer des pages Web car les données à l'intérieur des balises div sont séparées de manière appropriée, ce qui permet aux robots de la page Web d'agir rapidement, alors que les éléments HTML supplémentaires dans le tableau la mise en page augmentera le temps de rendu de la page. Flexibilité - La flexibilité est l'un des facteurs importants que nous utilisons pour mesurer les performances d'un site Web. Il nous indique si notre site Internet est capable d’afficher le même contenu de la même manière sur différents appareils. Dans le cas de la disposition du tableau, nous devons fournir une largeur spécifique au tableau, ce qui rend le tableau inflexible et vous ne pouvez voir le contenu que là où la taille de l'écran correspond à la largeur du tableau. Mais pour la mise en page div, la flexibilité n'est pas un problème car elle peut être résolue à l'aide de propriétés CSS qui lui permettront de s'adapter à différentes tailles d'écran. Conclusion En résumé, la disposition des div et la disposition des tables ont chacune leurs propres avantages et inconvénients. Les mises en page basées sur des divisions sont plus flexibles que les mises en page basées sur des tableaux, mais nécessitent plus de compétences en codage pour leur création et leur maintenance. Les tableaux, en revanche, sont plus faciles à apprendre pour les débutants et peuvent être utilisés pour des mises en page complexes qui nécessiteraient autrement beaucoup de code supplémentaire avec des div. En fin de compte, l’approche la mieux adaptée à vos besoins dépend de ce que vous souhaitez réaliser avec la conception de votre site Web.

, qui représente le titre du tableau, qui stocke le titre du tableau. Le dernier est

, qui correspond aux données du tableau, qui stocke les informations ou les données du tableau.

Exemple

<!DOCTYPE html>
<html>
   <style>
      table, th, td {
         border:1px solid black;
      }
   </style>
<body>
   <table>
      <tr>
         <th>This contains heading of the Table</th>
      </tr>
      <tr>
         <td>This tag contains the data to be shown by the table.</td>
      </tr>
      <tr>
         <p> we can use html elements inside table tag and we can also have multiple table row and table data in a table.</p>
      </tr>
   </table>
</body>
</html>

Disposition des tables DIV VS

Voici les différences entre DIV et la disposition des tables –

Taille de la page - En cas de mise en page Div, nous avons une balise
qui contient uniquement des éléments HTML et nous pouvons définir leurs styles dans un seul fichier CSS alors qu'en cas de mise en page en tableau, nous avons th, td, tr et plusieurs éléments, chacun avec son propre style individuel, augmentera la taille globale de la page.
Rendu de page - Le rendu de page est le temps qu'il faut au navigateur pour afficher le contenu d'une page Web. Dans le cas d'une mise en page div, le navigateur ne recherche pas la balise de fermeture, tandis que dans le cas d'une mise en page en tableau, le navigateur n'affiche le contenu de la page qu'une fois la fin de atteinte. Par conséquent, la vitesse de rendu des pages de la mise en page de table est plus lente que celle de la mise en page div.
Maintenance - La mise en page Div nous offre la possibilité de modifier facilement la conception Web actuelle en changeant simplement le CSS, alors que modifier la conception actuelle dans la mise en page de tableau est difficile car nous devons changer le code.
Cohérence - Dans la mise en page div, nous n'avons pas besoin de suivre un modèle d'élément HTML pour obtenir la cohérence dans la page Web, mais si nous manquons un élément comme une ligne de tableau, alors dans la mise en page du tableau, l'en-tête du tableau, les données du tableau, alors la structure de l'ensemble du contenu changera et perdra sa cohérence.
Recommandation - Il est fortement recommandé d'utiliser la disposition div pour créer des pages Web car les données à l'intérieur des balises div sont séparées de manière appropriée, ce qui permet aux robots de la page Web d'agir rapidement, alors que les éléments HTML supplémentaires dans le tableau la mise en page augmentera le temps de rendu de la page.
Flexibilité - La flexibilité est l'un des facteurs importants que nous utilisons pour mesurer les performances d'un site Web. Il nous indique si notre site Internet est capable d’afficher le même contenu de la même manière sur différents appareils.

Dans le cas de la disposition du tableau, nous devons fournir une largeur spécifique au tableau, ce qui rend le tableau inflexible et vous ne pouvez voir le contenu que là où la taille de l'écran correspond à la largeur du tableau. Mais pour la mise en page div, la flexibilité n'est pas un problème car elle peut être résolue à l'aide de propriétés CSS qui lui permettront de s'adapter à différentes tailles d'écran.

Conclusion

En résumé, la disposition des div et la disposition des tables ont chacune leurs propres avantages et inconvénients. Les mises en page basées sur des divisions sont plus flexibles que les mises en page basées sur des tableaux, mais nécessitent plus de compétences en codage pour leur création et leur maintenance. Les tableaux, en revanche, sont plus faciles à apprendre pour les débutants et peuvent être utilisés pour des mises en page complexes qui nécessiteraient autrement beaucoup de code supplémentaire avec des div. En fin de compte, l’approche la mieux adaptée à vos besoins dépend de ce que vous souhaitez réaliser avec la conception 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!

css html table td tr th

Déclaration：

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

Article précédent：En JavaScript, quel est le but de l’événement onpageshow ?Article suivant：En JavaScript, quel est le but de l’événement onpageshow ?

Articles Liés

Voir plus