À quoi devez-vous faire attention lors de la définition des styles CSS de tableau ?-tutoriel CSS-php.cn

À quoi devez-vous faire attention lors de la définition des styles CSS de tableau ?

php中世界最好的语言

Libérer： 2018-05-15 13:52:04

original

2341 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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!