Cara membuat Tabel

Sebuah dokumen tidak jarang digunakan untuk menampilkan data kepada penggunanya. Terdapat banyak cara untuk menampilkan data, mulai dari dengan menggunakan grafik, daftar, sampai dengan tabel. Untuk menampilkan data dengan grafik pada HTML, kita dapat menggunakan gambar (elemen img), sementara daftar jelas dibuat menggunakan elemen list. Bagaimana dengan tabel? HTML memiliki elemen khusus untuk membuat tabel, yaitu table.

Pembuatan Tabel

Sebuah tabel selalu terdiri dari dua elemen utama, yaitu baris dan kolom. Tentunya HTML memiliki elemen untuk membuat baris dan kolom dari sebuah tabel, tetapi sebelum membuat baris dan kolom dari tabel kita harus membuat tabelnya terlebih dahulu. Pembuatan tabel dimulai dari inisialisasi tabel, menggunakan elemen table:

<table>
    <!-- Data -->
</table>

dan selanjutnya, kita dapat menambahkan baris ke dalam tabel tersebut dengan menggunakan elemen tr:

<table>
    <tr>
        <!-- Isi Baris Tabel -->
    </tr>
    <tr>
        <!-- Isi Baris Tabel -->
    </tr>
</table>

dan setiap baris dari tabel tentunya harus diisikan dengan data, yang akan menghasilkan kolom tabel. Pengisian data pada tabel dilakukan dengan menggunakan elemen td, seperti berikut:

<table>
    <tr>
        <td>NIM</td>
        <td>Nama</td>
    </tr>
    <tr>
        <td>23511000</td>
        <td>Alex Xandra Albert Sim</td>
    </tr>
</table>

maka kita akan mendapatkan sebuah tabel HTML, seperti berikut:

Tabel Standar pada Chrome

Perhatikan bahwa dengan kode minimal kita mendapatkan sebuah tabel tanpa garis pembatas untuk setiap data, dan juga bahwa jumlah kolom dari tabel ditambahkan secara otomatis. HTML tidak membatasi jumlah kolom yang kita buat, selama elemen td berada di dalam elemen tr. Browser secara otomatis akan menambahkan jumlah kolom sesuai dengan jumlah elemen td yang terbanyak pada sebuah tr dalam HTML.

Header dari Tabel

Sebuah tabel umumnya memiliki bagian header, untuk memberikan keterangan mengenai data yang ditampilkan ke pengguna. Sebuah header dari tabel dapat berada di atas (baris pertama) dari tabel, ataupun berada pada ujung kiri (kolom pertama) dari tabel. Gambar di bawah memberikan contoh kedua jenis header tabel pada umumnya.

Atas: Header pada Baris Pertama Bawah: Header pada Kolom Pertama dan Baris Pertama

Tentunya HTML memiliki fasilitas untuk membuat kedua jenis header tersebut, baik secara tampilan maupun secara semantik. Bagaimanakah kita membuat header tabel pada HTML?
Langkah pertama dalam membuat header tabel pada HTML ialah dengan menggunakan elemen th, yang digunakan selayaknya kita menggunakan td. Misalnya, jika ingin membuat baris pertama pada tabel sebagai header, kita dapat mengisikan baris pertama dengan elemen th seluruhnya:

<table>
    <tr>
        <th>NIM</th>
        <th>Nama</th>
    </tr>
    <tr>
        <td>23511000</td>
        <td>Alex Xandra Albert Sim</td>
    </tr>
</table>

dan kita akan mendapatkan hasil sebagai berikut:

Demo Elemen th

perhatikan bagaimana teks “NIM” dan “Nama” secara otomatis dicetak tebal dan rata tengah. Elemen th akan secara otomatis memberikan kedua gaya tampilan tersebut. Jika ingin membuat setiap kolom pertama menjadi header, tentunya kita harus mengisikan kolom pertama pada tiap baris dengan elemen th:

<table>
    <tr>
        <th>&nbsp;</th>
        <th>Senin</th>
        <th>Selasa</th>
        <th>Rabu</th>
    </tr>
    <tr>
        <th>TI-A</th>
        <td>Basis Data</td>
        <td>Desain Web</td>
        <td>Matematika</td>
    </tr>
    <tr>
        <th>TI-B</th>
        <td>Desain Web</td>
        <td>Struktur Data</td>
        <td>Basis Data</td>
    </tr>
    <tr>
        <th>TI-C</th>
        <td>Struktur Data</td>
        <td>Pemrograman</td>
        <td>Matematika</td>
    </tr>
</table>

dan kita akan mendapatkan header tabel secara vertikal, pada kolom pertama:

Demo Header Vertikal

Untuk menambahkan makna semantik pada header tabel, kita dapat menggunakan dua atribut, yaitu: scope dan headers. Atribut scope digunakan untuk menghubungkan data dengan kolom atau baris dari elemen yang bersangkutan. Misalkan jika pada tabel di gambar Demo Header Vertikal di atas kita memberikan scope pada salah satu header (TI-A) seperti berikut:

<table>
    <tr>
        <th>&nbsp;</th>
        <th>Senin</th>
        <th>Selasa</th>
        <th>Rabu</th>
    </tr>
    <tr>
        <th scope="row">TI-A</th>
        <td>Basis Data</td>
        <td>Desain Web</td>
        <td>Matematika</td>
    </tr>
    <tr>
        <th>TI-B</th>
        <td>Desain Web</td>
        <td>Struktur Data</td>
        <td>Basis Data</td>
    </tr>
    <tr>
        <th>TI-C</th>
        <td>Struktur Data</td>
        <td>Pemrograman</td>
        <td>Matematika</td>
    </tr>
</table>

Berarti kita memberitahukan ke browser bahwa data yang ada pada baris yang sama dengan “TI-A” (dalam kasus ini: “Basis Data”, “Desain Web”, dan “Matematika”) merupakan keterangan untuk “TI-A”. Perlu diingat bahwa karena atribut scope hanya memberikan makna semnatik maka kita tidak akan ada perubahan tampilan. Atribut scope dapat diisikan dengan nilai col, colgroup, row, dan rowgroup. Nilai col dan row cukup jelas, sementara colgroup dan rowgroup akandi jelaskan pada bagian berikutnya.
Sampai di sini, kode untuk membuat tabel beserta makna semantiknya yang ideal ialah sebagai berikut:

<table>
    <tr>
        <th>&nbsp;</th>
        <th scope="col">Senin</th>
        <th scope="col">Selasa</th>
        <th scope="col">Rabu</th>
    </tr>
    <tr>
        <th scope="row">TI-A</th>
        <td>Basis Data</td>
        <td>Desain Web</td>
        <td>Matematika</td>
    </tr>
    <tr>
        <th scope="row">TI-B</th>
        <td>Desain Web</td>
        <td>Struktur Data</td>
        <td>Basis Data</td>
    </tr>
    <tr>
        <th scope="row">TI-C</th>
        <td>Struktur Data</td>
        <td>Pemrograman</td>
        <td>Matematika</td>
    </tr>
</table>

Atribut headers sendiri memiliki fungsi yang sama dengan atribut scope, tetapi lebih banyak digunakan untuk tabel-tabel kompleks yang banyak memerlukan penggabungan beberapa sel. Penjelasan mengenai atribut ini akan diberikan ketika pembahasan mengenai penggabungan sel dilakukan.

Tabel (table) HTML

Sekilas tentang tabel.

Tabel (table) sangat diperlukan ketika kita ingin menampilkan data yang berbentuk kolom-kolom. Dulu sebelum adanya CSS, table digunakan untuk membuat layout website namun saat ini sudah jarang dipakai sebagai layout karena faktor file yang cenderung lebih besar sehingga mempengaruhi waktu akses yang lebih lama, dalam pengelolaan dan pengeditan pun jauh lebih rumit karena banyaknya tag-tag yang dihasilkan.
Cara membuat tabel.
Untuk membuat table yang sederhana ada 3 elemen utama yaitu table, tr dan td. Tag <table> adalah untuk membuat tabel kemudian di ikuti dengan tag <tr> (table rows) adalah untuk membuat baris pada tabel kemudian tag <td> (table data) adalah untuk membuat kolom pada tabel, kolom-kolom hasil dari tr dan td ini disebut dengan table cell yaitu sebagai lokasi dimana kita memasukkan data-data yang akan di tampilkan.
Berikut adalah contoh tabel yang terdiri dari 3 baris dan 2 kolom.

<table border="1">
 <tr>
  <td>Cell 1 - Baris 1 Kolom 1</td>
  <td>Cell 2 - Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Cell 3 - Baris 2 Kolom 1</td>
  <td>Cell 4 - Baris 2 Kolom 2</td>
 </tr>
 <tr>
  <td>Cell 5 - Baris 3 Kolom 1</td>
  <td>Cell 6 - Baris 3 Kolom 2</td>
 </tr> 
</table>

Hasil:

Cell 1 – Baris 1 Kolom 1	Cell 2 – Baris 1 Kolom 2
Cell 3 – Baris 2 Kolom 1	Cell 4 – Baris 2 Kolom 2
Cell 5 – Baris 3 Kolom 1	Cell 6 – Baris 3 Kolom 2

Dalam contoh sengaja ditambah dengan atribut border agar kita dapat melihat posisi dari tabel tersebut, karena secara default nilai dari border ini adalah 0 jika tidak disertakan dengan tag <table>.
Mengatur lebar dan tinggi tabel.
Untuk mengatur lebar table digunakan atribut width atau bisa juga dengan style CSS dengan properti width. Untuk lebar dan tinggi dari td kita gunakan atribut style dengan properti width dan height.
Berikut adalah contoh tabel dengan lebar 75% dari lebar dokumen dan lebar kolom masing 50% dengan tinggi pada baris pertama adalah 40px.

<table border="1" width="75%">
 <tr>
  <td style="width:50%;height:40px;">Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 1</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 3 Kolom 1</td>
  <td>Baris 3 Kolom 2</td>
 </tr>
</table>

Hasil:

Baris 1 Kolom 1	Baris 1 Kolom 1
Baris 2 Kolom 1	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

Untuk satuan ukuran widht dan height dari atribut maupun style tersebut kita dapat menggunakan px atau %. Untuk pengaturan lebar dan tinggi pada td kita cukup memasukkan pada kolom pertama secara otomatis kolom-kolom berikutnya akan mengikuti pengaturan tersebut.
Menggabungkan kolom pada tabel
Table Cell atau baris dan kolom dari tabel tersebut dapat kita gabungkan sesuai kebutuhan bentuk tabel yang diinginkan.
Untuk menggabungkan kolom dalam tabel digunakan atribut colspan.

<table border="1" width="75%">
 <tr>
  <td colspan="2">Gabungan Kolom 1&amp;2 pada Baris 1</td>
 </tr>
 <tr>
  <td style="width:50%">Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 3 Kolom 1</td>
  <td>Baris 3 Kolom 2</td>
 </tr>
</table>

Hasil:

Gabungan Kolom 1&2 pada Baris 1
Baris 2 Kolom 1	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

Sedangkan untuk menggabungkan baris dalam tabel digunakan atribut rowspan.

<table border="1" width="75%">
 <tr>
  <td style="width:50%" rowspan="2">Gabungan Baris 1&amp;2 pada Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 3 Kolom 1</td>
  <td>Baris 3 Kolom 2</td>
 </tr>
</table>

Hasil:

Gabungan Baris 1&2 pada Kolom 1	Baris 1 Kolom 2
	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

Mengatur jarak kolom pada tabel
Untuk mengatur posisi cell dalam tabel digunakan atribut cellpadding dan cellspacing.
Cellpadding adalah untuk pengaturan sisi dari bagian dalam cell.

<table border="1" width="75%" cellpadding="8">
 <tr>
  <td style="width:50%;">Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
</table>

Hasil:

Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Sedangkan Cellspacing adalah pengaturan sisi dari bagian luar cell.

<table border="1" width="75%" cellspacing="8">
 <tr>
  <td style="width:50%">Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
</table>

Hasil:

Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Membuat titel pada tabel.
Untuk tabel yang lengkap dengan titel, kita bisa menambahkan tag <caption> tepat setelah tag <table> dan kita juga bisa mengganti td dengan th (table heading) sebagai titel dari baris maupun kolom.
Caption dan th akan secara otomatis berada pada posisi tengah dan th akan menghasilkan tulisan tebal.

<table border="1" width="75%">
<caption>Disini adalah titel tabel ini</caption>
 <tr>
  <th style="width:50%;">Header Kolom 1</th>
  <th>Header Kolom 2</th>
 </tr>
 <tr>
  <td>Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
</table>

Hasil:

Disini adalah titel tabel ini

Header Kolom 1	Header Kolom 2
Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Membuat background pada tabel
Untuk membuat background pada tabel kita gunakan atribut style dengan properti background.
Berikut adalah contoh table dengan background warna kuning muda dengan heading warna merah.

<table style="background:#ffc" width="75%" border="1">
 <tr>
  <th style="background:red;width:50%;">Header Kolom 1</th>
  <th style="background:red;">Header Kolom 2</th>
 </tr>
 <tr>
  <td>Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
</table>

Hasil: