Heim > Artikel > Web-Frontend > Zwei Möglichkeiten, Tabellen in CSS zu verwenden (Beispiele)

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

不言Original: 2018-08-06 16:53:162796Durchsuche

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>

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie steuert CSS, dass sich das Bild ändert, wenn die Maus darüber bewegt wird?Nächster Artikel：Wie steuert CSS, dass sich das Bild ändert, wenn die Maus darüber bewegt wird?

In Verbindung stehende Artikel

Mehr sehen