HTML5에서 빈 TH를 대표하는 가장 좋은 방법은 무엇입니까?

Question

주어진 테이블이 있다고 말합니다.

       +------+------+------+
       | Col1 | Col2 | Col3 |
+------+------+------+------+
| Row1 | D1.1 | D1.2 | D1.3 |
+------+------+------+------+
| Row2 | D2.1 | D2.2 | D2.3 |
+------+------+------+------+
| Row3 | D3.1 | D3.2 | D3.3 |
+------+------+------+------+

그리고 나는 그것을 html5에서 대표하고 싶습니다. 까다로운 것은 이와 같은 테이블이 의미 적으로 중요해야하지만 왼쪽 셀은 ~ 아니다 의미 적으로 중요하지만 대신 더 중요한 열 헤더를 정렬하는 스페이서입니다. 이것을하는 가장 좋은 방법은 무엇입니까? 내 첫 번째 아이디어는 다음과 같이하는 것입니다.

<table>
    <thead>
        <tr>
            <th></th>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Row1</th>
            <td>D1.1</td>
            <td>D1.2</td>
            <td>D1.3</td>
        </tr>
        <tr>
            <th>Row2</th>
            <td>D2.1</td>
            <td>D2.2</td>
            <td>D2.3</td>
        </tr>
        <tr>
            <th>Row3</th>
            <td>D3.1</td>
            <td>D3.2</td>
            <td>D3.3</td>
        </tr>
    </tbody>
</table>

하지만 퍼팅 <th></th> 사용하는 것처럼 잘못된 느낌이 듭니다 <p>&nbsp;</p> 간격을 위해. 더 좋은 방법이 있습니까?

Answer 1

비어있는 것은 완전히 허용됩니다 <th> 유효성 또는 의미론 측면에서 말하는 요소. 사양의 어떤 것도 그것을 금지하지 않습니다. 실제로, 그것은 적어도 하나를 포함합니다 예시 그것은 빈을 사용합니다 <th> 이 목적을 위해 :

다음은 2008 년 회계 연도에 10K 제출 한 Apple의 46 페이지의 총 마진 테이블을 표시 할 수있는 방법을 보여줍니다.

<table>
 <thead>
  <tr>
   <th>
   <th>2008
   <th>2007
   <th>2006
 <tbody>
  <tr>
   <th>Net sales
   <td>$ 32,479
   <td>$ 24,006
   <td>$ 19,315
 <!-- snip -->
</table>

Answer 2

의미론 및 빈 테이블 요소에 대한 토론을 위해 참조하고 싶습니다. StackoverFlow 에서이 질문에

"빈"셀의 스타일 (배경 또는 국경과 같은)의 스타일은 때때로 "내용"의 부재/존재에 의존 할 수 있으므로 사람들이 종종   내부에. 비어있는 셀 스타일링을위한 특별한 CSS 태그가 있습니다. 여기 MDN에서.

table {
    empty-cells: hide;
}

여기에서 다른 기사를 찾을 수 있습니다 이 주제에 대한 멋진 배경 정보가 있습니다.

Answer 3

비어있는 더 나은 방법 <th></th>:

정확한 코드 :

<tr>
 <th></th>
 <th colspan="6"></th>
</tr>