Maison > Article > interface Web > Propriétés CSS de base pour les feuilles de style

Propriétés CSS de base pour les feuilles de style

王林avant: 2023-09-02 10:25:011253parcourir

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>

Output

Cela donne le résultat suivant -

样式表的基本 CSS 属性

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>

Sortie

Ceci est La sortie suivante est sortie-

样式表的基本 CSS 属性

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Valeur de la propriété CSS object-fitArticle suivant：Valeur de la propriété CSS object-fit

Articles Liés

Voir plus