html тег Можем ли мы иметь несколько<tbody> в том же<table>?




тег tfoot (7)

Можем ли мы иметь несколько тегов <tbody> в том же <table> ? Если да, то в каких сценариях мы должны использовать несколько тегов <tbody> ?


В соответствии с этим примером это можно сделать: w3-struct-tables .


Проблема Martin Joiner вызвана непониманием <caption> .

Тег <caption> определяет заголовок таблицы.

Тег <caption> должен быть первым дочерним элементом <table> .

Вы можете указать только одну подпись в таблице.

Также обратите внимание, что атрибут scope должен быть помещен в элемент <th> а не на элемент <tr> .

Правильный способ написать таблицу с несколькими заголовками с несколькими заголовками будет примерно таким:

<table id="dinner_table">
    <caption>This is the only correct place to put a caption.</caption>
    <tbody>
        <tr class="header">
            <th colspan="2" scope="col">First Half of Table (British Dinner)</th>
        </tr>
        <tr>
            <th scope="row">1</th>
            <td>Fish</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Chips</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Peas</td>
        </tr>
        <tr>
            <th scope="row">4</th>
            <td>Gravy</td>
        </tr>
    </tbody>
    <tbody>
        <tr class="header">
            <th colspan="2" scope="col">Second Half of Table (Italian Dinner)</th>
        </tr>
        <tr>
            <th scope="row">5</th>
            <td>Pizza</td>
        </tr>
        <tr>
            <th scope="row">6</th>
            <td>Salad</td>
        </tr>
        <tr>
            <th scope="row">7</th>
            <td>Oil</td>
        </tr>
        <tr>
            <th scope="row">8</th>
            <td>Bread</td>
        </tr>
    </tbody>
</table>


Да, вы можете использовать их, например, я использую их для более удобного создания групп данных, например:

<table>
    <thead>
        <tr><th>Customer</th><th>Order</th><th>Month</th></tr>
    </thead>
    <tbody>
        <tr><td>Customer 1</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 1</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 1</td><td>#3</td><td>March</td></tr>
    </tbody>
    <tbody>
        <tr><td>Customer 2</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 2</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 2</td><td>#3</td><td>March</td></tr>
    </tbody>
    <tbody>
        <tr><td>Customer 3</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 3</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 3</td><td>#3</td><td>March</td></tr>
    </tbody>
</table>

Затем вы можете легко стилизовать их, например:

tbody:nth-child(odd) { background: #f5f5f5; }
tbody:nth-child(even) { background: #e5e5e5; }

Здесь вы можете посмотреть пример , он будет работать только в новых браузерах ... но это то, что я поддерживаю в своем текущем приложении, вы можете использовать группировку для JavaScript и т. Д. Главное, это удобный способ визуально группировать строки, чтобы сделать данные более читаемыми. Конечно, есть и другие виды использования, но, насколько применимо, этот вариант является наиболее распространенным для меня.


Да. Я использую их для динамического скрытия / выявления соответствующей части таблицы, например, курса. А именно

<table>
  <tbody id="day1" style="display:none">
    <tr><td>session1</td><tr>
    <tr><td>session2</td><tr>
  </tbody>
  <tbody id="day2">
    <tr><td>session3</td><tr>
    <tr><td>session4</td><tr>
  </tbody>
  <tbody id="day3" style="display:none">
    <tr><td>session5</td><tr>
    <tr><td>session6</td><tr>
  </tbody>
</table>

Кнопка может быть включена для переключения между всем или только текущим днем, манипулируя тэдами без обработки многих строк по отдельности.


Да. Из DTD

<!ELEMENT table
     (caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>

Поэтому он ожидает один или несколько. Затем он продолжает говорить

Используйте несколько разделов tbody, когда необходимы rules между группами строк таблицы.


EDIT: тег caption принадлежит таблице и, следовательно, должен существовать только один раз. Не tbody caption с каждым элементом tbody как я:

<table>
    <caption>First Half of Table (British Dinner)</caption>
    <tbody>
        <tr><th>1</th><td>Fish</td></tr>
        <tr><th>2</th><td>Chips</td></tr>
        <tr><th>3</th><td>Pease</td></tr>
        <tr><th>4</th><td>Gravy</td></tr>
    </tbody>
    <caption>Second Half of Table (Italian Dinner)</caption>
    <tbody>
        <tr><th>5</th><td>Pizza</td></tr>
        <tr><th>6</th><td>Salad</td></tr>
        <tr><th>7</th><td>Oil</td></tr>
        <tr><th>8</th><td>Bread</td></tr>
    </tbody>
</table>

ПЯТЫЙ ПРИМЕР ВЫШЕ: НЕ КОПИРОВАТЬ

Вышеприведенный пример не отображается так, как вы ожидали бы, потому что подобная запись указывает на непонимание тега caption . Вам понадобится много хакеров CSS, чтобы сделать их корректными, потому что вы будете идти против стандартов.

Я искал стандарты W3Cs в ​​теге caption но не смог найти явное правило, в котором говорится, что на таблицу должен быть только один элемент caption но это действительно так.


Кроме того, если вы запустите HTML-документ с несколькими тегами <tbody> через HTML Validator W3C , с HTML5 DOCTYPE, он успешно проверит.





xhtml