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

Question 1

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

пример

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

Question 2

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

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>

Развернуть фрагмент

Ссылки:

Question 3

Если вы не понимаете, как работают макеты таблиц, они в основном начинаются с 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>

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

Question 4

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

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>

Развернуть фрагмент

Question 5

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

Question 6

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

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

Question 7

Свойство, которое вы ищете для этого первого td rowspan: http://www.angelfire.com/fl5/html-tutorial/tables/tr_code.htm

<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></tr>
</table>

Question 8

<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>

Question 9

<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>

Question 10

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>

Question 11

Я использовал 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 из моего объекта модели.

Question 12

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

  <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>