Як ви використовуєте colspan та rowspan у таблицях HTML?

Я не знаю, як об’єднати рядки та стовпці всередині HTML-таблиць.

Чи можете ви мені допомогти зробити таку таблицю в HTML?

Я б запропонував:

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>

Список літератури:

• tdелемент .
• thелемент .
• tbodyелемент .
• theadелемент .
• tableелемент .

Якщо вас бентежить, як працюють макети таблиць, вони в основному починаються з x = 0, y = 0 і проходять шлях поперек. Пояснимо з графікою, бо вони такі веселі!

Коли ви запускаєте таблицю, ви робите сітку. Ваш перший рядок і клітинка будуть у верхньому лівому куті. Подумайте про це як на вказівник масиву, рухаючись праворуч із кожним збільшенням значення x і рухаючись вниз із кожним збільшенням значення y.

Для першого рядка ви визначаєте лише дві комірки. Один охоплює 2 ряди вниз, а один - 4 стовпчики поперек. Тож коли ви доходите до кінця першого ряду, це виглядає приблизно так:

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

Тепер, коли рядок закінчився, "покажчик масиву" перескакує до наступного ряду. Оскільки х позицію 0 вже займає попередня комірка, x переходить до позиції 1, щоб почати заповнення комірок. * Див. Примітку про різницю між рядками.

Цей рядок містить чотири комірки, які є всіми блоками 1x1, заповнюючи однакову ширину рядка над ним.

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

Наступний рядок - всі клітини 1x1. Але, наприклад, що робити, якщо ви додали зайву клітинку? Ну, це просто спливе від краю праворуч.

<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? Тут потрібно врахувати, що хоча ви не збираєтеся додавати більше комірок у наступний рядок, рядок все одно повинен існувати (хоча це порожній рядок). Якщо ви спробували додати нові комірки в рядку одразу після цього, ви помітили, що він почне додавати їх до кінця нижнього рядка.

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

Насолоджуйтесь чудовим світом створення столів!

Якщо хтось шукає шпаринку зліва та з правого боку, ось як це зробити:

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>

Крім того , якщо ви хочете додати ліву та праву до існуючих наборів рядків, ви можете досягти того ж результату, ввівши їх із згорнутим 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>

Використовуйте, rowspanякщо ви хочете розширити клітини вниз і colspanпоширити поперек.

Ви можете використовувати rowspan="n"на елементі td, щоб він містив nрядки-рядки, а colspan="m"на td-елементі - mколони.

Схоже, ваш перший td потребує a, rowspan="2"а наступний - a colspan="4".

Властивість, яку ви шукаєте для першого першого веб-сайту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>

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

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

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>

Я використовував 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>

тут я отримую значення рядкової шпари від об'єкта моєї моделі.

Це схоже на ваш стіл

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