【问题标题】:Semantic HTML markup for complex tables复杂表格的语义 HTML 标记
【发布时间】:2017-06-06 02:57:44
【问题描述】:

您会使用哪些 HTML 标记来描述这样的表格:

         +--------+---------+---------+---------+
         |  TH1   |   TH2   |   TH3   |   TH4   |
+--------+--------+---------+---------+---------+
|  TR1   |  str1  |    1    |    1    |    1    |
+--------+--------+---------+---------+---------+
|  TR2   |  str2  |    1    |    2    |    1    |
+--------+--------+---------+---------+---------+
|  TR3   |  str3  |    1    |    1    |    3    |
+========+========+=========+=========+=========+
         |  total |    3    |    4    |    5    |
         +--------+---------+---------+---------+

第二个:

         +--------+---------+---------+---------+
         |  TH1   |   TH2   |   TH3   |   TH4   |    
+========+========+=========+=========+=========+
|                     GROUP 1                   |
+--------+--------+---------+---------+---------+ 
|  TR1   |  str1  |    1    |    1    |    1    |
+--------+--------+---------+---------+---------+ 
|  TR2   |  str2  |    1    |    1    |    1    |
+========+========+=========+=========+=========+
|                     GROUP 2                   |
+--------+--------+---------+---------+---------+ 
|  TR3   |  str3  |    1    |    1    |    1    |
+--------+--------+---------+---------+---------+ 
|  TR4   |  str4  |    1    |    2    |    1    |
+--------+--------+---------+---------+---------+
|  TR5   |  str5  |    1    |    1    |    3    |
+========+========+=========+=========+=========+
         |  total |    5    |    6    |    7    |
         +--------+---------+---------+---------+

(假设高水平的可访问性)

【问题讨论】:

  • 您的图片是否描述了结构或您希望单元格边框如何显示? Edwin Tufte、Jakob Nielsen 和 Robin Williams 可能会建议您不要使用边框。
  • 问题是关于语义,而不是关于边界 :) 这是 CSS 的工作。

标签: html semantics tablelayout semantic-markup xhtml-1.0-strict


【解决方案1】:

我认为您正在寻找类似的东西:

    <table>
        <thead>
            <tr>
                <th>TH1</th>
                <th>TH2</th>
                <th>TH3</th>
                <th>TH4</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td>total</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>str1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>str2</td>
                <td>1</td>
                <td>2</td>
                <td>1</td>
            </tr>
            <tr>
                <td>str3</td>
                <td>1</td>
                <td>1</td>
                <td>3</td>
            </tr>
        </tbody>
    </table>

    <table>
        <thead>
            <tr>
                <th>TH1</th>
                <th>TH2</th>
                <th>TH3</th>
                <th>TH4</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td>total</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td colspan="4">Group 1</td>
            </tr>
            <tr>
                <td>str1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>str2</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td colspan="4">Group 2</td>
            </tr>
            <tr>
                <td>str3</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>str4</td>
                <td>1</td>
                <td>1</td>
                <td>3</td>
            </tr>
            <tr>
                <td>str5</td>
                <td>1</td>
                <td>1</td>
                <td>3</td>
            </tr>
        </tbody>
    </table>

当然,一切都由你决定。

【讨论】:

  • 这是基本版本,没有范围属性、标题和摘要。有没有更好的方法来描述Group 2str3 之间的关系?他们现在都是td。也许th 再一次和多个tbody
  • 你可以在任何你喜欢的地方使用th,以及tbody的多个实例。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2012-10-10
  • 2014-06-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-10-11
  • 1970-01-01
相关资源
最近更新 更多