So zentrieren Sie eine Tabelle in HTML

Eine Tabelle ist eine hervorragende Möglichkeit, viele Informationen auf organisierte Weise darzustellen, sodass Benutzer sie leichter verstehen können, indem sie sehen, wie Datenpunkte zueinander in Beziehung stehen. Verkaufsdaten, Webseitenverkehr, Börsentrends und Noten der Schüler sind Beispiele für Informationen, die häufig in Tabellen dargestellt werden.

Wenn Sie einer Webseite eine Tabelle mit HTML hinzufügen, ist es möglicherweise optisch ansprechender, sie auf der Seite zu zentrieren. Das Zentrieren von Text und Bildern erfolgt normalerweise über die Textausrichtungsklasse oder über CSS. Das Zentrieren einer Tabelle erfordert jedoch einen anderen Ansatz. Im Folgenden finden Sie Details zum Zentrieren einer Tabelle auf einer Webseite.

Zentrieren einer Tabelle in HTML

Wenn Sie einer Webseite eine Tabelle hinzufügen, wird diese standardmäßig an der linken Seite der Seite oder des Containers ausgerichtet, wie unten gezeigt.

Der HTML-Quellcode für die obige Tabelle lautet wie folgt.

<table style = "border: 1px solid black"> <tr> <td> <strong> HITS </ strong> </ td> <td> <strong> MONAT </ strong> </ td> <td> <strong > GESAMTERHÖHUNG </ strong> </ td> </ tr> <tr> <td> 324,497 </ td> <td> Januar 1998 </ td> <td style = "text-align: center"> - </ td> </ tr> <tr> <td> 436,699 </ td> <td> Februar 1998 </ td> <td style = "text-align: center"> 112,172 </ td> </ tr> </ table >

Um diese Tabelle zu zentrieren, müssten Sie hinzufügen: Rand-links: Auto; Rand-rechts: Auto; bis zum Ende des Stilattributs im <table> -Tag. Das Tabellen-Tag würde wie folgt aussehen.

<table style = "Rahmen: 1 Pixel festes Schwarz; Rand links: Auto; Rand rechts: Auto;">

Wenn Sie das Stilattribut im <table> -Tag wie oben gezeigt ändern, wird die Tabelle wie unten gezeigt auf der Webseite zentriert.