Membuat table HTML. Tabel adalah sebuah perintah dalam pemograman bahasa html yang digunakan untuk menampilkan data sehingga tersusun secara rapi dalam bentuk kolom dan baris.
Pada umumnya kolom berisikan sekelompok data yang memiliki attribut yang sama. sedangkan baris merupakan data-data dari kolom-kolom tersebut.
Istilah kolom dan baris dalam dunia teknologi informasi dinamakan
Pada umumnya kolom berisikan sekelompok data yang memiliki attribut yang sama. sedangkan baris merupakan data-data dari kolom-kolom tersebut.
Istilah kolom dan baris dalam dunia teknologi informasi dinamakan
- Kolom (coloumn)
- Baris (row)
Sedangkan kolom tersebut dalam dunia database disebut dengan field-field.
 |
| Gambar 1 Tabel terdiri dari kolom dan baris |
Misalnya kita mempunyai data siswa yang terdiri dari kolom nama siswa, dan kolom jenis kelamin siswa.
Dari sini tampak bahwa nama siswa dan jenis kelamin siswa merupakan attribut dari data-data siswa. Sedangkan baris berisikan data-data siswa tersebut.
| Nama siswa | Jenis Kelamin |
| Andi | Laki-laki |
| Wati | Perempuan |
Pada data di atas, kolom terdiri dari 2 buah yang berisikan
1. nama siswa
2. jenis kelamin.
Sedangkan baris berisikan data yang terdiri dari 2 baris (2 record) yaitu
1. Andi jenis kelamin Laki-laki
2. wati jenis kelamin perempuan.
Begitulah gambaran dari sebuah tabel.
Sekarang kita akan lanjutkan tentang bagaimana membuat tabel dalam bahasa html dan attribut-attribut apa saja yang digunakan dalam pembuatan tabel menggunakan bahasa pemograman html.
Pada dokumen atau halaman HTML, penggunaan tabel lebih banyak digunakan untuk mengatur tata letak atau dengan kata lain digunakan untuk mengorganisasi data.
Selain itu dalam dokumen atau halaman html penggunaan tabel juga digunakan untuk mengatur tata letak tampilan yang berupa objek yang akan ditampilkan di halaman HTML. Namun penggunaan tabel untuk menempatkan objek sudah jarang digunakan saat ini karena adanya bahasa CSS yang berguna untuk mengatur tata letak objek di browser.
Jadi dari bentuk perintah tabel di atas terdapat beberapa perintah HTML yaitu
1. <table properti="nilai properti"></tabel>
Tag table inilah yang mendefenisikan bahwa kita akan menggunakan tabel pada halaman HTML
2. <tr properti="nilai properti"></tr>
Tag tr inilah yang mendefenisikan pengunaan baris di dalam tabel yang sudah kita ciptakan. Jadi penggunaan tag table tidak akan berguna tanpa adanya tag tr.
3. <th properti="nilai properti"></th>
Tag th berguna untuk mendefenisikan kepala baris atau judul kolom dari tabel tersebut. Penggunaan th akan menghitamkan judul kolom pada tabel tersebut. Jika anda ingin tulisan judul dari tabel berwarna hitam dapat menggunakan th untuk judulnya. Namun jika anda ingin mengeset sendiri jenis huruf, ketebelan huruf yang terdapat pada kolom anda bisa menggunakan tag <td> dan huruf pada judul menggunakan tag <font>. untuk tag font anda bisa mengunjungi page saya yang membahas tentang tag <font>
4. <td properti="nilai properti"></td>
Tag td berguna untuk membagi record atau baris yang terdapat pada tabel. jika kita memasukkan tag td menjadi 2, maka kolom yang terbentuk akan menjadi 2 buah.
5. <tbody></tbody>
Tag tbody berguna untuk mengelompokkan isi atau data dari tabel
6. <thead><thead>
Tag thead berguna untuk mengelompokkan baris judul dari tabel (header table) atau sebuah record paling atas dari baris tabel tersebut.
7. <tfoot></tfoot>
Tag tfoot berguna untuk mengelompokkan sebuah record pada baris paling bawah dari sebuah tabel.
Berikut penggunaan tag table (<table></table>)
1. Contoh tag table tanpa menggunakan th, berikut kode html tabel:
<table properti="nilai properti" properti="nilai properti">
<table properti="nilai properti" properti="nilai properti">
<tbody>
<tr properti="nilai properti">
<tr properti="nilai properti">
<td properti="nilai properti"></td>
</tr>
<tr properti="nilai properti">
<td properti="nilai properti"></td>
</tr>
</tbody>
</tbody>
</table>
| Nama | Jenis Kelamin |
| Slamet | Laki-Laki |
| Leny | Perempuan |
Contoh tabel di atas beginilah bentuk codingnya:
<table border=1>
<tbody>
<tr>
<td>Nama siswa</td>
<td>Jenis Kelamin</td>
</tr>
<tr>
<td>Andi</td>
<td>Laki-laki</td>
</tr>
<tr>
<td>Wati</td>
<td>Perempuan</td>
</tr>
</tbody>
</table>
2. Contoh tag table menggunakan th
berikut penggunaan tag table dengan <th>
<table properti="nilai properti" properti="nilai properti">
<tbody>
<tr properti="nilai properti">
<tr properti="nilai properti">
<th properti="nilai properti"></th>
</tr>
<tr properti="nilai properti">
<td properti="nilai properti"></td>
</tr>
</tbody>
</tbody>
</table>
| Nama | Jenis Kelamin | Umur |
|---|---|---|
| Muhammad Ihsan Fermana | Laki-Laki | 7 Tahun |
| Assyifa Aulia Sari | Perempuan | 5 Tahun |
| Hafizah Althafunnisa | Perempuan | 2 Tahun |
Berikut coding dari contoh tabel menggunakan th di atas
<table>
<tbody>
<tr><th>Nama</th>
<th>Jenis Kelamin</th>
<th>Umur</th>
</tr>
<tr>
<td>Muhammad Ihsan Fermana</td>
<td>Laki-Laki</td>
<td>7 Tahun</td>
</tr>
<tr>
<td>Assyifa Aulia Sari</td>
<td>Perempuan</td>
<td>5 Tahun</td>
</tr>
<tr>
<td>Hafizah Althafunnisa</td>
<td>Perempuan</td>
<td>2 Tahun</td>
</tr>
</tbody></table>
3. Contoh tabel menggunakan tag <tbody>, <thead> dan <tfoot>
<table properti="nilai properti">
<thead properti="nilai properti">
<tr properti="nilai properti">
<td properti="nilai properti"></td>
</tr>
</thead>
<tfoot properti="nilai properti">
<tr properti="nilai properti">
<td properti="nilai properti"></td>
</tr>
</tfoot>
<tbody properti="nilai properti">
<tr properti="nilai properti">
<td properti="nilai properti"></td>
</tr>
</tbody>
</table>
| No | Nama Barang | Jumlah |
| Jumlah | 20 Buah | |
| 1. | Air Mineral Botol | 11 Buah |
| 2. | Air Mineral Gelas | 9 Buah |
Berikut koding dari tabel di atas menggunakan tag <thead>,<tfoot> dan <tbody>
<table border=1>
<thead>
<tr>
<td>No</td>
<td>Nama Barang</td>
<td>Jumlah</td>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td>Jumlah</td>
<td>20 Buah</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1.</td>
<td>Air Mineral Botol</td>
<td>11 Buah</td>
</tr>
<tr>
<td>2.</td>
<td>Air Mineral Gelas</td>
<td>9 Buah</td>
</tr>
</tbody>
</table>
Penggunaan tag table tidak bisa berdiri sendiri tanpa adanya record dan kolom yang dibuat. apa saja record dan kolom tersebut, seperti penjelasan saya, record dan kolom tersebut seperti <tr> dan <td>. Begitu pula dengan tag <thead>, <tfoot> dan <tbody> ketiga tag ini tidak bisa digunakan tanpa adanya tag <tr> dan <td>. begitu juga dengan tag <tr>, tag <tr> tidak bisa digunakan tanpa adanya tag <td>.
Dari format pembuatan tabel di atas, terdapat attribut/properti yang digunakan dalam tag <tabel>, jadi pada halaman ini, saya hanya akan membahas properti-properti apa saja yang terdapat pada tag <table>. Untuk properti tag seperti <thead>,<tfoot>,<tbody>,<th>,<tr> dan <td> anda bisa melihat pada masing-masing halaman yang saya buat, sehingga anda bisa mempelajarinya lebih terstruktur.
 |
| Gambar 2 tabel hml |
1. Merah
Warna merah merupakan kolom. Tabel pada gambar 2 di atas terdiri dari 2 kolom. Kolom pertama berisi data Nama Barang, senter, pulpen dan jumlah. Sedangkan kolom kedua berisi data antara lain Jumlah 2,3,5
2. Hijau
Warna hijau merupakan judul header dari kolom. Judul header dari kolom terdiri dari Nama Barang dan Jumlah
3. Biru
Warna biru merupakan baris dari tabel. Tabel di atas memiliki baris sebanyak 4 bh (<tr>)
4. Hitam
Warna hitam merupakan isi dari tabel yang bisa buat dengan memberi perintah <tbody>.
5. Orange
Warna orange merupakan baris paling bawah dari tabel yang bisa buat dengan memberi perintah <tfoot>.
6. Ungu
Warna ungu merupakan nama dari tabel atau perintah yang digunakan untuk membuat nama tabel adalah <caption>
| Elemen table | Properti | Nilai properti | Keterangan |
|---|---|---|---|
| <table properti="nilai">
</table> contoh: <table border="1"></table> |
border | "1" dan seterusnya | Mengatur ketebalan garis tepi tabel |
| bordercolor | "#0000" - "#FFFFFF" | memberi warna garis tepi tabel tidak didukung pada HTML 5 |
|
| align | "left","center", "right", "justify" | posisi tabel di halaman browser tidak didukung pada HTML 5 |
|
| cellspacing | dalam pixels | Spasi antara batas border dengan isi dalam baris tidak didukung pada HTML 5 |
|
| cellpadding | dalam pixels | Spasi antara cell tidak didukung pada HTML 5 |
|
| width | Pixel Auto % |
Lebar dari table tidak didukung pada HTML 5 |
|
| frame | void above below hsides lhs rhs vsides box border |
Menentukan bagian mana dari border luar yang harus terlihat Tidak didukung pada HTML 5 |
|
| rules | "1" dan seterusnya | Menentukan bagian mana dari border dalam yang harus terlihat Tidak didukung pada HTML 5 |
|
| sortable | "1" dan seterusnya | Mengurutkan tabel | |
| summary | "1" dan seterusnya | Meringkas isi tabel Tidak didukung pada HTML 5 |
Berikut tag pendukung table
| Tag | Keterangan |
|---|---|
| <caption></caption> | Perintah untuk memberi nama pada tabel |
| <thead></thead> | Perintah untuk mengelompokkan baris kepala atau header dari tabel |
| <tfoot></tfoot> | Perintah untuk mengelompokkan baris footer atau bagian bawah dari tabel |
| <tbody></tbody> | Perintah untuk mengelompokkan baris-baris isi atau content dari tabel |
| <tr></tr> | Perintah untuk membuat baris pada tabel |
| <th></th> | Perintah untuk membuat kolom header atau judul kolom pada tabel |
| <td></td> | Perintah untuk membuat kolom pada tabel |
Hasil program Tabel HTML
Klik tombol "Coba Coding Tabel HTML" untuk melihat hasilnya.
0 komentar:
Post a Comment
Note: Only a member of this blog may post a comment.