Блог

Проблема с семантикой. У меня есть базовая таблица со стандартным верхним и нижним колонтитулами. Каждая строка содержит порядок, под каждой строкой мне нужно отобразить другую таблицу, которая будет содержать разбивку затрат, связанных с этим порядком. Кроме того, эти внутренние таблицы будут отображаться в виде аккордеона jQuery для скрытия и отображения при необходимости (но пока я просто концентрируюсь на HTML)

Как я могу семантически подойти к этому в 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 / — Проблема здесь в том, что строка, содержащая внутреннюю таблицу, совершенно не связана со строкой заказа

Если вы ищете родительский элемент, который можно использовать для группировки связанных строк, вы можете использовать <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> элемент.