Si prega di spiegare rowspan e colspan, Col e colgroup

Question

Qualcuno può spiegare rowspan e colspan, col e colgroup? E sono questi W3C valido e semanticamente corretto? In quali circostanze sono questi utile?

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

come si vede, questo è per il collegamento da tavolo cellule -. E perché questo è a volte neccessary, è validi (link RegDwights daranno ulteriori informazioni ...)

col / colgroup

colgroup e col vengono utilizzati per impostare gli attributi per ogni riga della tabella (in modo da non dover scrivere width="80" per la prima td in ogni linea (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>

è anche possibile raggruppare i colli, diciamo la prima e la seconda colonna dovrebbe avere un with di 80, il terzo dovrebbe ottenere 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ì, sono tutti raccomandati dal W3C. Ecco i link diretti alla documentazione:

• col
• colgroup
• colspan
• rowspan

Answer 3

rowspan e colspan sono attributi che permettono al progettista di cellule 'unione' - tanto come lo stesso comando in Excel (per esempio)

.

col e colgroup consentono al progettista di applicare css ad una colonna verticale, anziché dover applicare css alle singole celle in una colonna. Senza questi, questo compito sarebbe molto più difficile in quanto le tabelle HTML sono row-based.

Tutti e quattro di questi sono validi.

Per riferimento futuro, prova a http://reference.sitepoint.com/html