Dans les pages Web, nous utilisons généralement des tableaux pour afficher certaines données, telles que des tableaux de performances, des états financiers, etc. Cependant, par défaut, le style des tableaux n'est pas beau et ne correspond même pas au style de la page. CSS fournit des propriétés qui permettent de modifier le style d'un tableau et d'améliorer considérablement son apparence.
1. Bordure du tableau HTML
Dans la partie tutoriel HTML, nous avons utilisé l'attribut border pour définir le tableau. Le code est le suivant :
<tableborder=1><thead><th>Nom</th><th>Sexe</th></thead><tbody><tr><td>Zhang San</td><td>Homme</td ></tr><tr><td>李思</td><td>Femme</td></tr></tbody></table>
Résultats en cours d'exécution :
En fait, cette méthode n’est pas recommandée. Parce que la conception Web suit le principe selon lequel HTML représente le contenu, tandis que CSS décrit le style.
Pour les tableaux, le contenu du tableau est le texte dans les lignes et les colonnes, et la bordure est une embellissement de l'apparence du tableau et appartient à la partie style, elle est donc plus appropriée pour être décrite avec CSS.
2. Bordure du tableau de configuration CSS
Vous pouvez utiliser la bordure CSS pour définir la bordure du tableau. Le code est le suivant :
<!DOCTYPEhtml><html><head><style>table{float:left;}.table_one{border-collapse:separate;}.table_two{margin-left:20px;border-collapse:collapse;}</style> </head><body><tableclass=table_oneborder=1><tr><th>Numéro</th><th>Nom</th><th>Âge</th></tr><tr><td >1</td><td>Zhang San</td><td>15</td></tr><tr><td>2</td><td>李思</td><td> 11</td></tr></table><tableclass=table_twoborder=1px><tr><th>Numéro</th><th>Nom</th><th>Âge</th></tr ><tr><td>1</td><td>Zhang San</td><td>15</td></tr><tr><td>2</td><td>李思< /td><td>11</td></tr></table></body></html>Les résultats en cours d'exécution sont les suivants :
(1) disposition de la table : définissez l'algorithme de disposition de la table. Il existe deux algorithmes de disposition, à savoir l'algorithme de disposition de table fixe et l'algorithme de disposition de table automatique ;
(2) border-collapse : définissez si les bordures des cellules du tableau sont fusionnées ou séparées selon les styles HTML standard ;
(3) border-spacing : définissez l'espacement horizontal et vertical entre deux bordures adjacentes lorsque les bordures du tableau sont séparées ;
(4) côté légende : définissez la position du titre du tableau par rapport au tableau ;
(5) Cellules vides : définissez s'il faut afficher la bordure de la cellule lorsqu'il n'y a pas de contenu dans la cellule du tableau.