Пожалуйста, объясните rowspan и colspan, col и colgroup

Question

Может ли кто-нибудь объяснить rowspan и colspan, col и colgroup?И являются ли эти W3C действительными и семантически правильными?При каких обстоятельствах они полезны?

Answer 1

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>

Answer 2

Да, все они рекомендованы W3C.Вот прямые ссылки на документацию:

• col
• colgroup
• colspan
• rowspan

Answer 3

rowspan и colspan — это атрибуты, которые позволяют дизайнеру «объединять» ячейки, подобно той же команде в Excel (например).

col и colgroup позволить дизайнеру применять CSS к вертикальному столбцу, вместо того, чтобы применять CSS к отдельным ячейкам в столбце.Без них эта задача была бы намного сложнее, поскольку таблицы HTML основаны на строках.

Все четыре из них действительны.

Для дальнейшего использования попробуйте http://reference.sitepoint.com/html