Làm cách nào để tôi có thể tạo tiêu đề bảng hơn là kéo dài nhiều hàng trong HTML?

Tôi muốn xây dựng một bảng như sau:

|   Major Heading 1    |  Major Heading 2    |
|   Minor1  |  Minor2  | Minor3  |  Minor4   |
----------------------------------------------
|   col1    |   col2   |   col3  |    col4   |
rest of table ...

Xem như cách chỉ có 1 dòng cho các phần tử TH, làm thế nào tôi có thể tạo hàng tiêu đề chẳng hạn như các cột xếp hàng? Bảng phân cấp có vẻ không phải là một lựa chọn tốt vì chiều rộng cột sẽ không xếp hàng và tôi cũng không thể sử dụng hai hàng có thẻ TH với colspan.

Đây là cách tôi sẽ làm điều đó (làm việc fiddle tại http://jsfiddle.net/7pDqb/ ) Đã được thử nghiệm trong Chrome.

th, td { border: 1px solid black }

<table>
  <thead>
    <tr>
      <th colspan="2">Major 1</th>
      <th colspan="2">Major 2</th>
    </tr>
    <tr>
      <th>col1</th>
      <th>col2</th>
      <th>col3</th>
      <th>col4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data1</td>
      <td>data2</td>
      <td>data3</td>
      <td>data4</td>
    </tr>
  </tbody>
</table>

Bạn vô tình sử dụng rowspanthay vì colspan? Hay bạn vô tình quên một </tr>thẻ đóng ?

Mở rộng câu trả lời của tvanfosson, tôi sẽ sử dụng scopethuộc tính trên các thphần tử cho mục đích ngữ nghĩa và khả năng truy cập :

th, td { border: 1px solid black }

<table>
  <thead>
    <tr>
      <th colspan="2" scope='colgroup'>Major Heading 1</th>
      <th colspan="2" scope='colgroup'>Major Heading 2</th>
    </tr>
    <tr>
      <th scope='col'>Minor1</th>
      <th scope='col'>Minor2</th>
      <th scope='col'>Minor3</th>
      <th scope='col'>Minor4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>col1</td>
      <td>col2</td>
      <td>col3</td>
      <td>col4</td>
    </tr>
  </tbody>
</table>

Tuy nhiên, bên cạnh trường hợp ô tiêu đề kéo dài nhiều cột, các bảng có ô tiêu đề kéo dài hai hàng cũng rất thường thấy.

Đây là một ví dụ. Xem col 5và data5bên dưới:

    <table>
        <thead>
            <tr>
                <th colspan="2">Major 1</th>
                <th colspan="2">Major 2</th>
                <th rowspan="2">col 5</th>
            </tr>
            <tr>
                <th>col1</th>
                <th>col2</th>
                <th>col3</th>
                <th>col4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data1</td>
                <td>data2</td>
                <td>data3</td>
                <td>data4</td>
                <td>data5</td>
            </tr>
        </tbody>
    </table>

Đây là trò chơi .

Trang web của W3C's Web Accessibility Initiative (WAI) cho biết sử dụng cấu trúc đánh dấu được hiển thị bên dưới.

(Lưu ý rằng đánh dấu được hiển thị trong bảng mẫu trên trang web hơi khác so với những gì chúng hiển thị trong đánh dấu mẫu. Xem liên kết và kiểm tra bảng mẫu.)

Nguồn: https://www.w3.org/WAI/tutorials/tables/irregular/#table-with-two-tier-headers

<table>
  <col>
  <colgroup span="2"></colgroup>
  <colgroup span="2"></colgroup>
  <tr>
    <td rowspan="2"></td>
    <th colspan="2" scope="colgroup">Mars</th>
    <th colspan="2" scope="colgroup">Venus</th>
  </tr>
  <tr>
    <th scope="col">Produced</th>
    <th scope="col">Sold</th>
    <th scope="col">Produced</th>
    <th scope="col">Sold</th>
  </tr>
  <tr>
    <th scope="row">Teddy Bears</th>
    <td>50,000</td>
    <td>30,000</td>
    <td>100,000</td>
    <td>80,000</td>
  </tr>
  <tr>
    <th scope="row">Board Games</th>
    <td>10,000</td>
    <td>5,000</td>
    <td>12,000</td>
    <td>9,000</td>
  </tr>
</table>