Bagaimana Anda menggunakan colspan dan rowpan dalam tabel HTML?

97

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

Contoh

Bisakah Anda membantu saya membuat tabel seperti itu dalam HTML?

html html-table Max Frai
sumber
Gabungkan mereka kan? Maksudmu colspan?
animuson
@DavidThomas Saya bisa membuat tabel dengan 5 baris dan 3 kolom. Tapi saya tidak benar-benar tahu di mana harus menerapkan rowpan, dll.
Max Frai
14
@DAvid: Tampaknya cukup jelas bahwa penanya tidak tahu harus mulai dari mana, terkadang sulit ketika Anda bahkan tidak tahu apakah atribut yang Anda cari ada (dalam kasus ini, rowpan)
Chris Sobolewski
6
Cara yang baik untuk bersandar tentang hal ini, jika Anda cukup beruntung memiliki editor visual seperti Dreamweaver, adalah membuat kisi tabel dasar dan kemudian menggabungkan sel yang diperlukan. Kemudian periksa kode yang telah dihasilkan. Anda akan melihat di mana berbagai sel digabungkan dan bagaimana hal itu dilakukan dengan kode. Dreamweaver biasanya menghasilkan kode yang bersih dan sesuai, jadi ini akan menjadi contoh yang baik untuk pelajar.
Surreal Dreams

Jawaban:

112

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

Referensi:

David mengatakan kembalikan Monica
sumber
2
Jangan lupa tambahkan warna-warna cantik.
Blazemonger
31
Saya tinggalkan 'warna cantik' sebagai latihan untuk pembaca dalam hal ini.
David mengatakan mengembalikan Monica
Jika ada yang tertarik, bagaimana ini bekerja secara umum, lihat penjelasan @ animousons yang sangat baik di bawah stackoverflow.com/a/9830847/362951
mit
117

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:

Pratinjau # 0001

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

Pratinjau # 0002

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

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

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

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

Nikmati dunia indah membuat tabel!

animuson
sumber
14

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

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

Jalur
sumber
5

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

Wadester
sumber
3

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

Mimpi yang Nyata
sumber
2

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>
Chris Sobolewski
sumber
2 
<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>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
hjpotter92
sumber
0 
<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>
Wadester
sumber
0

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>
Fel
sumber
0

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

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

Amulya Koppula
sumber
-1

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>

Ha3Ha3Ha3
sumber