Как вы используете colspan и rowspan в таблицах HTML?

97

Я не знаю, как объединять строки и столбцы внутри HTML-таблиц.

пример

Не могли бы вы помочь мне сделать такую ​​таблицу в HTML?

html html-table Макс Фрай
источник
Слить их правильно? Вы имеете в виду colspan?
animuson
@DavidThomas Я могу сделать таблицу с 5 строками и 3 столбцами. Но я действительно не знаю, где применить rowspan и т. Д.
Макс Фрай,
14
@DAvid: Кажется довольно очевидным, что спрашивающий не знает, с чего начать, иногда бывает сложно, когда вы даже не знаете, существует ли атрибут, который вы ищете (rowspan в данном случае)
Крис Соболевски
6
Если вам посчастливилось иметь визуальный редактор, такой как Dreamweaver, хороший способ понять это, - создать основную сетку таблицы, а затем объединить вместе необходимые ячейки. Затем проверьте созданный код. Вы увидите, где объединены различные ячейки и как это делается с помощью кода. Dreamweaver обычно создает чистый и совместимый код, поэтому он будет хорошим примером для учащегося.
Surreal Dreams

Ответы:

112

Я бы предложил:

table {
    empty-cells: show;
    border: 1px solid #000;
}

table td,
table th {
    min-width: 2em;
    min-height: 2em;
    border: 1px solid #000;
}
<table>
    <thead>
        <tr>
            <th rowspan="2"></th>
            <th colspan="4">&nbsp;</th>
        </tr>
        <tr>
            <th>I</th>
            <th>II</th>
            <th>III</th>
            <th>IIII</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
         </tr>
    </tbody>
</table>
Развернуть фрагмент

Ссылки:

Дэвид просит восстановить Монику
источник
2
Не забудьте добавить красивые цвета.
Blazemonger
31
В данном случае я оставляю «красивые цвета» в качестве упражнения для читателя.
Дэвид требует восстановить Монику на работе
Если кому-то интересно, как это работает в целом, см. Отличное объяснение @ animousons ниже stackoverflow.com/a/9830847/362951
mit
117

Если вы не понимаете, как работают макеты таблиц, они в основном начинаются с x = 0, y = 0 и переходят в другое место. Давайте объясним с помощью графики, потому что это так весело!

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

Для вашей первой строки вы определяете только две ячейки. Один охватывает 2 ряда вниз, а другой - 4 столбца в поперечнике. Когда вы дойдете до конца своей первой строки, она будет выглядеть примерно так:

Превью # 0001

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
</table>

Теперь, когда строка закончилась, «указатель массива» переходит к следующей строке. Поскольку x позиция 0 уже занята предыдущей ячейкой, x переходит в позицию 1, чтобы начать заполнение ячеек. * См. Примечание о различиях между интервалами строк.

В этой строке есть четыре ячейки, которые представляют собой блоки размером 1x1, заполняя ту же ширину строки над ней.

Превью # 0002

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

Следующая строка - это все ячейки 1x1. Но, например, что, если вы добавили лишнюю ячейку? Ну, просто оторвалось бы от края справа.

Превью # 0003

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

* Но что, если бы мы вместо этого (а не добавляли дополнительную ячейку) сделали все эти ячейки равными 2? Здесь вам нужно учитывать, что даже если вы не собираетесь добавлять больше ячеек в следующую строку, строка все равно должна существовать (даже если это пустая строка). Если вы попытаетесь добавить новые ячейки в строку сразу после этого, вы заметите, что она начнет добавлять их в конец нижней строки.

Превью # 0004

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

Наслаждайтесь чудесным миром создания таблиц!

анимусон
источник
14

Если кто-то ищет диапазон строк как слева, так и справа, вот как вы можете это сделать:

table { 
    border-collapse: collapse;
}

td {
    padding: 20px; 
    border: 1px solid black; 
    text-align: center;
}
<table>
    <tbody>
    <tr>
        <td rowspan="2">LEFT</td>
        <td> 1 </td>
        <td> 2 </td>
        <td> 3 </td>
        <td> 4 </td>
        <td rowspan="2">RIGHT</td>
    </tr>
    <tr>
        <td> 5 </td>
        <td> 6 </td>
        <td> 7 </td>
        <td> 8 </td>
    </tr>
    <tr>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
    </tr>
    </tbody>
</table>
Развернуть фрагмент

В качестве альтернативы , если вы хотите добавить LEFT и RIGHT к существующему набору строк, вы можете добиться того же результата, добавив их со свернутым colspanмежду ними:

table {
    border-collapse: collapse;
}

td {
    padding: 20px; 
    border: 1px solid black; 
    text-align: center;
}
<table>
    <tbody>
    <tr>
        <td rowspan="3">LEFT</td>
        <td colspan="4" style="padding: 0; border-bottom: solid 1px transparent;"></td>
        <td rowspan="3">RIGHT</td>
    </tr>
    <tr>
        <td> 1 </td>
        <td> 2 </td>
        <td> 3 </td>
        <td> 4 </td>
    </tr>
    <tr>
        <td> 5 </td>
        <td> 6 </td>
        <td> 7 </td>
        <td> 8 </td>
    </tr>
    <tr>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
    </tr>
    </tbody>
</table>
Развернуть фрагмент

полоса дороги
источник
5

Используйте, rowspanесли вы хотите расширить ячейки вниз и colspanрасширить их.

Wadester
источник
3

Вы можете использовать rowspan="n"элемент td, чтобы он занимал nстроки, и colspan="m"элемент td, чтобы он занимал mстолбцы.

Похоже, вашему первому td нужен, rowspan="2"а следующему td нужен colspan="4".

Сюрреалистические мечты
источник
2 
<style type="text/css">
     table { border:2px black dotted; margin: auto; width: 100%; }
    tr { border: 2px red dashed; }
    td { border: 1px green solid; }
</style>
<table>
    <tr>
        <td rowspan="2">x</td> 
        <td colspan="4">y</td>
    </tr>
    <tr>
        <td>I</td>
        <td>II</td>
        <td>III</td>
        <td>IV</td>
    </tr>
    <tr>
        <td>nothing</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
hjpotter92
источник
0 
<body>
<table>
<tr><td colspan="2" rowspan="2">1</td><td colspan="4">2</td></tr>
<tr><td>3</td><td>3</td><td>3</td><td>3</td></tr>
<tr><td colspan="2">1</td><td>3</td><td>3</td><td>3</td><td>3</td></tr>
</table>
</body>
Wadester
источник
0

Colspan и Rowspan Таблица разделена на строки, и каждая строка разделена на ячейки. В некоторых ситуациях нам нужно, чтобы ячейки таблицы занимали (или объединяли) более одного столбца или строки. В этих ситуациях мы можем использовать атрибуты Colspan или Rowspan.

Colspan Атрибут colspan определяет количество столбцов, которые ячейка должна охватывать (или объединять) по горизонтали. То есть вы хотите объединить две или более ячеек подряд в одну ячейку.

<td colspan=2 >

Как колспан?

<html>
<body >
    <table border=1 >
        <tr>
            <td colspan=2 >
                Merged
            </td>
        </tr>
        <tr>
            <td>
                Third Cell
            </td>
            <td>
                Forth Cell
            </td>
        </tr>
    </table>
</body>
</html>

Rowspan Атрибут rowspan определяет количество строк, которые ячейка должна занимать по вертикали. То есть вы хотите объединить две или более ячеек в одном столбце как одну ячейку по вертикали.

<td rowspan=2 >

Как Роуспан?

<html>
<body >
    <table border=1 >
        <tr>
            <td>
                First Cell
            </td>
            <td rowspan=2 >
                Merged
            </td>
        </tr>
        <tr>
            <td valign=middle>
                Third Cell
            </td>
        </tr>
    </table>
</body>
</html>
Fel
источник
0

Я использовал ngIf для одной из моих аналогичных логических схем. это так:

<table>
<tr *ngFor="let object of objectData; let i= index;">
<td *ngIf="(i%(object.rowSpan))==0" [attr.rowspan]="object.rowSpan">{{object.value}}</td>
</tr>
</table>
Развернуть фрагмент

здесь я получаю значение rowspan из моего объекта модели.

Амуля Коппула
источник
-1

Это похоже на вашу таблицу

  <table border=1 width=50%>
<tr>
    <td rowspan="2">x</td> 
    <td colspan="4">y</td>
</tr>
<tr>
    <td bgcolor=#FFFF00 >I</td>
    <td>II</td>
    <td bgcolor=#FFFF00>III</td>
    <td>IV</td>
</tr>
<tr>
    <td>empty</td>
    <td bgcolor=#FFFF00>1</td>
    <td>2</td>
    <td bgcolor=#FFFF00>3</td>
    <td>4</td>
</tr>

Ha3Ha3Ha3
источник