interface Webtutoriel CSSÀ quoi devez-vous faire attention lors de la définition des styles CSS de tableau ?À quoi devez-vous faire attention lors de la définition des styles CSS de tableau ?
Nous savons que s'il existe de nombreux styles CSS pour les tables, je vais aujourd'hui vous donner une explication détaillée des paramètres de style CSS du tableau tr td. À quels aspects faut-il prêter attention lors de la définition des feuilles de style CSS pour. tables
La balise table est utilisée à plusieurs endroits dans une page Web. À l'heure actuelle, la définition du style pour le tableau objet spécifié peut toujours être contrôlée via CSS.
En fait, cela devient parfois beaucoup plus simple lorsque l'on pense à utiliser les balises de table comme balises DIV pour mettre en page et définir le CSS.
Définir les styles pour le tableau
Spécifiez le style de tableau dans l'objet en nommant le style parent du tableau correspondant
Code HTML+CSS complet du cas
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>指定对象内table设置样式</title>
<style>
.p{ width:400px}
.p table{ background:#CCC; color:#F00}
.p table td{ background:#FFF}
</style>
</head>
<body>
<p class="p">
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td>内容一</td>
<td>内容一</td>
<td>内容一</td>
</tr>
<tr>
<td>内容二</td>
<td>内容</td>
<td>内容</td>
</tr>
</table>
</p>
</body>
</html>Résumé
Ce qui précède spécifie la table et td via le parent pour définir le style CSS.
Utilisez la disposition du tableau à plusieurs endroits en définissant un identifiant ou une classe distinct pour le tableau
À ce stade, si vous définissez directement le style sur la balise table, la disposition du tableau dans le. la page Web sera définie à ce moment-là. Pour le moment, il vous suffit d'ajouter des paramètres d'identifiant ou de classe au tableau pour distinguer les paramètres de tableau qui nécessitent des styles CSS.
Définir le CSS pour le tableau td
Dans la mise en page Web d'un tableau, il est généralement nécessaire de définir des styles pour td, tels que la définition de la hauteur des lignes, du remplissage, etc. pour td, qui sont tous efficaces.
Le code HTML+CSS complété est le suivant :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>指定对象内table td设置样式</title>
<style>
.p-td{ width:400px}
.p-td table td{ background:#CCC; color:#000; line-height:40px}
</style>
</head>
<body>
<p class="p-td">
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td>内容一</td>
<td>内容一</td>
<td>内容一</td>
</tr>
<tr>
<td>内容二</td>
<td>内容</td>
<td>内容</td>
</tr>
</table>
</p>
</body>
</html>Définissez l'effet de style sur le td dans le tableau spécifié
Ce qui précède est pointé par CSS pour définir le style td de la table dans l'objet spécifié.
Pensée divergente : si vous souhaitez définir différents styles CSS pour un tableau td spécifique, vous pouvez ajouter des classes au td pour obtenir différents paramètres de style.
Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture connexe :
Comment rendre la hauteur adaptative DIV
Comment utiliser CSS pour masquer le contenu textuel du fond d'image
Façons courantes d'organiser les js natifs
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!
Où devrait «abonner au podcast» vers le lien?Apr 16, 2025 pm 12:04 PMPendant un certain temps, iTunes était le grand chien du podcasting, donc si vous avez lié "Abonnez-vous au podcast" pour aimer:
Diversité du moteur du navigateurApr 16, 2025 pm 12:02 PMNous avons perdu l'opéra lorsqu'ils sont devenus Chrome en 2013. Même accord avec Edge quand il est également devenu Chrome plus tôt cette année. Mike Taylor a qualifié ces changements de "de moins
Considérations UX pour le partage WebApr 16, 2025 am 11:59 AMDes sites trash des appâts clics au plus d'août des publications, les boutons de partage sont depuis longtemps omniprésents sur le Web. Et pourtant on peut soutenir que ces
Actualités hebdomadaires de la plate-forme: Apple déploie des composants Web, rendu HTML progressif, ressources critiques d'auto-hébergementApr 16, 2025 am 11:55 AMAu cours de cette semaine, Apple entre dans les composants Web, comment Instagram est des scripts à chargement Insta et de la réflexion pour l'auto-hébergement des ressources critiques.
Git PathSpecs et comment les utiliserApr 16, 2025 am 11:53 AMQuand je regardais la documentation des commandes GIT, j'ai remarqué que beaucoup d'entre eux avaient une option. J'ai d'abord pensé que c'était juste un
Un sélecteur de couleurs pour les images de produitsApr 16, 2025 am 11:49 AMCela ressemble un peu à un problème difficile ne va pas? Nous n'avons souvent pas de photos de produits dans des milliers de couleurs, de sorte que nous pouvons nous déplacer avec. NOUS non plus
Un mode noir bascule avec React et ThemeproviderApr 16, 2025 am 11:46 AMJ'aime quand les sites Web ont une option de mode sombre. Le mode Dark facilite la lecture des pages Web et aide mes yeux plus détendus. De nombreux sites Web, y compris
Certains pratiques avec l'élément de dialogue HTMLApr 16, 2025 am 11:33 AMC'est moi qui regarde l'élément HTML pour la première fois. J'en ai été conscient depuis un certain temps, mais il ne l'a pas encore pris pour un tour. Il a un peu cool et
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Adaptateur de serveur SAP NetWeaver pour Eclipse
Intégrez Eclipse au serveur d'applications SAP NetWeaver.
Navigateur d'examen sécurisé
Safe Exam Browser est un environnement de navigation sécurisé permettant de passer des examens en ligne en toute sécurité. Ce logiciel transforme n'importe quel ordinateur en poste de travail sécurisé. Il contrôle l'accès à n'importe quel utilitaire et empêche les étudiants d'utiliser des ressources non autorisées.
Télécharger la version Mac de l'éditeur Atom
L'éditeur open source le plus populaire
Dreamweaver CS6
Outils de développement Web visuel
Dreamweaver Mac
Outils de développement Web visuel
