Câu hỏi Cách phổ biến nhất để viết một bảng HTML với các tiêu đề dọc?


Hi all nó được một lúc kể từ khi tôi đã hỏi một cái gì đó, đây là một cái gì đó đã làm phiền tôi một thời gian, câu hỏi chính nó là trong tiêu đề:

Cách ưa thích của bạn là viết các bảng HTML có tiêu đề dọc là gì?

Theo tiêu đề dọc, tôi có nghĩa là bảng có tiêu đề (<th>) ở bên trái (thường)

Tiêu đề 1 dữ liệu dữ liệu dữ liệu
Tiêu đề 2 dữ liệu dữ liệu dữ liệu
Tiêu đề 3 dữ liệu dữ liệu dữ liệu

Họ trông như thế này, cho đến nay tôi đã đưa ra hai lựa chọn

Lựa chọn đầu tiên

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

Ưu điểm chính của cách này là bạn có các tiêu đề bên phải (thực sự còn lại) bên cạnh dữ liệu mà nó đại diện, những gì tôi không thích tuy nhiên là <thead>, <tbody> và <tfoot> các thẻ bị thiếu và không có cách nào để bao gồm chúng mà không vi phạm phần tử được đặt cùng nhau, dẫn tôi đến tùy chọn thứ hai.

Sự lựa chọn thứ hai

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

Lợi thế chính ở đây là bạn có một bảng html mô tả đầy đủ, những hạn chế là đại diện thích hợp cần một chút CSS cho tbody và thead và rằng mối quan hệ giữa các tiêu đề và dữ liệu không rõ ràng như tôi đã có những nghi ngờ của mình khi tạo đánh dấu.


Vì vậy, cả hai cách làm cho bảng như thế nào nó nên, ở đây một pitcure:

render
Với các tiêu đề ở bên trái hoặc bên phải nếu bạn thích nó, vì vậy, bất kỳ đề xuất, lựa chọn thay thế, vấn đề trình duyệt?


76
2018-06-16 06:45


gốc


Đơn giản hơn thường tốt hơn. - Cerin


Các câu trả lời:


Đầu tiên, tùy chọn thứ hai của bạn không phải là HTML khá hợp lệ theo nghĩa là tất cả các hàng (TR) trong một bảng phải chứa một số cột bằng nhau (TD). Tiêu đề của bạn có 1 trong khi nội dung có 3. Bạn nên sử dụng thuộc tính colspan để sửa lỗi đó.

Tài liệu tham khảo: "Các phần THEAD, TFOOT và TBODY phải chứa cùng một số cột." - - Đoạn cuối của phần 11.2.3.

Với điều đó đang được nói, tùy chọn đầu tiên là cách tiếp cận tốt hơn trong quan điểm của tôi bởi vì nó có thể đọc được bất kể tôi có bật CSS hay không. Một số trình duyệt (hoặc trình thu thập dữ liệu công cụ tìm kiếm) không làm CSS và như vậy, nó sẽ làm cho dữ liệu của bạn không có ý nghĩa vì tiêu đề sẽ đại diện cho các cột thay vì các hàng.


35
2018-06-16 06:51



Có thực sự cần thiết cho anh ta để khắc phục vấn đề đầu tiên mà bạn đã đề cập? Vì nếu bạn chỉ thêm một ô, nó sẽ tự động chiếm không gian đầu tiên và phần còn lại bị bỏ qua? - LouwHopley
cảm ơn vì đã đánh dấu đánh dấu không hợp lệ, tôi sẽ sửa nó. - Tristian
@ Video - Tôi đã thêm một tham chiếu từ tài liệu HTML4 trong bài đăng của tôi nêu rõ rằng THEAD, TFOOT và TBODY phải chứa cùng một số cột. - Francois Deschenes
@Triztian - Một điều nữa. TFOOT phải ở ngay bên dưới THEAD (và trước TBODY). Một lần nữa, điều này được đề cập trong phần 11.2.3 của đặc tả HTML. - Francois Deschenes
@prodigitalson - The scope thuộc tính sẽ không thực sự tạo ra nhiều sự khác biệt trong trường hợp này. Nếu bạn đọc những gì nó cho, bạn sẽ hiểu. Về cơ bản nó có nghĩa là các cột đó là tiêu đề cho hàng hoặc cột chứa nó. Vấn đề là việc sử dụng nó không có ý nghĩa, trừ khi được thay thế <th> với một <td scope="row">. - Francois Deschenes


Lựa chọn thứ nhất ... Tôi nghĩ đó là cách tiếp cận tốt hơn và đơn giản hơn ..


4
2018-06-16 07:08





Thành thật mà nói, lựa chọn 1. Tôi sẽ đề nghị bạn xem ví dụ này từ W3.org (liên kết bên dưới). Tôi nghĩ phương pháp này là tốt nhất, bởi vì cách này, tiêu đề của bạn cũng sẽ được diễn giải ngay trên trình đọc màn hình.

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


1
2018-01-03 15:39





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>


-3
2017-07-14 12:47



Vui lòng thêm giải thích về cách câu trả lời của bạn giải quyết vấn đề được xác định trong câu hỏi. - ochi