Por favor, explique rowspan y colspan, col y colgroup

Question

Puede alguien explicar rowspan y colspan, col y colgroup? Y son estos W3C válido y semánticamente correcto? ¿En qué circunstancias son estos útiles?

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 se ve, esto es para la conexión de las células de mesa -. Y debido a esto es a veces lo necesite, es válido (RegDwights enlaces darán más información ...)

col / colgroup

colgroup y col se utilizan para establecer los atributos a cada línea de la tabla (por lo que no tienen que escribir width="80" por primera td en cada línea (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>

También puede agrupar los cols, digamos que la primera y segunda columna debe obtener una with de 80, el tercero debe recibir 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

Sí, todos ellos son recomendados por el W3C. Aquí están los enlaces directos a la documentación:

• col
• colgroup
• colspan
• rowspan

Answer 3

rowspan y colspan son atributos que permiten al diseñador células 'fusionar' - al igual que el mismo comando en Excel (por ejemplo)

.

col y colgroup permiten al diseñador para aplicar css a una columna vertical, en lugar de tener que aplicar css para células individuales en una columna. Sin ellos, esta tarea sería mucho más difícil, ya que las tablas HTML son basadas en fila.

Los cuatro de ellas son válidas.

Para referencia futura, prueba a http://reference.sitepoint.com/html