communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel CSS > le corps du texte

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

王林
Libérer： 2023-09-02 10:25:01
avant
1265 Les gens l'ont consulté

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 -

    样式表的基本 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>
    Copier après la connexion

    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!

    source：tutorialspoint.com
    Article précédent：Valeur de la propriété CSS object-fit Article suivant：Utilisation de la règle CSS @charset
    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Derniers articles par auteur
    Derniers numéros
    function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
    Depuis 2024-04-29 11:01:01
    0
    2
    1984
    Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
    Depuis 2024-04-23 00:22:19
    0
    10
    2146
    La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
    Depuis 2024-04-19 15:37:47
    0
    1
    1811
    Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
    Depuis 2024-04-18 23:52:34
    0
    1
    1706
    Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
    Depuis 2024-04-16 10:10:18
    0
    0
    1718
    Rubriques connexes
    Plus>
    Recommandations populaires
    Tutoriels populaires
    Plus>
    Tutoriels associés
    Recommandations populaires
    Derniers cours
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal