Comment utiliser le CSS pour créer de beaux tableaux ? 【Exemple】-tutoriel CSS-php.cn

Comment utiliser le CSS pour créer de beaux tableaux ? 【Exemple】

藏色散人

Libérer： 2018-09-05 14:57:27

original

7431 Les gens l'ont consulté

Cet article vous donnera une introduction détaillée sur la façon d'utiliser le CSS pour créer un tableau HTML beau et concis. Je crois qu'une fois que tout le monde aura été exposé aux connaissances liées au HTML, ils écriront plus ou moins eux-mêmes du petit code pour créer de petits effets. Par exemple, lorsque nous parcourons différents sites Web, nous pouvons toujours voir différents affichages de tableaux, dont certains sont des tableaux traditionnels sans aucun style. Certains ont des formes d'affichage distinctives.

Pour les débutants, vous pouvez toujours créer des tableaux sans avoir aucun contact avec CSS, mais ces tableaux sont ennuyeux. Maintenant, laissez-moi partager avec vous un tableau très beau et concis réalisé avec le style CSS.

Les exemples de code spécifiques pour créer de beaux tableaux en utilisant div+css sont les suivants :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用css制作的一款好看表格样式示例</title>
    <style>
        #t1
        {
            font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
            width:100%;
            border-collapse:collapse;
        }

        #t1 td, #t1 th
        {
            font-size:1em;
            border:1px solid #1094f2;
            padding:3px 7px 2px 7px;
        }

        #t1 th
        {
            font-size:1.1em;
            text-align:left;
            padding-top:5px;
            padding-bottom:4px;
            background-color: #029789;
            color:#ffffff;
        }

        #t1 tr.alt td
        {
            color:#000000;
            background-color: #94ef9a;
        }
    </style>
</head>
<body>
<table id="t1">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>爱好</th>
    </tr>

    <tr>
        <td>张三</td>
        <td>男</td>
        <td>唱歌</td>
    </tr>

    <tr class="alt">
        <td>李四</td>
        <td>女</td>
        <td>跳舞</td>
    </tr>

    <tr>
        <td>王二</td>
        <td>男</td>
        <td>看书</td>
    </tr>

    <tr class="alt">
        <td>赵五</td>
        <td>男</td>
        <td>爬山</td>
    </tr>
</table>
</body>
</html>

Copier après la connexion

Nous accédons au code ci-dessus via le navigateur, et le L'effet est le suivant :

Comment utiliser le CSS pour créer de beaux tableaux ? 【Exemple】

Comme le montre l'image, n'est-il pas bien meilleur que l'ennuyeux tableau de lignes en noir et blanc ? C'est simple et beau. Une ligne sur deux affiche un arrière-plan de couleur différente et la bordure du tableau est affichée avec des lignes fines. Il permet aux utilisateurs de vérifier les informations du formulaire de manière plus intuitive. Pour obtenir un tel effet, vous ne pouvez pas vous passer de puissants attributs de style CSS.

Ici, nous pouvons trouver quelques attributs importants dans le style style, tels que :

border-collapse:collapse; Cet attribut indique que les bordures du tableau peuvent être fusionnées en une seule bordure.

background-color permet de définir la couleur d'arrière-plan.

Alors, à travers l'introduction ci-dessus, en savez-vous plus sur l'utilisation de CSS pour créer des tableaux ? De cette façon, vous pouvez définir des styles de tableau CSS avec différents effets en fonction de vos propres préférences esthétiques. Une belle table non seulement plaît aux utilisateurs, mais rend également la gestion plus intuitive et plus pratique.

Cet article a une certaine valeur de référence, j'espère qu'il sera utile aux amis dans le besoin !

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!