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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
