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

Tables de style Travailler avec CSS

PHPz
Libérer: 2023-08-19 14:29:04
avant
779 Les gens l'ont consulté

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

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

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>
    Copier après la connexion
    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!

    source:tutorialspoint.com
    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
    Tutoriels populaires
    Plus>
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal