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

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

Ответ 1

Объединение столбцов

<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>

Ответ 2

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

Ответ 3

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

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

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

В дальнейшем обратитесь к http://reference.sitepoint.com/html

Ответ 4

Вы действительно потрудились прочитать спецификацию еще? Или вы просто не понимаете этого?

<!ELEMENT (TH|TD)  - O (%flow;)*       -- table header cell, table data cell-->

<!-- Scope is simpler than headers attribute for common tables -->
<!ENTITY % Scope "(row|col|rowgroup|colgroup)">

<!-- TH is for headers, TD for data, but for cells acting as both use TD -->
<!ATTLIST (TH|TD)                      -- header or data cell --
  %attrs;                              -- %coreattrs, %i18n, %events --
  abbr        %Text;         #IMPLIED  -- abbreviation for header cell --
  axis        CDATA          #IMPLIED  -- comma-separated list of related headers--
  headers     IDREFS         #IMPLIED  -- list of id for header cells --
  scope       %Scope;        #IMPLIED  -- scope covered by header cells --
  rowspan     NUMBER         1         -- number of rows spanned by cell --
  colspan     NUMBER         1         -- number of cols spanned by cell --
  %cellhalign;                         -- horizontal alignment in cells --
  %cellvalign;                         -- vertical alignment in cells --
  >

Итак, rowspan - это число строк, занимающих ячейки, то же самое с colspan.

Элемент COLGROUP создает явная группа столбцов. Количество столбцы в группе столбцов могут быть указанных в двух взаимоисключающих способы:

  • Атрибут span элемента (значение по умолчанию 1) указывает номер столбцов в группе.
  • Каждый элемент COL в COLGROUP представляет один или несколько столбцов в группа.

Colgroup используется вокруг элементов col, которые могут использоваться для стилей столбцов.