Question

我想按如下方式构建一个表：

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

看看TH元素只有一行，如何构造标题行，如列排列？分层表似乎不是一个好的选择，因为列宽不会排列，我也不能使用带有colspan的TH标签的两行。

Answer 1

我就是这样做的（在http://jsfiddle.net/7pDqb/工作小提琴）在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>

Answer 2

您是否意外使用rowspan代替colspan？或者您是否意外忘记了结束</tr>标签？

延长tvanfosson的答案，我会将scope attribute on the th elements用于语义和accessibility目的：

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>

Answer 3

然而，除了跨越多个列的标题单元格的情况之外，还经常看到具有跨越两行的标题单元格的表格。

这是一个例子。请参阅下面的col 5和data5：

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

这是fiddle。

Answer 4

W3C的Web Accessibility Initiative（WAI）网站表示要使用下面显示的标记结构。

（请注意，网站上示例表中的呈现标记与示例标记中显示的标记略有不同。请参见链接并检查示例表。）

来源：https://www.w3.org/WAI/tutorials/tables/irregular/#table-with-two-tier-headers

  <div id="carousel-custom" class="carousel slide carousel-fade" data-ride="carousel">
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="https://placehold.it/1400x600&amp;text=slide1" class="img-responsive">
    </div>
    <div class="item ">
      <img src="https://placehold.it/1400x600&amp;text=slide2" class="img-responsive">
    </div>
    <div class="item">
      <img src="https://placehold.it/1400x600&amp;text=slide3"  class="img-responsive">
    </div>
    <div class="item ">
      <img src="https://placehold.it/1400x600&amp;text=slide4" class="img-responsive">
    </div>
    <div class="item ">
      <img src="https://placehold.it/1400x600&amp;text=slide4.1" class="img-responsive">
    </div>
    <div class="item ">
      <img src="https://placehold.it/1400x600&amp;text=slide4.2" class="img-responsive">
    </div>
    <div class="item ">
      <img src="https://placehold.it/1400x600&amp;text=slide4.3" class="img-responsive">
    </div>
    <div class="item ">
      <img src="https://placehold.it/1400x600&amp;text=slide4.4" class="img-responsive">
    </div>
    <div class="item">
      <img src="https://placehold.it/1400x600&amp;text=slide5" class="img-responsive">
    </div>

    </div>
  </div>


  <!-- Indicators -->
  <ol class="carousel-indicators visible-sm-block hidden-xs-block visible-md-block visible-lg-block">
            <li data-target="#carousel-custom" data-slide-to="0" class="active">
              <img src="https://placehold.it/100x50&amp;text=slide1" class="img-responsive">
            </li>
            <li data-target="#carousel-custom" data-slide-to="1" class="regular">
              <img src="https://placehold.it/100x50&amp;text=slide2" class="img-responsive">
            </li>
            <li data-target="#carousel-custom" data-slide-to="2" class="regular">
              <img src="https://placehold.it/100x50&amp;text=slide3" class="img-responsive">
            </li>
            <li data-target="#carousel-custom" data-slide-to="3" class="regular">
              <img src="https://placehold.it/100x50&amp;text=slide4" class="img-responsive">
            </li>
            <li data-target="#carousel-custom"  class="hidden">

            </li>
            <li data-target="#carousel-custom"  class="hidden">

            </li>
            <li data-target="#carousel-custom" class="hidden">

            </li>
            <li data-target="#carousel-custom" class="hidden">

            </li>
            <li data-target="#carousel-custom" data-slide-to="9" class="regular">
              <img src="https://placehold.it/100x50&amp;text=slide5" class="img-responsive">
            </li>
            <li data-target="#carousel-custom" data-slide-to="10" class="regular">
              <img src="https://placehold.it/100x50&amp;text=slide6" class="img-responsive">
            </li>

          </ol> 
</div>

  </div>
  </div>
  </div>
<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery('#carousel-custom').carousel();

});
</script>

如何构建表头而不是跨越HTML中的多行？

4 个答案: