Table des matières
Mise en page DIV
Exemple
Introduction to Div tag
Mise en page de la table
Disposition des tables DIV VS
Conclusion
Maison interface Web tutoriel HTML 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

Sep 08, 2023 pm 02:13 PM
对比 disposition du tableau disposition div

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

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 id="Introduction-to-Div-tag">Introduction to Div tag</h2>
      <p>Div tag is the most commonly used tag for creating layout in HTML.</p>
   </div>
</body>
</html>
Copier après la connexion

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>
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comparaison approfondie : Vivox100 ou Vivox100Pro, lequel vaut le plus la peine d'être acheté ? Comparaison approfondie : Vivox100 ou Vivox100Pro, lequel vaut le plus la peine d'être acheté ? Mar 22, 2024 pm 02:06 PM

Sur le marché actuel des smartphones, les consommateurs sont confrontés à de plus en plus de choix. Avec le développement continu de la technologie, les fabricants de téléphones mobiles ont lancé de plus en plus de modèles et de styles, parmi lesquels Vivox100 et Vivox100Pro sont sans aucun doute deux produits qui ont attiré beaucoup d'attention. Les deux téléphones mobiles proviennent de la célèbre marque Vivox, mais ils présentent certaines différences en termes de fonctions, de performances et de prix. Alors face à ces deux téléphones mobiles, lequel vaut le plus la peine d'être acheté ? Il existe des différences évidentes dans la conception de l'apparence entre Vivox100 et Vivox100Pro.

Lequel a le plus de potentiel, la pièce SOL ou la pièce BCH ? Quelle est la différence entre la pièce SOL et la pièce BCH ? Lequel a le plus de potentiel, la pièce SOL ou la pièce BCH ? Quelle est la différence entre la pièce SOL et la pièce BCH ? Apr 25, 2024 am 09:07 AM

Actuellement, les pièces potentielles favorisées par le cercle monétaire incluent la pièce SOL et la pièce BCH. SOL est le jeton natif de la plate-forme blockchain Solana. BCH est le jeton du projet BitcoinCash, qui est une monnaie fork de Bitcoin. Parce qu'ils ont des caractéristiques techniques, des scénarios d'application et des orientations de développement différents, il est difficile pour les investisseurs de faire un choix entre les deux. J'aimerais analyser lequel a le plus de potentiel, la monnaie SOL ou le BCH ? Investissez à nouveau. Cependant, la comparaison des devises nécessite une analyse complète basée sur le marché, les perspectives de développement, la solidité du projet, etc. Ensuite, l'éditeur vous le dira en détail. Lequel a le plus de potentiel, la pièce SOL ou le BCH ? En comparaison, la pièce SOL a plus de potentiel. Déterminer laquelle a le plus de potentiel, la pièce SOL ou BCH, est une question compliquée car elle dépend de nombreux facteurs.

Comparaison des performances de Windows 10 et Windows 11 : lequel est le meilleur ? Comparaison des performances de Windows 10 et Windows 11 : lequel est le meilleur ? Mar 28, 2024 am 09:00 AM

Comparaison des performances de Windows 10 et Windows 11 : lequel est le meilleur ? Avec le développement et les progrès continus de la technologie, les systèmes d’exploitation sont constamment mis à jour et mis à niveau. En tant que l'un des plus grands développeurs de systèmes d'exploitation au monde, la série de systèmes d'exploitation Windows de Microsoft a toujours attiré beaucoup d'attention de la part des utilisateurs. En 2021, Microsoft a lancé le système d’exploitation Windows 11, ce qui a suscité de nombreuses discussions et attentions. Alors, quelle est la différence de performances entre Windows 10 et Windows 11 ?

Comparaison des box TV Huawei, ZTE, Tmall et Xiaomi Comparaison des box TV Huawei, ZTE, Tmall et Xiaomi Feb 02, 2024 pm 04:42 PM

Les box TV, en tant qu'appareil important qui connecte Internet et la télévision, sont devenues de plus en plus populaires ces dernières années. Avec la popularité des téléviseurs intelligents, les consommateurs privilégient de plus en plus les marques de boîtiers TV telles que Tmall, Xiaomi, ZTE et Huawei. Afin d’aider les lecteurs à choisir le boîtier TV qui leur convient le mieux, cet article proposera une comparaison approfondie des caractéristiques et des avantages de ces quatre boîtiers TV. 1. Huawei TV Box : L'expérience audiovisuelle intelligente est excellente et peut offrir une expérience visuelle fluide. Huawei TV Box dispose d'un processeur puissant et d'une qualité d'image haute définition. Tels que la vidéo en ligne et les applications riches intégrées, la musique et les jeux, etc., il prend en charge une variété de formats audio et vidéo. Le boîtier TV Huawei dispose également d'une fonction de commande vocale, ce qui rend l'utilisation plus pratique. Vous pouvez facilement diffuser le contenu de votre téléphone mobile sur l'écran du téléviseur. Sa diffusion en un clic.

Mar 22, 2024 pm 02:33 PM

Évaluation comparative de Vivox100 et Vivox100Pro : Lequel préférez-vous ? À mesure que les smartphones deviennent de plus en plus populaires et puissants, la demande d'accessoires de téléphonie mobile augmente également. En tant qu'élément indispensable des accessoires de téléphonie mobile, les écouteurs jouent un rôle important dans la vie quotidienne et au travail des gens. Parmi les nombreuses marques de casques, Vivox100 et Vivox100Pro sont deux produits qui ont beaucoup retenu l'attention. Aujourd'hui, nous allons procéder à une évaluation comparative détaillée de ces deux écouteurs pour voir leurs avantages et inconvénients.

Comparaison des performances et avantages et inconvénients du langage Go et d'autres langages de programmation Comparaison des performances et avantages et inconvénients du langage Go et d'autres langages de programmation Mar 07, 2024 pm 12:54 PM

Titre : Comparaison des performances, avantages et inconvénients du langage Go et d'autres langages de programmation Avec le développement continu de la technologie informatique, le choix du langage de programmation devient de plus en plus critique, parmi lesquels les performances sont une considération importante. Cet article prendra le langage Go comme exemple pour comparer ses performances avec d'autres langages de programmation courants et analyser leurs avantages et inconvénients respectifs. 1. Présentation du langage Go Le langage Go est un langage de programmation open source développé par Google. Il présente les caractéristiques d'une compilation rapide, d'une concurrence efficace, d'une concision et d'une lisibilité aisée. Il convient au développement de services réseau, de systèmes distribués, de cloud computing et de technologies de pointe. d'autres domaines. Aller

Le Dimensity 6020 surpasse-t-il le processeur Snapdragon en comparaison ? Le Dimensity 6020 surpasse-t-il le processeur Snapdragon en comparaison ? Mar 18, 2024 pm 12:36 PM

Le Dimensity 6020 surpasse-t-il le processeur Snapdragon en comparaison ? Avec le développement continu du marché des smartphones, les processeurs, en tant qu'élément clé des performances des téléphones mobiles, ont toujours attiré beaucoup d'attention. Parmi les nombreux processeurs, Huawei Kirin et Qualcomm Snapdragon ont toujours été les marques les plus populaires. Récemment, Huawei a lancé une nouvelle génération de processeur Kirin Dimensity 6020, qui a suscité une large attention et une controverse. Alors, le Dimensity 6020 surpasse-t-il le processeur Snapdragon en comparaison ? Les processeurs Snapdragon ont toujours été connus pour leurs performances puissantes et leur excellent contrôle de la consommation d'énergie, et sont devenus le premier choix de nombreux fabricants de téléphones mobiles.

Quel niveau de carte graphique est équivalent à la 4060 ? Quel niveau de carte graphique est équivalent à la 4060 ? Feb 18, 2024 am 10:40 AM

À quel niveau est équivalente la carte graphique 4060 ? Avec l'avancement continu de la technologie et la mise à jour rapide des équipements électroniques, la technologie des cartes graphiques se développe et se développe également constamment. Dans le domaine informatique, les cartes graphiques constituent non seulement un élément important des jeux et des fichiers multimédias, mais jouent également un rôle essentiel dans le traitement graphique, le montage vidéo et la conception professionnelle. Il est donc particulièrement important de choisir une carte graphique adaptée à vos besoins et à vos performances. Ces dernières années, NVIDIA est devenue l'une des marques de cartes graphiques les plus populaires sur le marché, avec une gamme complète de produits couvrant de nombreux niveaux de performances différents. Et 4060

See all articles