Tabelle in HTML nach oben ausrichten

Eine HTML-Tabelle besteht aus Tabellenzeilen, die aus Daten bestehen. Dieses Tutorial stellt eine Methode vor, um die Tabellendaten oben auf der rechten Seite auszurichten.

Verwenden Sie die CSS-Eigenschaften vertical-align und text-align, um die Tabellendaten in HTML auszurichten

Eine Tabelle in HTML besteht aus Zeilen und Spalten. Wir verwenden das Tag <table>, um eine Tabelle in HTML zu erstellen. Das Tag <tr> wird verwendet, um die Tabellenzeilen zu erstellen, und das Tag <td> wird verwendet, um die Daten in der Tabelle zu füllen.

Das Feld, in dem sich die Tabellendaten befinden, wird auch als Zellen bezeichnet. Zellen sind die Bausteine ​​einer Tabelle. In diesem Artikel wird erläutert, wie die Tabellendaten am oberen Rand der Zelle rechts ausgerichtet werden.

Wir werden die CSS-Eigenschaften vertical-align und text-align verwenden, um die Tabellendaten rechts oben in einer Zelle auszurichten. Lassen Sie uns zuerst die Eigenschaft vertical-align einführen.

Die Eigenschaft definiert die vertikale Ausrichtung des angegebenen Elements. Die Elemente können entweder Inline- oder Inline-Block-Elemente und sogar Tabellenzellen sein.

Die Eigenschaft nimmt eine Vielzahl von Optionen. Einige sind baseline, length, sub, super, top usw. Der Standardwert der Eigenschaft ist baseline.

Wir können die Eigenschaft vertical-align in zwei verschiedenen Kontexten verwenden. Wie bereits erwähnt, können wir es verwenden, um ein Inline-Element vertikal zu positionieren.

Eine andere Möglichkeit besteht darin, die Eigenschaft zum Ausrichten der Zelleninhalte in einer Tabelle zu verwenden. In dem Beispiel werden wir den letzteren Kontext diskutieren.

Die Eigenschaft text-align legt die horizontale Ausrichtung des Textes im angegebenen Element fest. Einige Eigenschaftsoptionen sind left, right, center, justify, usw. Wie aus den Optionen hervorgeht, können wir die Position des Textes mit der Eigenschaft text-align festlegen.

Wir können diese beiden Eigenschaften verwenden, um die Tabellendaten rechts oben auszurichten. Die Option top der Eigenschaft vertical-align richtet das Element an der Spitze des höchsten Elements in der Reihe aus.

Bei den Tabellenzellen wird der Inhalt knapp unterhalb des Zellenrandes positioniert. Ebenso richtet die Eigenschaft right den Text an der rechten Seite der Zelle aus.

Erstellen Sie beispielsweise eine Tabelle mit zwei Zeilen und zwei Spalten. Füllen Sie die Zellen mit Create, Read, Update und Delete.

Wählen Sie in CSS das Element td als untergeordnetes Element des Elements table aus. Stellen Sie die Höhe und Breite der Zelle auf 200px ein.

Wenden Sie den Rand von 2px solid #000 auf die Zellen an. Als nächstes setzen Sie die Eigenschaft vertical-align auf top und die Eigenschaft text-align auf right.

Dadurch wird der Inhalt der Zellen direkt unter dem Zellenrand und auf der rechten Seite positioniert. Dadurch können wir die Tabellendaten mit den CSS-Eigenschaften vertical-align und text-align rechts oben ausrichten.

Beispielcode:

<table>
 <tr>
 <td>
 Create
 </td>
 <td>
 Read
 </td>
 </tr>
 <tr>
 <td>
 Update
 </td>
 <td>
 Delete
 </td>
 </tr>
</table>

table td {
 height: 200px;
 width: 200px;
 border: 2px solid #000;
 vertical-align:top;
 text-align:right;
}