Question

出现语义问题。我有一个标准页眉和页脚的基本表。每行包含一个订单，在每行下方我需要显示另一个表，其中包含与该订单相关的成本细分。此外，这些内部表格将与jQuery手风琴一起显示，以便在需要时隐藏和显示（但我现在只关注HTML）

table containing the row "Order 1" followed by a row "Order 1 related table"

我如何在HTML中以语义方式处理此问题？

<table>
    <thead>
        <th>Package number</th>
        <th>Date placed</th>
        <th>Placed by</th>
        <th>Total cost</th>
    </thead>
    <tr>
        <td>1</td>
        <td>Weds</td>
        <td>Jonno</td>
        <td>£15</td>
    </tr>
    <tr>
        <td colspan="4">
            <table>
                <thead>
                    <th>Part number</th>
                    <th>Description</th>
                    <th>Qty shipped</th>
                    <th>Weight</th>
                </thead>
                <tbody>
                    <td>18293</td>
                    <td>Blah blah blah</td>
                    <td>72</td>
                    <td>20Kg</td>
                </tbody>
            </table>
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>Thurs</td>
        <td>Jonno</td>
        <td>£1</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Fri</td>
        <td>Jonno</td>
        <td>£7</td>
    </tr>
</table>

这是一个小提琴：http://jsfiddle.net/yuW7f/ - 这里的问题是包含内部表的行与订单行完全无关

Answer 1

如果您要查找可用于对相关行进行分组的父元素，则可以使用<tbody>元素。一个表可以有多个<tbody>元素：

<table>
    <thead>
        <tr>
            <th>Package number</th>
            <th>Date placed</th>
            <th>Placed by</th>
            <th>Total cost</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Weds</td>
            <td>Jonno</td>
            <td>£15</td>
        </tr>
        <tr>
            <td colspan="4">
                <table>
                    <thead>
                        <tr>
                            <th>Part number</th>
                            <th>Description</th>
                            <th>Qty shipped</th>
                            <th>Weight</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>18293</td>
                            <td>Blah blah blah</td>
                            <td>72</td>
                            <td>20Kg</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
    <tr>
        <td>2</td>
        <td>Thurs</td>
        <td>Jonno</td>
        <td>£1</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Fri</td>
        <td>Jonno</td>
        <td>£7</td>
    </tr>
</table>

这是否使您的代码在语义上更正确是值得商榷的。您还可以提供行类以指示行是摘要行还是详细信息行，或指定属性以指示与其他行的关系。在语义上，它对我来说似乎很好。

顺便说一下，你缺少一些<tr>元素。 <tbody>，<thead>或<tfoot>元素不会替换<tr>元素。

具有相关父内容的嵌套表

1 个答案: