Deux façons d'utiliser les tableaux en CSS (exemples)-tutoriel CSS-php.cn

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

不言

Libérer： 2018-08-06 16:53:16

original

2857 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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!