Пожалуйста, объясните rowspan и colspan, col и colgroup
-
19-09-2019 - |
Вопрос
Может ли кто-нибудь объяснить rowspan
и colspan
, col
и colgroup
?И являются ли эти W3C действительными и семантически правильными?При каких обстоятельствах они полезны?
Решение
Colspan
<table border="1">
<tr>
<th colspan="2">people are...</th>
</tr>
<tr>
<td>monkeys</td>
<td>donkeys</td>
</tr>
</table>
размах строк
<table border="1">
<tr>
<th rowspan="2">monkeys are...</th>
<td>... real monkeys</td>
</tr>
<tr>
<td>... 'unreal' monkeys (people...)</td>
</tr>
</table>
w3c
как вы видите, это для соединения ячеек таблицы - и поскольку это иногда необходимо, это допустимо (ссылки RegDwights дадут дополнительную информацию...).
столбец/группа столбцов
colgroup
и col
используются для установки атрибутов каждой строки таблицы (поэтому вам не нужно писать width="80"
во-первых td
в каждой строке(tr
)):
<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>
вы также можете сгруппировать столбцы, скажем, первый и второй столбцы должны получить with
из 80 третий должен получить 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>
Другие советы
rowspan
и colspan
— это атрибуты, которые позволяют дизайнеру «объединять» ячейки, подобно той же команде в Excel (например).
col
и colgroup
позволить дизайнеру применять CSS к вертикальному столбцу, вместо того, чтобы применять CSS к отдельным ячейкам в столбце.Без них эта задача была бы намного сложнее, поскольку таблицы HTML основаны на строках.
Все четыре из них действительны.
Для дальнейшего использования попробуйте http://reference.sitepoint.com/html