Wie richtet man HTML-Tabelleninhalte zentriert aus?

HTML-Tabelleninhalte zentriert ausrichten

Beim Arbeiten mit HTML-Tabellen kann es erforderlich sein, den Inhalt von Zellen für einen Zeitraum vertikal und horizontal auszurichten optisch ansprechenderes Ergebnis. So erreichen Sie dies:

Text horizontal und vertikal zentrieren

• Inline-Stilattribute: Verwenden Sie die text-align-Eigenschaft zum Zentrieren den Text horizontal und vertikal ausrichten, um ihn vertikal auszurichten. Zum Beispiel:

<code class="html"><td style="text-align: center; vertical-align: middle;">Text</td></code>

• CSS-Regeln: Definieren Sie CSS-Regeln, um den Text in allen Tabellenzellen zu zentrieren:

<code class="css">td {
    text-align: center;
    vertical-align: middle;
}</code>

Unten ist ein Beispiel, das beide Ansätze demonstriert:

<code class="html"><table>
<tr>
    <td style="text-align: center; vertical-align: middle;">Centered Cell</td>
    <td style="text-align: center; vertical-align: middle;">Centered Cell</td>
</tr>
</table>

<table border="1" id="cssTable">
<tr>
    <td>Centered Cell</td>
    <td>Centered Cell</td>
</tr>
</table></code>

<code class="css">#cssTable td {
    text-align: center;
    vertical-align: middle;
}</code>

Mit diesen Techniken können Sie den Inhalt Ihrer HTML-Tabellen einfach zentrieren, was zu einer benutzerfreundlicheren und optisch ansprechenderen Oberfläche führt.

Das obige ist der detaillierte Inhalt vonWie richtet man HTML-Tabelleninhalte zentriert aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!