Como você usa colspan e rowspan em tabelas HTML?

Não sei como mesclar linhas e colunas dentro de tabelas HTML.

Você pode me ajudar a fazer essa tabela em HTML?

Eu sugiro:

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>

Referências:

• tdelemento .
• thelemento .
• tbodyelemento .
• theadelemento .
• tableelemento .

Se você está confuso sobre como funcionam os layouts de tabela, eles basicamente começam em x = 0, y = 0 e vão avançando. Vamos explicar com gráficos, porque eles são muito divertidos!

Quando você inicia uma mesa, você faz uma grade. Sua primeira linha e célula estarão no canto superior esquerdo. Pense nisso como um ponteiro de array, movendo-se para a direita com cada valor incrementado de x e para baixo com cada valor incrementado de y.

Para sua primeira linha, você está definindo apenas duas células. Um se estende por 2 linhas para baixo e o outro se estende por 4 colunas. Então, quando você chega ao final da sua primeira linha, ela se parece com isto:

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

Agora que a linha terminou, o "ponteiro do array" salta para a próxima linha. Como a posição x 0 já está ocupada por uma célula anterior, x salta para a posição 1 para começar a preencher as células. * Veja a nota sobre a diferença entre as extensões de linha.

Esta linha possui quatro células que são todos blocos 1x1, preenchendo a mesma largura da linha acima dela.

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

A próxima linha contém todas as células 1x1. Mas, por exemplo, e se você adicionar uma célula extra? Bem, iria apenas saltar da extremidade para a direita.

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

* Mas e se em vez disso (em vez de adicionar a célula extra) fizermos com que todas essas células tenham um intervalo de linha de 2? O que você precisa considerar aqui é que, embora não vá adicionar mais células na próxima linha, a linha ainda deve existir (mesmo que seja uma linha vazia). Se você tentasse adicionar novas células na linha imediatamente depois, notaria que começaria a adicioná-las ao final da linha inferior.

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

Aproveite o maravilhoso mundo da criação de tabelas!

Se alguém estiver procurando por uma extensão de linha à esquerda E à direita, veja como você pode fazer isso:

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>

Como alternativa , se você deseja adicionar ESQUERDA e DIREITA a um conjunto de linhas existente, você pode obter o mesmo resultado colocando-os recolhidos colspanentre:

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>

Use rowspanse você deseja estender as células para baixo e colspanpara estender através.

Você pode usar rowspan="n"em um elemento td para fazê-lo abranger nlinhas e colspan="m"em um elemento td para fazê-lo abranger mcolunas.

Parece que seu primeiro td precisa de um rowspan="2"e o próximo td precisa de um colspan="4".

A propriedade que você está procurando nesse primeiro 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>

<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 e Rowspan Uma tabela é dividida em linhas e cada linha é dividida em células. Em algumas situações, precisamos que as células da tabela se estendam (ou mescladas) em mais de uma coluna ou linha. Nessas situações, podemos usar os atributos Colspan ou Rowspan.

Colspan O atributo colspan define o número de colunas que uma célula deve abranger (ou mesclar) horizontalmente. Ou seja, você deseja mesclar duas ou mais células em uma linha em uma única célula.

<td colspan=2 > 

Como fazer a colagem?

<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 O atributo rowspan especifica o número de linhas que uma célula deve abranger verticalmente. Ou seja, você deseja mesclar duas ou mais células na mesma coluna como uma única célula verticalmente.

<td rowspan=2 >

Como fazer Rowspan?

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

Usei o ngIf para uma das minhas lógicas semelhantes. é o seguinte:

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

aqui, estou obtendo o valor de rowspan do meu objeto de modelo.

É semelhante à sua mesa

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