Erstellen Sie eine HTML-Tabelle mit unterschiedlichen Spaltengrößen
- Legen Sie die Größe der HTML-Tabellenspalten fest
- Legen Sie die Breite der Tabellenspalten mit Inline-CSS fest
- Stellen Sie die Breite der Tabellenspalten mit internem CSS ein
In diesem Artikel wird erläutert, wie Sie die Spaltenbreite in HTML und CSS ändern, um unsere Spezifikationen zu erfüllen. Da HTML5 verschiedene Tags und Eigenschaften als veraltet markiert hat, werden wir einige alternative Strategien zum Erreichen der erforderlichen Funktionalität behandeln.
In diesem Tutorial erfahren Sie, wie Sie HTML-Tabellen mithilfe von Inline- und internem CSS anpassen.
Legen Sie die Größe der HTML-Tabellenspalten fest
Häufig müssen wir für unsere Webseiten Tabellen mit mehreren Spalten und Zeilen entwickeln. Manchmal benötigen wir unterschiedliche Breiten für jede Spalte der HTML-Tabelle.
Mal sehen, wie wir eine Tabelle mit Spalten mit unterschiedlichen Breiten erstellen können. Vor HTML5 hatten das table-Tag und die zugehörigen Tags wie <th> eine width-Eigenschaft, mit der die Entwickler die erforderliche Breite der Spalte festlegen konnten.
<html>
<head>
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th width="15%">ID</th>
<th width="70%">Name</th>
<th width="15%">Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jackson</td>
<td>40</td>
</tr>
</table>
</body>
</html>
Der obige HTML-Code verwendet die Eigenschaft width innerhalb des Tags <th>. Die Tabellenbreite wird auf 100% gesetzt.
Wir wollen, dass die Spalte Name breiter ist als andere. Also weisen wir der Spalte Name die Breite 70% und den anderen beiden Spalten jeweils 15% zu.
Wenn wir alle Zahlen zusammenzählen 70 + 15 + 17 = 100, erhalten wir wieder 100.
Sie können die Tabellenbreite je nach Bedarf auf einen beliebigen Prozentsatz einstellen. Dieser Breitenprozentsatz hängt vom übergeordneten Tag des <table>-Tags ab, das in unserem Fall das <body>-Tag ist.
In HTML5 ist die Eigenschaft width veraltet. HTML unterstützt veraltete Attribute und Tags nicht mehr.
Diese Änderung in HTML5 ermutigt Entwickler, CSS für alle erforderlichen Stile zu verwenden. Sehen wir uns an, wie wir die Tabelle und ihre Spaltenbreite mit CSS festlegen können.
Legen Sie die Breite der Tabellenspalten mit Inline-CSS fest
Da wir die Eigenschaft width innerhalb von <th>, nicht verwenden können, können wir unsere Tabelle immer noch mit dem Stil in unseren Tags formatieren, was als Inline-Styling bezeichnet wird. Sie können jeder Spalte einen anderen Breitenprozentsatz zuweisen.
Überprüfen Sie den folgenden Code, um ihn klar zu verstehen.
<html>
<head>
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th style="width:10%">ID</th>
<th style="width:40%">First Name</th>
<th style="width:40%">Last Name</th>
<th style="width:10%">Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>Doe</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jackson</td>
<td>Will</td>
<td>40</td>
</tr>
</table>
</body>
</html>
Im obigen Code weisen wir jeder Spalte 10, 40, 40 und 10 Breiten in Prozent zu. Das Addieren dieser Zahlen ergibt 100.
Da wir unsere Tabellenbreite auf 100% setzen, müssen wir jede Spalte im gleichen Bereich aufteilen.
Stellen Sie die Breite der Tabellenspalten mit internem CSS ein
Wir haben die Spaltenbreite im obigen Code mithilfe von Inline-CSS festgelegt. Inline-CSS ist jedoch nicht zu empfehlen, da wir viel umschreiben müssen, wenn wir die gleiche Funktionalität in mehreren Webseitenbereichen wünschen.
Es ist eine professionelle Praxis, den HTML- und den CSS-Code getrennt zu halten. Sehen wir uns also an, wie wir unsere Tabellenspalten mit internem CSS formatieren können.
Internes CSS wird innerhalb des style-Tags innerhalb des HTML-head-Tags geschrieben.
Methode 1: Verwenden Sie eine CSS-Klasse
Eine der einfachsten Methoden besteht darin, jedem <th>-Tag eine Klasse zuzuweisen und sie dann im style-Tag zu stylen. Hier ist wie.
<html>
<head>
<style>
table{
width: 100%
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
.name {
width: 70%
}
.id, .age {
width: 15%
}
</style>
</head>
<body>
<table>
<tr>
<th class="id">ID</th>
<th class="name">Name</th>
<th class="age">Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jackson</td>
<td>40</td>
</tr>
</table>
</body>
</html>
Ziemlich einfach. Rechts? Bei einer großen Anzahl von Spalten ist diese Methode jedoch nicht effizient.
Nehmen wir an, wir haben eine Tabelle mit 10 oder 20 Spalten und wollen für jede unterschiedliche Breiten. Jedem Tag Klassen zuzuweisen und alle zu stylen, wird eine hektische Aufgabe sein.
Es sollte eine Möglichkeit geben, dies zu tun, ohne den Tags Klassen zu geben und sie direkt im style-Tag aufzurufen. Sehen wir uns diese Technik in der folgenden Methode an.
Methode 2: Verwenden Sie den CSS-Pseudoklassenselektor
Sehen wir uns eine andere Methode an, um unsere erwartete Ausgabe mit einem besseren und effizienteren Code zu erzielen.
<html>
<head>
<style>
table{
width: 100%
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th:nth-child(1) {
width: 5%
}
th:nth-child(2) {
width: 70%
}
th:nth-child(3) {
width: 25%
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jackson</td>
<td>40</td>
</tr>
</table>
</body>
</html>
Lassen Sie uns verstehen, was wir im Code getan haben. Ein CSS-Selektor stimmt mit dem n-ten Kind-Element jedes Elternteils überein.
Der CSS-Pseudoklassen-Selektor :nth-child(n) wird verwendet, um Elemente basierend darauf zu vergleichen, wo sie sich in einem Geschwisterpaar befinden. Das n kann eine beliebige Zahl oder ein Schlüsselwort sein, ungerade oder gerade.
Wir wählen das <th>-Tag im style-Tag aus und rufen darauf den nth-child-Selektor auf. nth-child(1) bedeutet, dass die Spalte ID ausgewählt wird, nth-child(2) wählt die Spalte Name aus und so weiter.
Auf diese Weise können Sie die Breite der Spalte anpassen, ohne jedem Tag eine Klasse zuzuweisen.
Ein weiterer wichtiger Punkt hier ist, dass, wenn Sie die Breite der Spalten ID und Alter angeben, Sie den Breitenprozentsatz der Spalte Name nicht auswählen müssen, da die verbleibende Breite automatisch zugewiesen wird, und es wird uns das gleiche Ergebnis liefern.
Überprüfen Sie das Beispiel unten.
<html>
<head>
<style>
table{
width: 100%
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th:nth-child(1) {
width: 5%
}
th:nth-child(3) {
width: 25%
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jackson</td>
<td>40</td>
</tr>
</table>
</body>
</html>