Por favor, explique rowspan e colspan, col e colgroup

Question

Alguém pode explicar rowspan e colspan, col e colgroup?E são estes válido W3C e semanticamente correto?Em que circunstâncias são essas útil?

Answer 1

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

como você pode ver, esta é para ligar tabela-células - e porque às vezes isso é necessário, é válido (RegDwights links vão te dar mais informações...).

col/colgroup

colgroup e col são usados para definir atributos para cada linha na tabela (assim você não tem que escrever width="80" para o primeiro td em cada linha(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>

você também pode agrupar as cols, vamos dizer, a primeira e a segunda coluna deve obter um with de 80, o terceiro deve obter 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

Sim, todos são recomendados pelo W3C. Aqui estão os links diretos para a documentação:

• col
• colgroup
• colspan
• rowspan

Answer 3

rowspan e colspan são atributos que permitem ao designer 'mesclar' células - como o mesmo comando no Excel (por exemplo).

col e colgroup Permita que o designer aplique CSS a uma coluna vertical, em vez de precisar aplicar CSS a células individuais em uma coluna. Sem isso, essa tarefa seria muito mais difícil, pois as tabelas HTML são baseadas em linha.

Todos os quatro são válidos.

Para referência futura, tente http://reference.sitePoint.com/html