tutorial HTML. Menggabungkan sel

Untuk menggabungkan dua atau lebih sel menjadi satu, gunakan atribut colspan dan rowspan dari tag ... Atribut colspan menetapkan jumlah sel untuk digabungkan secara horizontal. Atribut rowspan bekerja dengan cara yang sama, dengan satu-satunya perbedaan yang mencakup sel secara vertikal. Sebelum menambahkan atribut, periksa jumlah sel di setiap baris untuk memastikan tidak ada kesalahan yang dilemparkan. Jadi, menggantikan tiga sel, jadi harus ada tiga tag di baris berikutnya atau konstruksi seperti ...... ... Jika jumlah sel di setiap baris tidak cocok, sel phantom kosong akan muncul. Contoh 12.3 menunjukkan, meskipun valid, tetapi kode salah, di mana kesalahan serupa muncul.

Contoh 12.3. Penggabungan sel tidak valid

Penggunaan colspan yang salah

Sel 1		Sel 2
Sel 3	Sel 4

Hasil dari contoh ini ditunjukkan pada Gambar. 12.5.

Beras. 12.5. Munculnya sel tambahan di tabel

Baris pertama dari contoh memiliki tiga sel, dua di antaranya digabungkan menggunakan atribut colspan, dan baris kedua hanya menambahkan dua sel. Ini membuat sel tambahan yang ditampilkan di browser. Dapat dilihat dengan jelas pada Gambar. 12.5.

Contoh 12-4 menunjukkan penggunaan yang benar dari atribut colspan dan rowspan.

Contoh 12.4. Gabungkan sel secara vertikal dan horizontal

Menggabungkan sel

Peramban	6.0	7.0	7.0	8.0	9.0	1.0	2.0
Peramban	Internet Explorer		Opera			Firefox
Didukung	Tidak	Ya	Tidak	Ya	Ya	Ya	Ya

Hasil dari contoh ini ditunjukkan pada Gambar. 12.6.

Beras. 12.6. Tabel dengan sel yang digabungkan

Tabel ini memiliki delapan kolom dan tiga baris. Beberapa sel dengan kata "Internet Explorer", "Opera" dan "Firefox" digabungkan di mana dua, dan di mana tiga sel. Penggabungan vertikal diterapkan dalam sel berlabel "Browser".

Saya akan memberi tahu Anda secara detail dan terperinci cara menggabungkan sel secara vertikal dan horizontal dalam tabel.

Pada artikel ini, kami tidak akan menjelaskan prinsip-prinsip membuat tabel html; untuk mendapatkan pengetahuan ini, ikuti kursus HTML kami.

Untuk menggabungkan sel dalam tabel, ada dua atribut yang diberikan pada tag mereka adalah colspan (gabungan horizontal) dan rowspan (gabungan vertikal).

Beberapa orang mengalami kesulitan menggunakan atribut ini, masalah dengan penggabungan sel.

Atribut colspan dan rowspan mengambil nilai integer dari 0 hingga 1000 sebagai parameter. Berikut adalah contoh kecil bagaimana Anda dapat menggabungkan sel dalam sebuah tabel.

Sepintas, struktur yang diterapkan tidak terlalu rumit, tetapi melihat kelimpahannya dan elemen dalam kode sulit dipahami dengan prinsip apa Anda dapat menggabungkan beberapa sel lagi.

Kami menawarkan Anda cara yang serbaguna dan sangat nyaman untuk menggabungkan sel.

Untuk memulainya, siapkan bagian kosong dari tabel masa depan Anda, sajikan dengan semua sel yang terpisah. Bisa jadi meja 3x3, 6x10 dll. Kami akan memberikan setiap sel nomornya sendiri, mulai menghitung dari kiri ke kanan dan dari atas ke bawah.

Mari kita analisis pembuatan tabel yang ditunjukkan di atas menggunakan metode ini.

Ini adalah bagaimana kode template kita dan template itu sendiri akan terlihat seperti:

1	2	3	4
5	6	7	8
9	10	11	12
13	14	15	16

1	2	3	4
5	6	7	8
9	10	11	12
13	14	15	16

Anda perlu menggabungkan sel dengan angka 1,2,3 secara horizontal. Untuk melakukan ini, dalam kode, sel nomor 1, tambahkan atribut colspan dengan nilai 3. Dan hapus elemen dengan angka 2 dan 3. Tulis nomor sel yang digabungkan ke dalam sel yang dihasilkan.

1,2,3			4
5	6	7	8
9	10	11	12
13	14	15	16

1,2,3			4
5	6	7	8
9	10	11	12
13	14	15	16

Sekarang kita perlu menggabungkan sel 9 dan 13 secara vertikal. Kami melakukan prosedur serupa - kami mengatur rentang baris atribut dengan nilai 2 ke nomor sel 9, menghapus sel dari nomor 13, menulis nomor sel yang terdiri dari sel gabungan.

Ini akan mengubah kode kita dan tampilan tabel:

1,2,3			4
5	6	7	8
9,13	10	11	12
9,13	14	15	16

1,2,3			4
5	6	7	8
9,13	10	11	12
9,13	14	15	16

Tetap menggabungkan 11,12,15,16 sel menjadi satu. Untuk melakukannya, di sel No. 11, tulis atribut colspan = "2" rowspan = "2". Kami menghapus sel 12,15,16 dari kode. Kami menulis dalam nomor sel gabungan 11,12,13,14.

Ini akan mengubah kode kita dan tampilan tabel:

1,2,3			4
5	6	7	8
9,13	10	11,12,15,16
	14

1,2,3			4
5	6	7	8
9,13	10	11,12,15,16
	14

Itu saja, kami mendapatkan tabel asli, sekarang sel dapat diisi dengan informasi yang nyaman bagi Anda.

Kami harap Anda memahami prinsip membuat tabel kompleks dengan sel gabungan.

Tabel HTML memiliki dua fungsi. Yang pertama adalah tabel itu sendiri, yaitu keluaran informasi berupa tabel. Dan yang kedua adalah tata letak halaman. Potongan konten yang terpisah ditempatkan di sel tabel yang berbeda dan dengan demikian muncul di tempat yang tepat di halaman.

Membuat tabel

Mari kita lihat cara membuat tabel dalam HTML. Ini dilakukan dengan menggunakan tag

... Tabel terdiri dari baris dengan sel di dalamnya. Sel-sel ini berisi konten tabel. Menandai menambahkan baris ke tabel, dan tag

menambahkan sel ke baris. Ingatlah untuk menutup tag. Sebagai contoh, mari kita buat tabel seperti ini:

Agar bingkai tabel terlihat, tag

atribut perbatasan disetel, tetapi HTML5 tidak lagi menggunakan atribut ini dan tidak menggunakannya lagi. Selain itu, ada atribut lain untuk bekerja dengan bingkai dan mengubah latar belakang, dan sel juga memiliki atribut untuk menyelaraskan konten. Semua atribut ini juga tidak digunakan lagi, gaya harus digunakan sebagai gantinya.

Menggabungkan sel tabel

Dimungkinkan untuk menggabungkan sel tabel menjadi satu. Untuk melakukan ini, tag

ada atribut colspan yang menggabungkan sel dalam baris yang sama, dan atribut rowspan yang menggabungkan sel dari baris yang berbeda. Nilai dari atribut ini adalah jumlah sel yang akan digabungkan.

Mari kita buat tabel seperti ini:

Harap dicatat bahwa di baris kedua tabel, satu sel menggantikan dua sel, sehingga jumlah total sel di baris ini akan lebih sedikit daripada yang lain, dalam hal ini, satu.

Sekarang mari kita buat tabel seperti ini:

Tag tabel tambahan

Selain tag yang kita gunakan, ada juga tag yang juga digunakan saat membuat tabel.

- sel tajuk. Biasanya ditemukan di baris pertama tabel. Digunakan untuk membuat nama untuk kolom tabel. Dari tag

hanya berbeda dalam huruf tebal dan perataan tengah.

- ada di dalam tag , menambahkan judul ke tabel.

- berisi beberapa baris pertama tabel untuk menunjukkan gaya tertentu. Hanya ada satu tag seperti itu di tabel. Baris yang dikandungnya harus dimulai dari baris pertama.

- berisi beberapa baris tabel untuk menunjukkan gaya tertentu. Mungkin ada beberapa tag seperti itu di tabel.

- berisi baris tabel yang akan ditampilkan di bagian paling bawah tabel.

- mendefinisikan gaya untuk satu kolom tabel, mulai dari yang pertama. Artinya, tag pertama akan menentukan gaya untuk kolom pertama, tag kedua untuk kolom kedua, dan seterusnya. Bekerja secara berbeda di browser yang berbeda.