So legen Sie die Mitte einer HTML-Tabelle fest-Front-End-Fragen und Antworten-php.cn

Heim

Web-Frontend

So legen Sie die Mitte einer HTML-Tabelle fest

Apr 25, 2023 am 10:28 AM

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.

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

Nach dem Login kopieren

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.

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

Nach dem Login kopieren

Im obigen Code haben wir das HTML-Tag <center> 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!

Erklärung dieser Website

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