Belajar HTML Part 13 - Tabel

Assalamu'alaikum Warahmatullaahi Wabarakaatuh.

Sebelumnya kita telah membahas tentang Gambar pada HTML. Kali ini kita akan membahas tentang Tabel. 

• Sebuah tabel dalam HTML didefinisikan dengan tag <table>
• Satu baris tabel dalam HTML didefinisikan dengan tag <tr>
• Satu kolom tabel dalam HTML didefinisikan dengan tag <td>
• Heading tabel dalam HTML didefinisikan dengan tag <th>

Langsung saja kita praktekkan dengan mengetik scrypt berikut :

<table>
 <tr>
  <th>Nama</th>
  <th>Usia</th>
 </tr>
 <tr>
  <td>Kamaludin Khoir</td>
  <td>22</td>
 </tr> 
</table>

Simpan file tersebut, misal dengan nama tabel.html. Berikut tampilan yang dihasilkan dari scrypt di atas :

1. Border

Namun demikian kita lihat scrypt di atas menghasilkan tabel tanpa garis. Jika kita ingin menambahkan garis pada tabel tersebut kita perlu menambahkan atribut border pada tag <table>.

Jelasnya, ubah file di atas dengan scrypt di bawah ini :

<table>
 <tr>
  <th>Nama</th>
  <th>Usia</th>
 </tr>
 <tr>
  <td>Kamaludin Khoir</td>
  <td>22</td>
 </tr> 
</table>

Simpan perubahan lalu jalankan pada web browser. Berikut hasilnya :

Kita juga bisa menambahkan atribut border tersebut dalam style CSS dengan menambahkan scrypt berikut :

<style>
 table, th, td {
      border: 1px solid black;
 } 
</style>

2. Collapsed Border

Dalam tampilan di atas kita melihat terdapat jarak antar cell dalam tabel. Dengan menambahkan atribut collapsed border kita bisa menghilangkan jarak tersebut. Berikut contoh scrypt-nya :

<style>
 table, th, td {
      border: 1px solid black; border-collapse: collapse;
 } 
</style>

Kita tinggal menambahkan scrypt border-collapse : collapse; seperti di atas, maka hasilnya akan berubah menjadi seperti berikut :

Seperti yang kita lihat, jarak antar cell pada tabel menghilang hingga hanya dipisahkan oleh border.

3. Cell Padding

Cell Padding berfungsi untuk mengatur jarak antara tepi cell dengan konten yang ada dalam cell tersebut. Lebih jelasnya silahkan ubah style yang telah kita buat tadi menjadi seperti berikut :

<style>
 table, th, td {
      border: 1px solid black; border-collapse: collapse;
 }
 th, td {
  padding : 15px;
 } 
</style>

Simpan perubahan dan jalankan file yang telah kita buat tadi. Berikut tampilan perubahannya :

Terdapat jarak sebesar 15 pixel antara garis tepi dengan isi cell. Untuk mengurangi dan menambah jarak, kita tinggal merubah angka 15 yang telah kita tulis tadi.

4. Border Spacing dan Text-Alignment

Border Spacing dimanfaatkan untuk mengatur jarak antar border pada sebuah tabel. Sedangkan Text Alignment digunakan untuk mengatur posisi teks dalam tabel. Contoh penggunaanya adalah sebagai berikut. Ubah scrypt yang tadi kita buat menjadi sebagai berikut :

<style>
 table, th, td {
      border: 1px solid black; border-spacing: 5px;
 } th, td {
  padding : 15px;
 } th {
      text-align: center;
 } 
</style>

Berikut perubahan yang dihasilkan :

1. Perlu diperhatikan bahwa border-spacing dimasukkan mengganti border-collapse karena border-spacing tidak bisa digunakan berbarengan dengan border-collapse.
2. Dengan menambahkan text-align: center; pada elemen th, maka teks dalam table heading akan pindah ke tengah.

5. Colspan dan Rowspan

Bagaimana jika kita ingin membuat merger untuk lebih dari satu kolom atau baris dalam tabel? Sekarang coba ubah scrypt yang tadi kita tulis menjadi seperti di bawah :

<table>
 <tr>
  <th colspan ="2">Nama</th>
  <th rowspan="2">Usia</th>
 </tr>
 <tr>
  <th>Nama Depan</th>
  <th>Nama Belakang</th>
 </tr>
 <tr>
  <td>Kamaludin</td>
  <td>Khoir</td>
  <td>22</td>
 </tr> 
</table> 
<style>
  table, th, td {
      border: 1px solid black; border-spacing: 5px;
  }
 th, td {
  padding : 15px;
  }
 th { text-align: center;
 } 
</style>

Yang perlu diperhatikan adalah :

1. Pemberian atribut colspan="2" pada cell Nama. Maksud dari scrypt ini, kita akan me-merger dua kolom menjadi satu kolom dengan isi konten Nama.
2. Pemberian atribut rowspan="2" pada cell Usia. Maksud dari scrypt ini, kita akan me-merger dua baris menjadi satu baris dengan isi konten Usia. 

Sehingga menghasilkan tampilan sebagai berikut :

6. Caption

Untuk menambahkan caption kita tinggal menambahkan tag <caption> tepat setelah tag <table>. Contohnya sebagai berikut :

<table>
 <caption>Biodata Diri</caption>
 <tr>
  <th colspan ="2">Nama</th>
  <th rowspan="2">Usia</th>
 </tr>
 <tr>
  <th>Nama Depan</th>
  <th>Nama Belakang</th>
 </tr>
 <tr>
  <td>Kamaludin</td>
  <td>Khoir</td>
  <td>22</td>
 </tr> 
</table> 
<style>
 table, th, td {
      border: 1px solid black; border-spacing: 5px;
 }
 th, td {
  padding : 15px;
  }
 th {
      text-align: center;
  } 
</style>

Berikut hasilnya :

7. Menambahkan Style Khusus Untuk Tabel yang Berbeda

Kita bisa membuat sebuah tabel dengan style khusus. Coba buka kembali file yang kita edit tadi, kemudian beri atribut pada tag <table> yang pertama yaitu atribut id dengan value t1. Kemudian buat satu tabel baru dengan id t2. Tambahkan satu baris pada kedua tabel dengan menggunakan tag <tr> dan <td>. Kemudian ubah isi dari tag <style> menjadi seperti berikut :

<style>
 table {
      width:100%;
  }
 table, th, td {
      border: 1px solid black; border-collapse: collapse;
 }
 th, td {
      padding: 5px; text-align: left;
  } 
 table#t1 tr:nth-child(even) {
      background-color: #eee;
 }
 table#t1 tr:nth-child(odd) {
     background-color:#fff; }
 table#t1 th {
      background-color: black; color: white;
 } 
</style>

Berikut scrypt lengkapnya :

<table id="t1">
 <caption>Biodata Diri</caption>
 <tr>
  <th colspan ="2">Nama</th>
  <th rowspan="2">Usia</th>
 </tr> <tr>
  <th>Nama Depan</th>
  <th>Nama Belakang</th>
 </tr>
 <tr>
  <td>Kamaludin</td>
  <td>Khoir</td>
  <td>22</td>
 </tr> 
</table> 
<table id="t2">
 <caption>Biodata Diri</caption>
 <tr>
  <th colspan ="2">Nama</th>
  <th rowspan="2">Usia</th>
 </tr>
 <tr>
  <th>Nama Depan</th>
  <th>Nama Belakang</th>
 </tr>
 <tr>
  <td>Kamaludin</td>
  <td>Khoir</td>
  <td>22</td>
 </tr> 
</table> 
<style>
 table { width:100%; }
 table, th, td { border: 1px solid black; border-collapse: collapse; }
 th, td { padding: 5px; text-align: left; }
 table#t1 tr:nth-child(even) { background-color: #eee; }
 table#t1 tr:nth-child(odd) { background-color:#fff; }
 table#t1 th { background-color: black; color: white; } 
</style>

Berikut hasilnya :

Penjelasan :

1. Kita membuat dua tabel dengan id yang berbeda yaitu t1 dan t2
2. Pada tag <style> kita memberi desain khusus pada tabel dengan id t1 dengan menambahkan elemen table#t1
3. table#t1 nth-child(even) bertujuan untuk menambahkan style khusus untuk baris anak urutan genap (baris kedua, keempat, keenam, dst)
4. background-color :#eee; maksudnya kita menambahkan style untuk background elemen yang dipilih (baris anak urutan genap) dengan kode warna #eeeeee (abu-abu)
5. table#t1 nth-child(odd) bertujuan untuk menambahkan style khusus untuk baris anak urutan ganjil (baris ketiga, kelima, ketujuh, dst)
6. background-color :#eee; maksudnya kita menambahkan style untuk background elemen yang dipilih (baris anak urutan ganjil) dengan kode warna #ffffff (putih)
7. table#t1 th bertujuan untuk menambahkan style khusus untuk Table Heading
8. background-color: black; maksudnya kita menambahkan style untuk background elemen yang dipilih (baris table heading) dengan warna black (hitam)
9. color: white; maksudnya kita menambahkan style untuk teks elemen yang dipilih (baris table heading) dengan warna white (putih)

Demikian Seri Belajar HTML untuk penjelasan tentang Tabel. Semoga bermanfaat.

Terima kasih, Wassalamu'alaikum Warahmatullaahi Wabarakaatuh.