Sabtu, 01 April 2017

Belajar HTML dan CSS Bagian 11 : Atribut Colspan & Rowspan Pada Tag Table

Atribut Colspan & Rowspan Pada Tag Table

     Assalamualaikum Wr. Wb. Selamat datang kembali di blog lupacode. Sebelumnya kita telah mempelajari tentang Belajar HTML dan CSSBagian 10  Bagi sahabat lupacode yang baru saja bergabung atau nyasar ke halaman ini, silahkan pelajari terlebih dahulu dari artikel yang pertama agar sahabat paham dan mengerti maksud dari artikel yang akan saya bahas kali ini. Sahabat semua dapat melihat seluruh isi artikel pada blog ini di halaman Daftar isi

lupacode - Belajar html dan css bagian 11

    Pada pembahasan materi kali ini kita akan melanjutkan dari pembahasan sebelumnya yaitu Membuat table pada html. Sekarang kita akan melanjutkan tentang bagaimana menggunakan atribut Colspan dan Rowspan pada tag <table>
      Kedua atribut ini digunakan untuk membuat margin atau menggabungkan dua buah tabel pada cell. Colspan digunakan untuk membuat dua atau lebih cell yang horizontal atau row/kolom. Rowspan digunakan untuk menggabungkan dua atau lebih cell yang vertical atau baris. Contohnya seperti ini

lupacode - atribut colspan dan rowspan 1

    Saya mempunyai sebuah tabel yang memiliki tiga buah baris, dan masing-masing barisnya memiliki sebuah kolom. Kalau saya tulis syntax html nya seperti ini

<!DOCTYPE html>
<html>
<head>
                <title>Table 2 Html</title>
</head>
<body>
                <table border="1" cellspacing="0" cellpadding="5">
                                <tr>
                                                <td>1,1</td>
                                                <td>1,2</td>
                                                <td>1,3</td>
                                </tr>
                                <tr>
                                                <td>2,1</td>
                                                <td>2,2</td>
                                                <td>2,3</td>
                                </tr>
                                <tr>
                                                <td>3,1</td>
                                                <td>3,2</td>
                                                <td>3,2</td>
                                </tr>
                </table>
</body>
</html>

Dan di dalam folder html saya simpan dengan nama table2.html saya akan coba menggabungkan dua buah kolom di baris pertama, dan nanti hasilnya akan seperti ini

lupacode - atribut colspan dan rowspan 2

Kita coba, dan ini baris yang akan saya gabung, dan kolom yang akan saya gabungkan adalah yang dua ini
<td>1,2</td>
<td>1,3</td>

Maka saya cukup menuliskan seperti ini
<td colspan=”2”>Colspan 2</td>
Dan hasilnya akan menjadi seperti ini

lupacode - atribut colspan dan rowspan 3
Saya sudah menggabungkan dua buah kolom menjadi satu menggunakan atribut colspan didalam tag <td>. Selanjutnya yang akan saya gabungkan adalah dua buah baris, dan hasilnya kira-kira seperti ini

lupacode - atribut colspan dan rowspan 4

     Nah ini sedikit lebih sulit dari pada menggabungkan kolom. Karna kita harus lebih teliti dan cermat dalam membuatnya. Saya langsung coba tulis syntax nya seperti ini

<tr>
      <td rowspan="3">Rowspan 3</td>
       <td colspan="2">Colspan 2</td>
 </tr>
 <tr>
        <td>2,2</td>
        <td>2,3</td>
 </tr>
 <tr>
        <td>3,2</td>
       <td>3,2</td>
 </tr>

       Kalian bisa coba-coba bereksperimen sendiri yah, jangan hanya terpaku terhadap syntax yang saya tulis disini. Agar nantinya kalian lebih paham dengan sendirinya. Oke kita kembali ke browser dan kita lihat hasilnya adalah seperti ini

lupacode - atribut colspan dan rowspan 5

      Supaya lebih lancar lagi saya akan buatkan sahabat semua latihan. Latihannya adalah tolong buatkan saya tabel seperti ini

lupacode - atribut colspan dan rowspan 6

     Jadi tabelnya 4 X 4 Empat baris, tiap barisnya ada 4 kolom dan saya ingin sahabat semua gabungkan 4 buah cell di tengah-tengah itu. Ya jadi tips nya adalah gunakan colspan dan rowspan bersamaan.
         Baiklah sampai sini dulu untuk pertemuan kali, semoga apa yang kita pelajari pada artikel yang saya tulis dapat sahabat mengerti dan paham akan maksud dan tujuannya. Baik kita akan lanjut ke dalam materi selanjutnya yaitu Belajar HTMLdan CSS Bagian 12

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon