HTML에서 여러 행에 걸쳐있는 테이블 헤더를 어떻게 구성 할 수 있습니까?

Question 1

다음과 같이 테이블을 구성하고 싶습니다.

|   Major Heading 1    |  Major Heading 2    |
|   Minor1  |  Minor2  | Minor3  |  Minor4   |
----------------------------------------------
|   col1    |   col2   |   col3  |    col4   |
rest of table ...

TH 요소에 대해 한 줄만있는 것을 알면 열 정렬과 같은 헤더 행을 어떻게 구성 할 수 있습니까? 계층 적 테이블은 열 너비가 정렬되지 않기 때문에 좋은 옵션처럼 보이지 않으며 colspan과 함께 TH 태그가있는 두 행을 사용할 수도 없습니다.

Question 2

이것이 내가 할 방법입니다 ( http://jsfiddle.net/7pDqb/ 에서 바이올린 작업 ) Chrome에서 테스트되었습니다.

th, td { border: 1px solid black }

<table>
  <thead>
    <tr>
      <th colspan="2">Major 1</th>
      <th colspan="2">Major 2</th>
    </tr>
    <tr>
      <th>col1</th>
      <th>col2</th>
      <th>col3</th>
      <th>col4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data1</td>
      <td>data2</td>
      <td>data3</td>
      <td>data4</td>
    </tr>
  </tbody>
</table>

스 니펫 확장

Question 3

rowspan대신 실수로 사용 colspan했습니까? 아니면 실수로 닫는 </tr>태그를 잊었 습니까?

tvanfosson의 답변을 확장 하여 의미 및 접근성 목적으로 요소 의 scope속성을th 사용 합니다.

th, td { border: 1px solid black }

<table>
  <thead>
    <tr>
      <th colspan="2" scope='colgroup'>Major Heading 1</th>
      <th colspan="2" scope='colgroup'>Major Heading 2</th>
    </tr>
    <tr>
      <th scope='col'>Minor1</th>
      <th scope='col'>Minor2</th>
      <th scope='col'>Minor3</th>
      <th scope='col'>Minor4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>col1</td>
      <td>col2</td>
      <td>col3</td>
      <td>col4</td>
    </tr>
  </tbody>
</table>

스 니펫 확장

Question 4

그러나 여러 열에 걸쳐있는 머리글 셀의 경우 외에도 두 행에 걸쳐있는 머리글 셀이있는 테이블도 자주 표시됩니다.

여기에 예가 있습니다. 참조 col 5및 data5아래 :

    <table>
        <thead>
            <tr>
                <th colspan="2">Major 1</th>
                <th colspan="2">Major 2</th>
                <th rowspan="2">col 5</th>
            </tr>
            <tr>
                <th>col1</th>
                <th>col2</th>
                <th>col3</th>
                <th>col4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data1</td>
                <td>data2</td>
                <td>data3</td>
                <td>data4</td>
                <td>data5</td>
            </tr>
        </tbody>
    </table>

여기에 바이올린이 있습니다.

Question 5

W3C의 WAI (Web Accessibility Initiative) 웹 사이트에서는 아래 표시된 마크 업 구조를 사용한다고 말합니다.

(웹 사이트의 예제 테이블에서 렌더링 된 마크 업은 샘플 마크 업에 표시된 것과 약간 다릅니다. 링크를 참조하고 예제 테이블을 검사하십시오.)

출처 : https://www.w3.org/WAI/tutorials/tables/irregular/#table-with-two-tier-headers

<table>
  <col>
  <colgroup span="2"></colgroup>
  <colgroup span="2"></colgroup>
  <tr>
    <td rowspan="2"></td>
    <th colspan="2" scope="colgroup">Mars</th>
    <th colspan="2" scope="colgroup">Venus</th>
  </tr>
  <tr>
    <th scope="col">Produced</th>
    <th scope="col">Sold</th>
    <th scope="col">Produced</th>
    <th scope="col">Sold</th>
  </tr>
  <tr>
    <th scope="row">Teddy Bears</th>
    <td>50,000</td>
    <td>30,000</td>
    <td>100,000</td>
    <td>80,000</td>
  </tr>
  <tr>
    <th scope="row">Board Games</th>
    <td>10,000</td>
    <td>5,000</td>
    <td>12,000</td>
    <td>9,000</td>
  </tr>
</table>