Как я могу отображать строки внутри строк в таблице?

Question

Я пытаюсь дать эффект общих заголовков в этой таблице, а затем разделить такой заголовок на три категории. Таблица должна продолжить это подразделение до самого конца. Я вижу, что могу вставить таблицу в строку, но не хочу насытить себя таблицами. Есть ли способ получить этот эффект более простым способом?

Answer 1

Вы можете использовать атрибуты Colspan и rowspan для установки расстояния каждой ячейки по строкам и столбцам.

Например:

<table>
  <tbody>
    <tr>
        <td rowspan="2">Top Left Header</td>
        <td colspan="3">Call Standard</td>
    </tr>
    <tr>
        <td>Flagged</td>
        <td>Percent</td>
        <td>Days</td>
    </tr>
  </tbody>
</table>

Обратите внимание, что таблица заканчивается четырьмя столбцами. Первая строка определяет один столбец, который пересекает 2 строки, и столбец, который пересекает 3 столбца.

Второй ряд просто заполняет «пропущенные» столбцы; игнорируя первый, потому что он был определен ранее.

Answer 2

Вы можете использовать rowspan и colspan для достижения этой цели:

<table>
    <tr>
        <td rowspan="2">Column 1 Heading</td>
        <td colspan="3">Call Standard</td>
        <td rowspan="2">Column 3 Heading</td>
    </tr>
    <tr>
        <td>Flagged</td>
        <td>Percent</td>
        <td>Days</td>
    </tr>
    <tr>
        <td>Column 1 Value</td>
        <td>4</td>
        <td>1%</td>
        <td>6</td>
        <td>Column 3 Value</td>
    </tr>
</table>

Answer 3

Как насчет использования "colspan", как определено в стандарте HTML ? Вы примените его к ячейке, называемой «стандарт вызова», и определите, что она должна охватывать 3 ячейки.

Answer 4

Colspan, Rowspan или Table-Nesting *.

* Вложенность таблиц отвратительна, но иногда с ней легче работать, чем со сложными сериями colspans и rowspans.

Answer 5

Вам не нужно иметь другую внутреннюю таблицу ... вы можете иметь короткую строку в качестве полной строки таблицы и иметь ячейки заголовка, которые не подразделяются на rowspan, чтобы охватить ее (и соответственно использовать colspan выше и ниже ячеек).