[html] 세로 헤더가있는 HTML 테이블을 작성하는 가장 일반적인 방법은 무엇입니까?

안녕하세요, 제가 무언가를 물어 본 지 오래되었습니다. 이것은 한동안 저를 괴롭 혔습니다. 질문 자체는 제목에 있습니다.

세로 헤더가있는 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가 필요하고 생성 할 때 의심 스러웠 기 때문에 헤더와 데이터 간의 관계가 명확하지 않다는 것입니다. 마크 업.

따라서 두 가지 방법 모두 테이블을 렌더링해야합니다.

원하는 경우 왼쪽 또는 오른쪽에 헤더가 있으므로 제안, 대안, 브라우저 문제가 있습니까?

답변

<asp:Repeater ID="hours" runat="server">
    <HeaderTemplate>
    <table id="vertical-table">
        <thead>
            <tr><th colspan="0">hours:</th></tr>
            <tr><th colspan="1">Monday</th></tr>
            <tr><th colspan="1">Tuesday</th></tr>
            <tr><th colspan="1">Wednesday</th></tr>
            <tr><th colspan="1">Thursday</th></tr>
            <tr><th colspan="1">Friday</th></tr>
            <tr><th colspan="1">Saturday</th></tr>
            <tr><th colspan="1">Sunday</th></tr>
        </thead>
        <tbody>
    </HeaderTemplate>
    <ItemTemplate>
            <tr><td><%# Container.DataItem %></td></tr>
    </ItemTemplate>
    <FooterTemplate>
        </tbody>
    </table>
    </FooterTemplate>
</asp:Repeater>

div.vertical {
  margin-left: -85px;
  position: absolute;
  width: 215px;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  /* Safari/Chrome */
  -moz-transform: rotate(-90deg);
  /* Firefox */
  -o-transform: rotate(-90deg);
  /* Opera */
  -ms-transform: rotate(-90deg);
  /* IE 9 */
}

th.vertical {
  height: 220px;
  line-height: 14px;
  padding-bottom: 20px;
  text-align: left;
}

<table>
  <thead>
    <tr>
      <th class="vertical">
        <div class="vertical">Really long and complex title 1</div>
      </th>
      <th class="vertical">
        <div class="vertical">Really long and complex title 2</div>
      </th>
      <th class="vertical">
        <div class="vertical">Really long and complex title 3</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Example</td>
      <td>a, b, c</td>
      <td>1, 2, 3</td>
    </tr>
  </tbody>
</table>