Comment créer une mise en page de tableau réactive en utilisant HTML et CSS

Comment créer une mise en page de tableau réactif à l'aide de HTML et CSS

HTML est un langage de balisage utilisé pour créer la structure des pages Web, tandis que CSS est utilisé pour styliser et mettre en page les pages Web. Dans la conception Web, les tableaux sont un élément couramment utilisé pour présenter les données sous forme de tableau. Cet article explique comment utiliser HTML et CSS pour créer une mise en page de tableau réactive et fournit des exemples de code spécifiques.

Tout d'abord, nous devons créer un document HTML et utiliser la balise pour définir le tableau. La balise est le conteneur de niveau supérieur de la table et peut contenir une série de balises . Chaque balise <. balise> Représente une ligne de données. Les données de chaque ligne sont définies par la balise

, qui est la cellule du tableau. 标签来定义表格。标签是表格的顶层容器，可以包含一系列的标签，每个标签表示一行数据。每个行中的数据是由 标签定义的， 标签是表格中的单元格。 下面是一个简单的HTML表格结构的示例： <table> <tr> <td>姓名</td> <td>年龄</td> <td>性别</td> </tr> <tr> <td>张三</td> <td>25</td> <td>男</td> </tr> <tr> <td>李四</td> <td>30</td> <td>女</td> </tr> </table> Copier après la connexion 在上述示例中，我们创建了一个简单的包含3列和3行数据的表格。接下来，我们将使用CSS来设置表格的样式和布局。 为了使表格能够在不同设备上具有良好的显示效果，我们可以使用CSS的媒体查询来创建响应式的表格布局。媒体查询可以根据设备的宽度来动态改变样式。 下面是一个响应式表格布局的示例CSS代码： /* 默认表格样式 */ table { width: 100%; border-collapse: collapse; } /* 表头样式 */ th { background-color: #f1f1f1; font-weight: bold; text-align: left; padding: 8px; } /* 表格数据样式 */ td { padding: 8px; } /* 媒体查询：在窗口宽度小于600px时改变表格布局 */ @media screen and (max-width: 600px) { table { border: none; } tr { border-bottom: 1px solid #ddd; display: block; margin-bottom: 10px; } td { border-bottom: 1px solid #ddd; display: block; text-align: right; } td::before { content: attr(data-label); float: left; font-weight: bold; text-transform: uppercase; } } Copier après la connexion 在上述示例中，我们设置了表格的默认样式，并使用媒体查询来针对窗口宽度小于600px的设备进行布局调整。在小屏幕设备上，我们将表格的行和单元格设置为块级元素，并添加适当的边框和间距。同时，我们使用::before Voici un exemple de structure de tableau HTML simple : rrreee Dans l'exemple ci-dessus, nous avons créé un tableau simple avec 3 colonnes et 3 lignes de données. Ensuite, nous utiliserons CSS pour styliser et mettre en page le tableau. Afin que le tableau s'affiche bien sur différents appareils, nous pouvons utiliser des requêtes multimédias CSS pour créer une disposition de tableau réactive. Les requêtes multimédias peuvent modifier dynamiquement les styles en fonction de la largeur de l'appareil. Voici un exemple de code CSS pour une mise en page de tableau réactif : rrreeeDans l'exemple ci-dessus, nous définissons le style par défaut du tableau et utilisons des requêtes multimédias pour ajuster la mise en page pour les appareils dont la largeur de fenêtre est inférieure à 600 px. Sur les appareils à petit écran, nous définissons les lignes et les cellules du tableau comme des éléments de niveau bloc et ajoutons des bordures et un espacement appropriés. En même temps, nous utilisons le pseudo-élément ::beforepour ajouter des étiquettes pour chaque cellule. Avec le code HTML et CSS ci-dessus, nous pouvons créer une mise en page de tableau réactive. Que l'utilisateur consulte la page Web sur un appareil de bureau à grand écran ou sur un appareil mobile à petit écran, le tableau peut être affiché avec le meilleur effet d'affichage. J'espère que cet article vous aidera à comprendre comment créer une mise en page de tableau réactive en utilisant HTML et CSS. En utilisant de manière flexible diverses propriétés et techniques HTML et CSS, vous pouvez créer une conception Web plus belle et plus facile à utiliser. 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! Étiquettes associées： css html 响应式布局 source：php.cn Article précédent：Guide de mise en page HTML : comment utiliser des éléments flottants pour implémenter une mise en page multicolonne Article suivant：Comment créer une mise en page de grille d'images réactive en utilisant HTML et CSS 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 Derniers articles par auteur Smartest Move: Claim PENDLE Right Now! 2024-09-13 15:49:15 Circle Integrates Arbitrum to Expand USDC Utility in DeFi Ecosystems 2024-09-13 15:48:15 Soneium L2 Blockchain Collaborates with Chainlink to Introduce Web3 to Sony Group’s User Base 2024-09-13 15:47:15 Grayscale Launches An XRP Trust Fund, Paving The Way For Potential ETF 2024-09-13 15:43:15 Solana's DeFi Sector Continues to Grow as Perp DEXes TVL Hits New Record of $8.2M 2024-09-13 15:42:15 DOGS Token, a New Memecoin on the TON Blockchain, Gains Attention Within the Crypto Community 2024-09-13 15:39:15 XRP and RNDR Show Strong Potential, But BlockDAG's Papara Integration Steals the Show 2024-09-13 15:38:15 4 Trending Meme Coins to Invest In Now: PAW, COIN, DICE, LADYS 2024-09-13 15:33:15 European traders may have had a rude awakening on this Friday the 13th 2024-09-13 15:31:15 Que dois-je faire si mon système Win10 ne répond pas lors de l'exécution de WPS ? Que dois-je faire si mon système Win10 ne répond pas lors de l'exécution de WPS ? 2024-09-13 12:53:20 Derniers numéros WordPress 6.0 (add_editor_style) ne charge pas style.css dans l'éditeur Gutenberg Je suis le cours UdemyWordPress pour créer un thème de bloc WordPress personnalisé. J'ai e... Depuis 2023-11-12 20:37:50 0 2 261 Les zéros CSS non significatifs pour les décimales ne fonctionnent pas avec de grands nombres Récemment, j'ai rencontré un problème où j'ai créé une liste ordonnée avec plus d'une cent... Depuis 2023-11-07 10:35:53 0 1 236 Erreur Sass : fichier déjà chargé : @import '~src/css/quasar.variables.scss', 'quasar/src/css/variables.sass' ; J'utilise le framework quasar et lors de la compilation de mon projet, j'ai rencontré l'er... Depuis 2023-11-06 21:38:55 0 1 219 Comment intégrer une vidéo d'arrière-plan en HTML/CSS ? Bonjour à tous, j'ai récemment rencontré un problème. J'essaie de définir un arrière-plan ... Depuis 2023-11-06 13:59:13 0 1 240 Comment obtenir la valeur RVB de la couleur nommée CSS/HTML en JavaScript J'ai créé un objet Javascript appelé [name-rgb]. Votre base : nomméeColors={AliceBlue:[240... Depuis 2023-11-06 09:05:50 0 2 210 Rubriques connexes Plus> symbole de droit d'auteur HTML css éditeur HTML en ligne centré sur CSS Comment insérer des images en CSS réalisation de pages web html CSS au-delà de l'affichage... espace HTML Recommandations populaires Que signifie l'URL ? Que signifie DOM ? Comment changer la taille de l'image Comment mettre la police en gras en HTML Comment définir la taille des images HTML Tutoriels populaires Plus> Tutoriels associés Recommandations populaires Derniers cours Éléments HTML courants et contrôles de formulaire courants 18951 Jouez avec la mise en page CSS Flexbox 23888 Rendre la mise en page aussi rapide que la 5G : disposition de la grille CSS Grid 27453 Dernier didacticiel vidéo CSS3 55521 Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne) 1398687 temps d'étude Tutoriel vidéo JAVA pour débutants 2380415 temps d'étude Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle 495209 temps d'étude Introduction rapide au développement web front-end 213788 temps d'étude Maîtrisez les didacticiels vidéo PS à partir de zéro 849158 temps d'étude [Web front-end] Démarrage rapide de Node.js 3779 temps d'étude Collection complète de cours full-stack de développement Web étranger 2909 temps d'étude Aller au langage pratique GraphQL 2407 temps d'étude Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape 505 temps d'étude Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures 13135 temps d'étude Derniers téléchargements Plus> effets Web Code source du site Web Matériel du site Web Modèle frontal [bouton de formulaire] Code de contact du formulaire de message d'entreprise jQuery [Effets spéciaux du joueur] Effets de lecture de boîte à musique HTML5 MP3 [Navigation dans les menus] Effets spéciaux du menu de navigation d'animation de particules cool HTML5 [bouton de formulaire] Code d'édition par glisser-déposer du formulaire visuel jQuery [Effets spéciaux du joueur] Code du lecteur de musique Kugou imitation VUE.JS [effets spéciaux HTML5] Jeu de boîte de poussée HTML5 classique [Effets spéciaux d'image] défilement jQuery pour ajouter ou réduire des effets d'image [Effets d'album photo] Effet de zoom de survol de la couverture de l'album personnel CSS3 [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches [Modèle frontal] Modèle Web de CV de travail créatif de concepteur [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet [Modèle frontal] Modèle de site Web de service de trading de devises de style violet [PNG素材] 可爱的夏天元素矢量素材(EPS+PNG) [PNG素材] 四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG) [banner图] 唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS) [PNG素材] 金色的毕业帽矢量素材(EPS+PNG) [PNG素材] 黑白风格的山脉图标矢量素材(EPS+PNG) [PNG素材] 不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG) [banner图] 扁平风格的植树节banner矢量素材(AI+EPS) [PNG素材] 九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG) [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches [Modèle frontal] Modèle Web de CV de travail créatif de concepteur [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet [Modèle frontal] Modèle de site Web de service de trading de devises de style violet À propos de nous Clause de non-responsabilité Sitemap Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！