Xin chào tất cả đã lâu rồi tôi chưa hỏi một điều gì đó, đây là điều đã làm tôi bận tâm một thời gian, câu hỏi chính nó nằm trong tiêu đề:
Cách ưa thích của bạn để viết bảng HTML có tiêu đề dọc là gì?
Theo tiêu đề dọc, ý tôi là bảng có thẻ header ( <th>) ở phía bên trái (nói chung)
Tiêu đề 1 dữ liệu dữ liệu dữ liệu
Tiêu đề 2 dữ liệu dữ liệu
Tiêu đề 3 dữ liệu dữ liệu dữ liệu
Chúng 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ó tiêu đề đúng (trên thực tế trái) bên cạnh các 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>thẻ bị thiếu, và không có cách nào để đưa chúng mà không phá vỡ các yếu tố được đặt cùng nhau một cách khéo léo, dẫn tôi đến lựa 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>
Ưu điểm chính ở đây là bạn có một bảng html đầy đủ mô tả, những hạn chế đang là đại diện thích hợp cần một chút CSS cho tbodyvà theadthẻ và rằng mối quan hệ giữa các tiêu đề và dữ liệu không phải là rất rõ ràng như tôi đã nghi ngờ của tôi khi tạo đánh dấu.
Vì vậy, cả hai cách đều hiển thị bảng như thế nào, đây là một quảng cáo chiêu hàng:
Với các tiêu đề ở bên trái hoặc bên phải nếu bạn muốn, vì vậy, bất kỳ đề xuất, lựa chọn thay thế, vấn đề trình duyệt nào?