Come usi colspan e rowspan nelle tabelle HTML?

Non so come unire righe e colonne all'interno di tabelle HTML.

Puoi aiutarmi a creare una tabella del genere in HTML?

Suggerirei:

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>

Riferimenti:

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

Se sei confuso come funzionano i layout delle tabelle, in pratica iniziano con x = 0, y = 0 e si fanno strada. Spieghiamo con la grafica, perché sono così divertenti!

Quando inizi una tabella, crei una griglia. La tua prima riga e cella saranno nell'angolo in alto a sinistra. Pensalo come un puntatore a un array, che si sposta a destra con ogni valore incrementato di x e si sposta verso il basso con ogni valore incrementato di y.

Per la tua prima riga, stai definendo solo due celle. Uno si estende su 2 righe in basso e uno su 4 colonne. Quindi, quando raggiungi la fine della tua prima riga, assomiglia a questo:

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

Ora che la riga è terminata, il "puntatore di matrice" salta alla riga successiva. Poiché la posizione x 0 è già occupata da una cella precedente, x salta alla posizione 1 per iniziare a riempire le celle. * Vedere la nota sulla differenza tra i riquadri.

Questa riga contiene quattro celle che sono tutti blocchi 1x1, riempiendo la stessa larghezza della riga sopra di essa.

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

La riga successiva è composta da tutte le celle 1x1. Ma, ad esempio, cosa succede se aggiungi una cella in più? Bene, sarebbe semplicemente saltato fuori dal bordo a destra.

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

* Ma cosa succede se invece (invece di aggiungere la cella extra) facciamo in modo che tutte queste celle abbiano un file di 2? La cosa che devi considerare qui è che anche se non aggiungerai altre celle nella riga successiva, la riga deve ancora esistere (anche se è una riga vuota). Se provassi ad aggiungere nuove celle nella riga immediatamente dopo, noteresti che inizierebbe ad aggiungerle alla fine della riga inferiore.

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

Goditi il ​​meraviglioso mondo della creazione di tavoli!

Se qualcuno sta cercando un rowspan sia a sinistra che a destra, ecco come puoi farlo:

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>

In alternativa , se desideri aggiungere SINISTRA e DESTRA a un set di righe esistente, puoi ottenere lo stesso risultato inserendoli con un segno compresso colspantra:

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>

Utilizzare rowspanse si desidera estendere le celle verso il basso e colspanper estenderle trasversalmente.

È possibile utilizzarlo rowspan="n"su un elemento td per estendere le nrighe e colspan="m"su un elemento td per estendere le mcolonne.

Sembra che il tuo primo td abbia bisogno di un rowspan="2"e il prossimo td abbia bisogno di un colspan="4".

La proprietà che stai cercando per quel primo 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 Una tabella è divisa in righe e ogni riga è divisa in celle. In alcune situazioni abbiamo bisogno che le celle della tabella si estendano su (o unite) più di una colonna o riga. In queste situazioni possiamo usare gli attributi Colspan o Rowspan.

Colspan L'attributo colspan definisce il numero di colonne che una cella deve estendere (o unire) orizzontalmente. Cioè, vuoi unire due o più celle di seguito in una singola cella.

<td colspan=2 > 

Come colspan?

<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 L'attributo rowspan specifica il numero di righe che una cella deve estendersi verticalmente. Cioè, vuoi unire due o più celle nella stessa colonna come una singola cella verticalmente.

<td rowspan=2 >

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

Ho usato ngIf per una mia logica simile. è il seguente:

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

qui, sto ottenendo il valore di rowspan dal mio oggetto modello.

È simile al tuo tavolo

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