Maison  >  Article  >  interface Web  >  Tables de style Travailler avec CSS

Tables de style Travailler avec CSS

PHPz
PHPzavant
2023-08-19 14:29:04670parcourir

Nous pouvons utiliser CSS pour définir le style du tableau. Les propriétés suivantes sont utilisées pour définir les styles pour f5d188ed2c074f8b944552db028f98a1 et ses éléments :

  • border

    La propriété border de CSS est utilisée pour définir la largeur, le style et la couleur de la bordure.

  • border-collapse

    Cet attribut est utilisé pour spécifier si l'élément f5d188ed2c074f8b944552db028f98a1 doit avoir une bordure partagée ou indépendante. L'attribut

  • caption

    caption-side est utilisé pour positionner la zone de titre du tableau verticalement.

  • empty-cells

    Cet attribut est utilisé pour spécifier comment les cellules vides du tableau sont affichées.

  • table-layout est utilisé pour définir l'algorithme utilisé par le navigateur lors de la disposition des lignes, des colonnes et des cellules d'un tableau. Cela donne le résultat suivant −

  • <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
       font-family: &#39;Bookman Old Style&#39;, serif;
    }
    th {
       letter-spacing: 1.9px;
    }
    #one {
       border-right: thick solid blue;
    }
    td {
       text-align: center;
    }
    </style>
    </head>
    <body>
    <h2>Employee List</h2>
    <div>
    <table>
    <tr>
    <th id="one">Employee</th>
    <th>Department</th>
    </tr>
    <tr>
    <td>John </td>
    <td>Marketing</td>
    </tr>
    <tr>
    <td>Brad</td>
    <td>Finance</td>
    </tr>
    <tr>
    <td>Tim </td>
    <td>IT</td>
    </tr>
    <tr>
    <td>Steve</td>
    <td>Operations</td>
    </tr>
    </table>
    </div>
    </body>
    </html>
Output

Cela donne le résultat suivant −

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