Пожалуйста, объясните rowspan и colspan, col и colgroup - PullRequest
11 голосов
/ 10 марта 2010

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

Ответы [ 3 ]

15 голосов
/ 10 марта 2010

1001 * Объединение столбцов * <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

Как вы видите, это для соединения ячеек таблицы - и поскольку это иногда необходимо, оно действительно (ссылки RegDwights дадут больше информации ...).

цв / COLGROUP

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>
5 голосов
/ 10 марта 2010

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

1 голос
/ 10 марта 2010

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

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

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

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

...