Wie erstelle ich vertikale HTML-Tabellen mit CSS?

Vertikale HTML-Tabellen erstellen

In HTML werden Tabellen normalerweise mit horizontalen Zeilen und vertikalen Spalten angezeigt. Es kann jedoch vorkommen, dass Sie diese Ausrichtung umkehren und „vertikale“ Tabellen mit vertikalen Zeilen und Tabellenüberschriften auf der linken Seite erstellen möchten.

Um dies zu erreichen, kann eine einfache CSS-Lösung verwendet werden:

<code class="css">tr { display: block; float: left; }
th, td { display: block; }</code>

Dieses CSS ordnet die Elemente innerhalb der Tabelle neu an, sodass einzelne Zeilen als vertikale Blöcke nebeneinander angezeigt werden, wobei die Tabellenkopfzellen auf der linken Seite erscheinen.

Zugriff auf Zeilen in Vertikale Tabellen

Während das CSS das Erscheinungsbild der Tabelle verändert, hat es keinen Einfluss darauf, wie Sie auf die Zeilen im HTML-Code zugreifen. Sie können weiterhin die Funktion verwenden. Element, um Daten dynamisch einzufügen, wie Sie es in einer herkömmlichen horizontalen Tabelle tun würden.

Zusätzliche Überlegungen zum Stil

Um das visuelle Erscheinungsbild Ihrer vertikalen Tabelle weiter zu verbessern, könnten Sie in Betracht ziehen :

• Verwenden von border-collapse, um Ränder zwischen benachbarten Zellen zu entfernen.
• Optimieren der Breiten- und Höheneigenschaften des und / Elemente für optimale Zellabmessungen.

Beispielcode

Hier ist ein Beispiel einer vertikalen HTML-Tabelle, die Sie anpassen können:

<code class="css">/* single-row column design */
tr { display: block; float: left; }
th, td { display: block; border: 1px solid black; }

/* border-collapse */
tr>*:not(:first-child) { border-top: 0; }
tr:not(:first-child)>* { border-left:0; }</code>

<code class="html"><table>
<tr>
    <th>name</th>
    <th>number</th>
</tr>
<tr>
    <td>James Bond</td>
    <td>007</td>
</tr>
<tr>
    <td>Lucipher</td>
    <td>666</td>
</tr>
</table></code>

Durch die Implementierung dieser CSS-Stile können Sie ganz einfach vertikale Tabellen in HTML erstellen und dabei die Funktionalität und Zugänglichkeit herkömmlicher Tabellen beibehalten.

Das obige ist der detaillierte Inhalt vonWie erstelle ich vertikale HTML-Tabellen mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!