Bagaimana Anda menggunakan colspan dan rowpan dalam tabel HTML?

Saya tidak tahu cara menggabungkan baris dan kolom di dalam tabel HTML.

Bisakah Anda membantu saya membuat tabel seperti itu dalam HTML?

Saya sarankan:

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>

Referensi:

• tdelemen .
• thelemen .
• tbodyelemen .
• theadelemen .
• tableelemen .

Jika Anda bingung bagaimana tata letak tabel bekerja, pada dasarnya mereka mulai dari x = 0, y = 0 dan terus berlanjut. Mari kita jelaskan dengan grafik, karena sangat menyenangkan!

Saat Anda memulai tabel, Anda membuat kisi. Baris dan sel pertama Anda akan berada di pojok kiri atas. Anggap saja seperti pointer array, bergerak ke kanan dengan setiap nilai x yang bertambah, dan bergerak ke bawah dengan setiap nilai y yang bertambah.

Untuk baris pertama Anda, Anda hanya menentukan dua sel. Satu bentang ke bawah 2 baris dan satu bentang ke 4 kolom. Jadi ketika Anda mencapai akhir baris pertama Anda, tampilannya akan seperti ini:

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

Sekarang baris telah berakhir, "pointer array" akan melompat ke baris berikutnya. Karena posisi x 0 sudah diambil oleh sel sebelumnya, x melompat ke posisi 1 untuk mulai mengisi sel. * Lihat catatan tentang perbedaan antara baris-baris.

Baris ini memiliki empat sel di dalamnya yang semuanya merupakan blok 1x1, mengisi dengan lebar baris yang sama di atasnya.

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

Baris berikutnya adalah semua sel 1x1. Tapi, misalnya, bagaimana jika Anda menambahkan sel ekstra? Yah, itu hanya akan muncul dari tepi ke kanan.

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

* Tapi bagaimana jika kita malah (daripada menambahkan sel ekstra) membuat semua sel ini memiliki bentang baris 2? Hal yang perlu Anda pertimbangkan di sini adalah bahwa meskipun Anda tidak akan menambahkan sel lagi di baris berikutnya, baris tersebut tetap harus ada (meskipun baris kosong). Jika Anda mencoba menambahkan sel baru di baris segera setelahnya, Anda akan melihat bahwa itu akan mulai menambahkannya ke akhir baris bawah.

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

Nikmati dunia indah membuat tabel!

Jika ada yang mencari rowpan di kiri DAN di kanan, berikut cara melakukannya:

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>

Alternatifnya , jika Anda ingin menambahkan KIRI dan KANAN ke kumpulan baris yang sudah ada, Anda dapat memperoleh hasil yang sama dengan memasukkannya dengan diciutkan colspandi antara:

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>

Gunakan rowspanjika Anda ingin memperluas sel ke bawah dan colspanke seberang.

Anda dapat menggunakan rowspan="n"elemen td untuk membuatnya menjangkau nbaris, dan colspan="m"pada elemen td untuk membuatnya menjangkau mkolom.

Sepertinya td pertama Anda membutuhkan a rowspan="2"dan td berikutnya membutuhkan a colspan="4".

Properti yang Anda cari untuk td pertama itu adalah 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 dan Rowspan Tabel dibagi menjadi beberapa baris dan setiap baris dibagi menjadi sel. Dalam beberapa situasi kita membutuhkan rentang sel tabel (atau digabungkan) lebih dari satu kolom atau baris. Dalam situasi ini, kita dapat menggunakan atribut Colspan atau Rowspan.

Colspan Atribut colspan menentukan jumlah kolom yang harus direntangkan (atau digabungkan) oleh sel secara horizontal. Artinya, Anda ingin menggabungkan dua atau lebih sel dalam satu baris menjadi satu sel.

<td colspan=2 > 

Bagaimana cara 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 Atribut baris baris menentukan jumlah baris yang harus direntangkan oleh sel secara vertikal. Artinya, Anda ingin menggabungkan dua atau lebih sel dalam kolom yang sama sebagai satu sel secara vertikal.

<td rowspan=2 >

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

Saya telah menggunakan ngIf untuk salah satu logika saya yang serupa. itu adalah sebagai berikut:

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

di sini, saya mendapatkan nilai rowpan dari objek model saya.

Ini mirip dengan tabel Anda

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