Heim > Artikel > Web-Frontend > So legen Sie die Mitte einer HTML-Tabelle fest

So legen Sie die Mitte einer HTML-Tabelle fest

PHPzOriginal: 2023-04-25 10:28:4710756Durchsuche

HTML ist eine weit verbreitete Hypertext-Auszeichnungssprache, die zum Erstellen von Webseiten verwendet wird. Im Webdesign sind Tabellen ein sehr nützliches Element zur Darstellung von Daten. Beim Entwerfen von Tabellen besteht häufig die Notwendigkeit, diese zu zentrieren. So zentrieren Sie eine Tabelle in HTML.

1. CSS-Stylesheet verwenden

Nachdem Sie die Tabelle in HTML erstellt haben, können Sie die Tabelle einfach mithilfe des CSS-Stylesheets zentrieren. In einem Stylesheet können Sie das Attribut „margin: auto“ verwenden, um die Tabelle zu zentrieren.

Zum Beispiel stellt der folgende Code die Tabelle auf eine Breite von 80 % ein und zentriert sie auf der Seite.

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            width: 80%;
            margin: auto;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>姓名</th>
            <th>学号</th>
            <th>成绩</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>001</td>
            <td>90</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>002</td>
            <td>95</td>
        </tr>
    </table>
</body>
</html>

Im obigen Code erstellen wir eine Tabelle und legen ihre Breite auf 80 % fest. Als nächstes verwenden Sie das Attribut „margin: auto“, um die Tabelle zu zentrieren.

2. HTML-Attribute verwenden

Zusätzlich zur Verwendung von CSS-Stylesheets können Sie Attribute auch direkt im HTML-Tabellenelement festlegen, um die Tabelle zu zentrieren. Unten finden Sie Beispielcode zum Zentrieren einer Tabelle in HTML.

<!DOCTYPE html>
<html>
<head>
    <title>HTML表格居中</title>
</head>
<body>
    <center>
        <table border="1">
            <tr>
                <th>姓名</th>
                <th>学号</th>
                <th>成绩</th>
            </tr>
            <tr>
                <td>小明</td>
                <td>001</td>
                <td>90</td>
            </tr>
            <tr>
                <td>小红</td>
                <td>002</td>
                <td>95</td>
            </tr>
        </table>
    </center>
</body>
</html>

Im obigen Code haben wir das HTML-Tag

außerhalb der Tabelle verwendet, um die Tabelle zu zentrieren. Diese Methode ist einfach und intuitiv und eignet sich für kleines Webdesign.

Zusammenfassung

Tabellen in HTML sind ein häufiges Webdesign-Element und zentrierte Tabellen sind eine häufige Designanforderung. Um eine Tabelle zu zentrieren, können Sie CSS-Stylesheets oder HTML-Eigenschaften verwenden. Die Verwendung von CSS-Stylesheets erfordert einige Grundkenntnisse, führt aber auch zu einer besseren Skalierbarkeit und ist eine seit langem bewährte Vorgehensweise. Die Verwendung von HTML-Attributen zum Zentrieren der Tabelle ist einfacher, kann jedoch bei komplexen Webdesigns zu Problemen führen. Daher muss beim Entwerfen einer Webseite darüber nachgedacht werden, welche Methode verwendet werden soll.

Das obige ist der detaillierte Inhalt vonSo legen Sie die Mitte einer HTML-Tabelle fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html auto 样式表 margin

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：So implementieren Sie das Vorlagenmethodenmuster mithilfe von JavaScriptNächster Artikel：So implementieren Sie das Vorlagenmethodenmuster mithilfe von JavaScript

In Verbindung stehende Artikel

Mehr sehen