Bitte erläutern rowspan und colspan, col und colgroup

Question

Kann mir jemand erklären rowspan und colspan, col und colgroup? Und sind diese W3C gültig und semantisch korrekt? Unter welchen Umständen sind diese nützlich?

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

Wie Sie sehen, ist dies für den Anschluss von Tisch-Zellen -. Und weil dies manchmal notwendig ist, ist es gültig (RegDwights Links, um mehr Informationen zu bekommen ...)

col / colgroup

colgroup und col werden verwendet, Attribut in der Tabelle auf jede Zeile zu setzen (so müssen Sie nicht width="80" zum ersten td in jeder Zeile (tr) schreiben):

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

Sie können auch Gruppen die cols, können sagen, dass die erste und die zweite Säule eine with von 80 bekommen sollte, sollte die dritte bekommen 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

Ja, sie sind alle von W3C empfohlen. Hier sind direkte Links zu der Dokumentation:

• col
• colgroup
• colspan
• rowspan

Answer 3

rowspan und colspan sind Attribute, die dem Designer 'merge' Zellen erlauben - ähnlich wie der gleiche Befehl in Excel (zum Beispiel)

.

col und colgroup erlauben es dem Designer CSS zu einer vertikalen Spalte anzuwenden, anstatt CSS auf einzelne Zellen in einer Spalte gelten hat. Ohne diese würde diese Aufgabe sehr viel schwieriger sein als HTML-Tabellen sind zeilenbasierte.

Alle vier davon sind gültig.

Für die Zukunft, versuchen http://reference.sitepoint.com/html