Nous pouvons utiliser CSS pour définir le style du tableau. Les propriétés suivantes sont couramment utilisées pour le style
et ses éléments -
-
border
Les propriétés de bordure CSS sont utilisées pour définir la bordure - largeur, style de bordure et couleur de bordure.
-
border-collapse
Cet attribut est utilisé pour spécifier si l'élément
doit avoir une bordure partagée ou séparée. L'attribut -
caption
caption-side est utilisé pour positionner la zone de titre du tableau verticalement.
-
empty-cells
Cet attribut permet de spécifier l'affichage des cellules vides dans le tableau.
- table-layout strong>
Définit l'algorithme utilisé par le navigateur pour disposer les lignes, les colonnes et les cellules d'un tableau.
Exemple
L'exemple suivant illustre le style de la table -
Live Demo
<!DOCTYPE html>
<html>
<head>
<style>
table, table * {
border: thin solid;
padding: 5px;
font-style: italic;
}
caption {
caption-side: bottom;
}
td {
box-shadow: inset 0 0 6px green;
}
</style>
</head>
<body>
<table>
<caption>Demo caption</caption>
<tr>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td></td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td></td>
</tr>
</table>
</body>
</html>Copier après la connexion
Output
Cela donne le résultat suivant -
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
float: left;
}
table {
border: 3px solid black;
}
td {
border: 3px solid lightgreen;
}
th {
border: 3px solid lightblue;
}
#t2 {
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Team Rankings</h2>
<div>
<table id="t1">
<tr>
<th>Team (Test)</th>
<th>Rank </th>
</tr>
<tr>
<td>India </td>
<td>1 </td>
</tr>
<tr>
<td>Australia</td>
<td>2</td>
</tr>
</table>
</div>
<div>
<table id="t2">
<tr>
<th>Team (ODI) </th>
<th>Rank </th>
</tr>
<tr>
<td>India </td>
<td>1 </td>
</tr>
<tr>
<td>England</td>
<td>2</td>
</tr>
</table>
</div>
</body>
</html>Copier après la connexion
Sortie
Ceci est La sortie suivante est sortie-
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!
Que faire si l'ordinateur simule la mort
Utilisation de la fonction get en langage C
que signifie bbs
Utilisation de la liste déroulante
Où dois-je indiquer mon lieu de naissance : province, ville ou comté ?
Comment résoudre l'erreur d'analyse syntaxique
Collection de touches de raccourci informatique
odm
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
