Maison > Article > interface Web > Deux façons d'utiliser les tableaux en CSS (exemples)

Deux façons d'utiliser les tableaux en CSS (exemples)

不言original: 2018-08-06 16:53:162837parcourir

Cet article vous présente deux méthodes (exemples) d'utilisation des tableaux en CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. Table ordinaire

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title>CSS 表格。</title>
    <style>
        table {            
       
        width: 50%;            
        border-collapse: collapse; 
            /*border-collapse 属性设置是否将表格边框折叠为单一边框*/
        }

        table, th, td {            
        border: 1px solid blue;        
        }

        th {            
        height: 50px;            
        background-color: green;            
        color: white;        
        }

        td {            
        text-align: center;            
        padding: 5px; /*表格内边距*/
        }
    </style></head><body><table>
    <tr>
        <th>Firsetname</th>
        <th>Lastname</th>
    </tr>
    <tr>
        <td>jack1</td>
        <td>jack2</td>
    </tr>
    <tr>
        <td>jack3</td>
        <td>jack4</td>
    </tr>
    </table>
    </body>
    </html>

2. Une belle table

<html><head>
    <meta charset="utf-8">
    <style type="text/css">
        #customers {            
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;            
        width: 100%;            
        border-collapse: collapse;        
        }

        #customers td, #customers th {            
        font-size: 1em;            
        border: 1px solid #98bf21;            
        padding: 3px 7px 2px 7px;        
        }

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

        #customers tr.alt td {            
        color: #000000;            
        background-color: #EAF2D3;        
        }
    </style></head><body><table id="customers">
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
    </tr>

    <tr>
        <td>apple</td>
        <td>job</td>
    </tr>

    <tr class="alt">
        <td>wang</td>
        <td>jack</td>
    </tr>
    </table>
    </body>
    </html>

Recommandations associées :

Résumé de l'attribut de police en HTML

Comment implémenter la fonction de barre de progression dans le code html5 ? (Exemple)

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：

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

Article précédent：Comment CSS contrôle-t-il que l'image change lorsque la souris la survole ?Article suivant：Comment CSS contrôle-t-il que l'image change lorsque la souris la survole ?

Articles Liés

Voir plus