Bitte erläutern rowspan und colspan, col und colgroup
-
19-09-2019 - |
Frage
Kann mir jemand erklären rowspan
und colspan
, col
und colgroup
? Und sind diese W3C gültig und semantisch korrekt? Unter welchen Umständen sind diese nützlich?
Lösung
colspan
<table border="1">
<tr>
<th colspan="2">people are...</th>
</tr>
<tr>
<td>monkeys</td>
<td>donkeys</td>
</tr>
</table>
rowspan
<table border="1">
<tr>
<th rowspan="2">monkeys are...</th>
<td>... real monkeys</td>
</tr>
<tr>
<td>... 'unreal' monkeys (people...)</td>
</tr>
</table>
w3c
Wie Sie sehen, ist dies für den Anschluss von Tisch-Zellen -. Und weil dies manchmal notwendig ist, ist es gültig (RegDwights Links, um mehr Informationen zu bekommen ...)
col / colgroup
colgroup
und col
werden verwendet, Attribut in der Tabelle auf jede Zeile zu setzen (so müssen Sie nicht width="80"
zum ersten td
in jeder Zeile (tr
) schreiben):
<table border="1">
<colgroup>
<col width="80">
<col width="100">
<col width="320">
</colgroup>
<tr>
<td>first line, first column</td>
<td>first line, second column</td>
<td>first line, third column</td>
</tr>
<!-- more table-lines... -->
</table>
Sie können auch Gruppen die cols, können sagen, dass die erste und die zweite Säule eine with
von 80 bekommen sollte, sollte die dritte bekommen 320:
<table border="1">
<colgroup width="80" span="2"></colgroup>
<colgroup width="320" span="1"></colgroup>
<tr>
<td>first line, first column</td>
<td>first line, second column</td>
<td>first line, third column</td>
</tr>
<!-- more table-lines... -->
</table>
Andere Tipps
rowspan
und colspan
sind Attribute, die dem Designer 'merge' Zellen erlauben - ähnlich wie der gleiche Befehl in Excel (zum Beispiel)
col
und colgroup
erlauben es dem Designer CSS zu einer vertikalen Spalte anzuwenden, anstatt CSS auf einzelne Zellen in einer Spalte gelten hat. Ohne diese würde diese Aufgabe sehr viel schwieriger sein als HTML-Tabellen sind zeilenbasierte.
Alle vier davon sind gültig.
Für die Zukunft, versuchen http://reference.sitepoint.com/html