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

---

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

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

---

First, your second option isn't quite valid HTML in the sense that all of the rows (TR) in a table should contain an equal number of columns (TD). Your header has 1 while the body has 3. You should use the colspan attribute to fix that.

Reference: "The THEAD, TFOOT, and TBODY sections must contain the same number of columns." - Last paragraph of section 11.2.3.

With that being said, the first option is the better approach in my opinion because it's readable regardless of whether or not I have CSS enabled. Some browsers (or search engine crawlers) don't do CSS and as such, it'll make your data make no sense as the header will then represent columns instead of rows.

---

The First Option... I think it is the better and simple approach..

---

Honestly, option 1. I would suggest you to look at this example from W3.org(link below). I think this method is the best, because this way your headings will also be interpreted right on screen readers.

https://www.w3.org/WAI/tutorials/tables/one-header/#table-with-header-cells-in-the-first-column-only

---

If you want to show a data-bound control element (like asp repeater) in your table, then first option won't be possible. Second option can be used as follows.

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

참고URL : https://stackoverflow.com/questions/6368061/most-common-way-of-writing-a-html-table-with-vertical-headers