Семантическая структура таблицы HTML - альтернативные данные в строках - PullRequest
Новая
       36

Семантическая структура таблицы HTML - альтернативные данные в строках

0 голосов
/ 24 мая 2018

Это больше вопросы семантики, так как я знаю, что могу это сделать, но я должен?

У меня есть груз данных, который мне нужно отобразить на странице.Он представлен в виде табличных данных, например, так: 

| Reference | Name | Date | Status | Type |

Это один из тех случаев, когда таблицы HTML действительно должны использоваться ...

Можно щелкнуть по каждой строке, а затемразвернется, чтобы показать больше информации об этом бронировании в строке ниже.Со всеми открытыми строками структура будет выглядеть следующим образом: 

| Reference | Name | Date | Status | Type |
| Info |
| Reference | Name | Date | Status | Type |
| Info |
| Reference | Name | Date | Status | Type |
| Info |

Без использования хакерских программ CSS или JS для принудительного создания новой строки, мне нужно расположить HTML-код с ячейкой Info в отдельной строке, охватывающей всеколонны.Это не кажется мне очень семантическим.

Теперь мне интересно, хорошо ли это, или я должен пропустить использование всех таблиц вместе, или у кого-нибудь есть идея получше?

1 Ответ

0 голосов
/ 24 мая 2018

Вы всегда можете установить table, tbody, tr и td на display: block, а затем выложить желаемую структуру в CSS, используя теги HTML в качестве чистой структурной разметки: 

<html>

  <title>Testing table layout</title>

  <style>

    table, tbody, tr, td {
      display: block;
    }
    table {
      width: 610px;
    }
    tbody, tr {
      clear: both;
      width: 100%;
    }
    td {
      float: left;
      width: 33%;
    }
    td.extra {
      clear: left;
      width: 100%;
    }
    /* Colors to make cells visible */
    td { background: #FFEEEE; }
    td+td { background: #EEFFEE; }
    td+td+td { background: #EEFFFF; }
    td+td+td+td { background: #EEDDFF; }

  </style>

  <body>

    <table>

      <tr valign="baseline">

        <td>Left cell</td>

        <td>Middle cell</td>

        <td>Right cell</td>

        <td class="extra">Supplementary cell</td>

      </tr>

      <tr valign="baseline">

        <td>Left cell</td>

        <td>Middle cell</td>

        <td>Right cell</td>

        <td class="extra">Supplementary cell</td>

      </tr>

      <tr valign="baseline">

        <td>Left cell</td>

        <td>Middle cell</td>

        <td>Right cell</td>

        <td class="extra">Supplementary cell</td>

      </tr>

    </table>

  </body>

</html>

В реальной жизни вы, конечно, ограничите это определенным классом столов.Дополнительные данные в последней ячейке, конечно, изначально будут display: none и будут получать display: block только при необходимости.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...