Bekerja dengan Table di HTML

 HTML sebagai bahasa markup telah menyediakan elemen table yang bisa digunakan saat ingin membuat tabel. Tabel pasa dasarnya digunakan untuk mengelompokkan suatu data secara terstruktur yang terdiri dari baris, kolom dan sel. Baris, kolom dan sel pada suatu tabel ini sangat membantu dalam melihat informasi keterkaitan di dalamnya.

A. Memahami Elemen HTML dalam Membuat Tabel

        Ketika kamu membuat tabel dengan html ada beberapa tag atau elemen html yang harus kita ketahui. Akan tetapi pada dasarnya kita sudah bisa membuat tabel dengan hanya menggunakan 3 elemen html berikut:

    1. Elemen <table> digunakan untuk mendefinisikan pembuatan tabel

    2. Elemen <tr> digunakan untuk mendefinisikan pembuatan baris pada tabel

    3. Elemen <td> digunakan untuk membuat kolom atau sel di setiap baris pada tabel

        Sering dengan perkembangan dan kebutuhan akan tabel, HTML juga menyediakan elemen-elemen opsional lain dalam pembuatan tabel seperti berikut:

    1. Elemen <th> digunakan untuk mendefinisikan header di dalam tabel

    2. Elemen <thead> digunakan untuk membungkus konten bagian judul atau kepala tabel

    3. Elemen <tbody> digunakan untuk membungkus konten bagian isi atau tubuh dari tabel

    4. Elemen <tfoot> digunakan untuk membungkus konten bagian kaki atau bawah dari table

Atribut untuk tag <table> adalah sebagai berikut:

    a. align : posisi horizontal table

    b. backround : menentukan gambar latar belakang table

    c. bgcolor : menentukan warna latar belakang table

    d. border : menentukan tebal bingkai table

    e. bordercolor : menentukan warna bingkai table

    f. bordercolorlight : menentukan warna depan bingkai table

    g. bordercolordark : menentukan warna bayangan bingkai tabel

    h. cellspacing : menentukan jarak spasi antarsel

    i. cellpadding : menentukan jarak isi sel dengan bingkai 

    j. height : menentukan tinggi tabel

    k. widht : menentukan lebar tabel

    l. valign : menentukan posisi teks dalam sel 

Contoh: 

B. Mengatur Jarak Sel dengan Cell 

        Atribut cellpadding adalah atribut untuk mengatur jarak teks dengan garis di dalam sel. Atribut ini dapat diberikan kepada tag <table>.

contoh : 

<table border="1" cellpadding="8">

Nilai 8 pada atribut cellpadding adalah ukuran jarak antara teks dengan jarak.

Contoh: 

C. Menggabungkan Sel pada Tabel HTML

        Untuk menggabungkan beberapa sel menjadi satu pada suatu tabel, HTML menyediakan beberapa atribut yang bisa digunakan seperti berikut:

    1. Atribut rowspan digunakan untuk menggabungkan baris pada tabel

    2. Atribut colspan digunakan untuk menggabungkan kolom pada tabel

Atribut tersebut dapat diterapkan pada tag td maupun th. 

Contoh:

D. Memberikan Warna dan Jarak Antar Sel pada HTML

        HTML menyediakan atribut cellpadding yang bisa kamu gunakan untuk mengatur jarak antar sel. Semakin tinggi nilai yang ada pada atribut cellpadding maka jarak antar sel akan semakin lebar begitupun sebaliknya. Kita juga bisa memberikan warna latar belakang pada sel atau tabel dengan menggunakan atribut bgcolor kemudian diisi dengan warna.

 Contoh: