Zwei Möglichkeiten, Tabellen in CSS zu verwenden (Beispiele)-CSS-Tutorial-php.cn

Zwei Möglichkeiten, Tabellen in CSS zu verwenden (Beispiele)

不言

Freigeben： 2018-08-06 16:53:16

Original

2846 Leute haben es durchsucht

Dieser Artikel stellt Ihnen zwei Methoden (Beispiele) für die Verwendung von Tabellen in CSS vor. Ich hoffe, dass er Ihnen als Referenz dienen wird.

1. Gewöhnlicher Tisch

<!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>

Nach dem Login kopieren

Ein wunderschöner Tisch

<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>

Nach dem Login kopieren

Verwandte Empfehlungen:

Zusammenfassung des Schriftartattributs in HTML

Wie implementiert man die Fortschrittsbalkenfunktion in HTML5-Code? (Beispiel)

Das obige ist der detaillierte Inhalt vonZwei Möglichkeiten, Tabellen in CSS zu verwenden (Beispiele). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!