Html Part 3: Tabel HTML

Membuat Tabel HTML

IV.                   Membuat Tabel HTML

Tabel merupakan salah satu bagian penting dalam sebuah dokumen, selain tabel lebih mudah dibaca oleh pembaca, pembuatan tabel sederhana pun sangat mudah.

            A.       Struktur Tabel HTML

<table border = ‘1px’>

                       <caption>

                                       (Judul, keterangan atau caption tabel)

                       </caption>

                       <thead>

                                       <tr>

                                                       <td>

                                                                       Kolom Header 1

                                                       </td>

                                                       <td>

                                                                       Kolom Header 2

                                                       </td>

                                       </tr>

                       </thead>

                       <tbody>

                                       <tr>

                                                       <td>

                                                                       Baris ke 1, kolom ke 1

                                                       </td>

                                                       <td>

                                                                       Baris ke 1, kolom ke 2

                                                       </td>

                                       </tr>

                                       <tr>

                                                       <td>

                                                                       Baris ke 2, kolom ke 1

                                                       </td>

                                                       <td>

                                                                       Baris ke 2, kolom ke 2

                                                       </td>

                                       </tr>

                       </tbody>

       </table>

            B.                 Tampilan tabel pada web browser

                         

Gambar IV.1 Tampilan tabel HTML pada web browser

            c.                 Colspan dan Rowspan

                     1.                  Colspan

Colspan pada tabel HTML berfungsi untuk menggabungkan beberapa kolom menjadi 1, colspan merupakan kepanjangan dari colom span. Colspan digunakan pada tag <td>

Cara penulisannya sebagai berikut

<td colspan = ‘2’> </td>

2 didalam kode tersebut menandakan value berapa kolom yang akan digabung.

Contoh kode :

<table border = ‘1px’>

                                       <caption>

                                                       (Judul, keterangan atau caption tabel)

                                       </caption>

                                       <thead>

                                                       <tr>

                                                                       <td colspan = “2”>

                                                                                       Kolom Header Colspan 2

                                                                       </td>

                                                       </tr>

                                       </thead>

                                       <tbody>

                                                       <tr>

                                                                       <td>

                                                                                       Baris ke 1, kolom ke 1

                                                                       </td>

                                                                       <td>

                                                                                       Baris ke 1, kolom ke 2

                                                                       </td>

                                                       </tr>

                                                       <tr>

                                                                       <td>

                                                                                       Baris ke 2, kolom ke 1

                                                                       </td>

                                                                       <td>

                                                                                       Baris ke 2, kolom ke 2

                                                                       </td>

                                                       </tr>

                                       </tbody>

                       </table>

                       Hasilnya akan seperti ini :

                       

Gambar IV.2 Tampilan tabel HTML header colspan 2

                    2.                  Rowspan

Rowspan pada tabel HTML berfungsi untuk menggabungkan beberapa kolom dalam beberapa baris menjadi 1. Rowspan digunakan pada tag <td>

Cara penulisannya sebagai berikut

<td rowspan = ‘2’> </td>

2 didalam kode tersebut menandakan value berapa kolom yang akan digabung.

Contoh kode :

<table border = ‘1px’>

                                       <caption>

                                                       (Judul, keterangan atau caption tabel)

                                       </caption>

                                       <thead>

                                                       <tr>

                                                                       <td>

                                                                                       Kolom Header 1

                                                                       </td>

                                                                       <td>

                                                                                       Kolom Header 2

                                                                       </td>

                                                       </tr>

                                       </thead>

                                       <tbody>

                                                       <tr>

                                                                       <td rowspan = ‘2’>

Baris ke 1, dan Baris ke 2 kolom ke 1 digabung menjadi 1

                                                                       </td>

                                                                       <td>

                                                                                       Baris ke 1, kolom ke 2

                                                                       </td>

                                                       </tr>

                                                       <tr>

                                                                       <td>     

                                                                                       Baris ke 2, kolom ke 2

                                                                       </td>

                                                       </tr>

                                       </tbody>

                       </table>

                       Hasilnya akan seperti ini

      

                    

Gambar IV.3 Tampilan tabel HTML rowspan