Rowspan 및 Colspan, Col 및 Colgroup을 설명하십시오

Question

누구든지 설명 할 수 있습니다 rowspan 그리고 colspan, col 그리고 colgroup? 그리고이 W3C는 유효하고 의미 적으로 정확합니까? 어떤 상황에서 이것들이 유용합니까?

Answer 1

Colspan

<table border="1">
  <tr>
    <th colspan="2">people are...</th>
  </tr>
  <tr>
    <td>monkeys</td>
    <td>donkeys</td>
  </tr>
</table>

로우 스팬

<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 링크는 더 많은 정보를 제공합니다 ...).

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

Cols를 그룹화 할 수 있습니다. 첫 번째 및 두 번째 열이 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>

Answer 2

예, W3C는 모두 권장합니다. 다음은 문서에 대한 직접 링크입니다.

• col
• colgroup
• colspan
• rowspan

Answer 3

rowspan 그리고 colspan 디자이너가 Excel의 동일한 명령과 매우 유사한 디자이너가 셀을 '병합'할 수있는 속성입니다.

col 그리고 colgroup 설계자가 열의 개별 셀에 CSS를 적용하지 않고 CSS를 수직 열에 적용하도록 허용하십시오. 이것들이 없다면,이 작업은 HTML 테이블이 행 기반이므로 훨씬 더 어려울 것입니다.

이 네 가지 모두 유효합니다.

향후 참조를 위해 시도하십시오 http://reference.sitepoint.com/html