안녕하세요, 제가 무언가를 물어 본 지 오래되었습니다. 이것은 한동안 저를 괴롭 혔습니다. 질문 자체는 제목에 있습니다.
세로 헤더가있는 HTML 표를 작성하는 데 선호하는 방법은 무엇입니까?
수직 머리글이란 테이블 <th>의 왼쪽에 (일반적으로) 머리글 ( ) 태그 가 있음을 의미합니다.
헤더 1 데이터 데이터 데이터
헤더 2 데이터 데이터 데이터
헤더 3 데이터 데이터 데이터
이렇게 생겼습니다. 지금까지 두 가지 옵션을 생각해 보았습니다.
첫 번째 옵션
<table id="vertical-1">
<caption>First Way</caption>
<tr>
<th>Header 1</th>
<td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<th>Header 2</th>
<td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<th>Header 2</th>
<td>data</td><td>data</td><td>data</td>
</tr>
</table>
이 방법의 가장 큰 장점은 그것이 나타내는 데이터 옆에 헤더가 오른쪽 (실제로 왼쪽)에 있다는 것입니다.하지만 싫은 점은 <thead>, <tbody>및 <tfoot>태그가 누락되어 있고이를 깨지 않고 포함 할 방법이 없다는 것입니다. 두 번째 옵션으로 연결되는 요소를 멋지게 배치했습니다.
두 번째 옵션
<style type="text/css">
#vertical-2 thead,#vertical-2 tbody{
display:inline-block;
}
</style>
<table id="vertical-2">
<caption>Second Way</caption>
<thead>
<tr>
<th colspan="3">Header 1</th>
</tr>
<tr>
<th colspan="3">Header 2</th>
</tr>
<tr>
<th colspan="3">Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1</td>
<td>row 1</td>
<td>row 1</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">Footer</td>
</tr>
</tfoot>
</table>
여기에서 가장 큰 장점은 완전히 설명적인 html 테이블이 있다는 것입니다. 단점은 적절한 표현에 tbody및 thead태그에 대해 약간의 CSS가 필요하고 생성 할 때 의심 스러웠 기 때문에 헤더와 데이터 간의 관계가 명확하지 않다는 것입니다. 마크 업.
따라서 두 가지 방법 모두 테이블을 렌더링해야합니다.
원하는 경우 왼쪽 또는 오른쪽에 헤더가 있으므로 제안, 대안, 브라우저 문제가 있습니까?