Heim >Web-Frontend >HTML-Tutorial >So zentrieren Sie eine Tabelle in HTML
In HTML können Sie drei Methoden verwenden, um die Tabelle zu zentrieren: Verwenden Sie das Attribut „margin: auto;“, um die Tabelle horizontal zu zentrieren. Verwenden Sie das Attribut text-align: center;, um die Tabelle innerhalb des übergeordneten Elements vertikal zu zentrieren. Verwenden Sie das Attribut align, um die Position der Tabelle relativ zum übergeordneten Element anzugeben (veraltet).
So zentrieren Sie eine HTML-Tabelle
In HTML gibt es mehrere Möglichkeiten, eine Tabelle zu zentrieren:
1. Verwenden Sie margin: auto;
-Rand festzulegen Das Attribut table: auto;
ermöglicht die horizontale Zentrierung der Tabelle. margin: auto;
属性,可以让表格在水平方向上居中。示例:
<code class="html"><table style="margin: auto;"> <tr> <th>列 1</th> <th>列 2</th> </tr> <tr> <td>数据 1</td> <td>数据 2</td> </tr> </table></code>
2. 使用 text-align: center;
text-align: center;
属性,可以让表格在父元素内垂直居中。示例:
<code class="html"><div style="text-align: center;"> <table border="1"> <tr> <th>列 1</th> <th>列 2</th> </tr> <tr> <td>数据 1</td> <td>数据 2</td> </tr> </table> </div></code>
3. 使用 align 属性
align
属性,可以指定表格相对于其父元素的位置。示例:
<code class="html"><table align="center"> <tr> <th>列 1</th> <th>列 2</th> </tr> <tr> <td>数据 1</td> <td>数据 2</td> </tr> </table></code>
注意:
align
属性在 HTML5 中已弃用,应优先使用 margin
或 text-align
text-align: center;
auf das übergeordnete Element der zu erstellenden Tabelle festzulegen die Tabelle im übergeordneten Element. Vertikal zentriert innerhalb des Elements. 🎜🎜🎜🎜Beispiel: 🎜🎜rrreee🎜🎜3. Verwenden Sie das align-Attribut🎜🎜🎜🎜, um das align
-Attribut für die Tabelle festzulegen, um die Position der Tabelle relativ zu ihrem übergeordneten Element anzugeben. 🎜🎜🎜🎜Beispiel: 🎜🎜rrreee🎜🎜Hinweis: 🎜🎜🎜🎜align
-Attribut ist in HTML5 veraltet, verwenden Sie margin
oder text-align
Attribut. 🎜🎜Wenn die Breite für den Tisch eingestellt ist, kann der Zentriereffekt beeinträchtigt werden. 🎜🎜Mit den oben genannten Methoden kann der Tisch horizontal oder vertikal zentriert werden. 🎜🎜Das obige ist der detaillierte Inhalt vonSo zentrieren Sie eine Tabelle in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!