Element Tabel HTML - Tabel adalah salah satu element dalam bahasa pemograman HTML. Tabel ini sering digunakan untuk membuat daftar murid / siswa oleh guru. Selain itu tabel juga berfungsi sebagai diagram yang menunjukan data dengan nilai atau frekuensi tententu. Tabel dapat anda buat pada software aplikasi Microsoft Excel, Namun anda juga bisa menampilkan atau membuat tabel ini pada blog atau website yang menggunakan bahasa pemograman HTML.
Contoh :
<table>
Sampai sini saya yakin anda sudah bisa membuat dan memahami struktur dasar Elemen HTML. namun setelah di coba, hasilnya berantakan, untuk itu mari kita beri garis pada setiap sisi tabel data yaitu dengan menambahkan attribute border. Berikutnya akan saya jelaskan tentang attribute Border pada tabel.
Terlihat jelaskan perbedaannya Tabel yang memakai Border Dengan yang tidak.
Oh iya, ada tambahan. pada element table ini terdapat header tabel, yaitu judul tabel dengan tag <TH>
Menjadi
<table>
<tr>
<th>Judul1</th>
<th>Judul2</th>
<th>Judul3</th>
</tr>
<tr>
<td>Isi1</td>
<td>Isi2</td>
<td>Isi3</td>
</tr>
<tr>
<td>Isi1,1</td>
<td>Isi2,1</td>
<td>Isi3,1</td>
</tr>
</table>
Ditambah Border menjadi
<table border="1">
<tr>
<th>Judul1</th>
<th>Judul2</th>
<th>Judul3</th>
</tr>
<tr>
<td>Isi1</td>
<td>Isi2</td>
<td>Isi3</td>
</tr>
<tr>
<td>Isi1,1</td>
<td>Isi2,1</td>
<td>Isi3,1</td>
</tr>
</table>
Setelah anda mengerti dasar-dasar element Tabel pada HTML, sekarang kita akan langsung membuat Tabel HTML yang keren dengan menggunakan CSS
Kode HTML:
Jika menggunakan internal atau eksternal CSS akan kelihatan lebih simpel.
Kode CSS:
Kode HTML:
Hasil:
Jika ingin membuat warna baris cell yang selang seling kita dapat menambahkan atribut "class" atau "id" di dalam tag <td>, dalam contoh berikut kita akan menggunakan atribut class dengan nama baris-ganjil
Mengenal Struktur pada element Tabel HTML
Pada pembuatan dan penerapa element Tabel HTML ini anda wajib meletakan struktur pengkodeannya dengan sempurna, karena jika salah penempatan tentu akan mengubah hasil akhir dari tabel ini. Elemen Tabel HTML diawali dengan tag pembuka
<table>
dan ditutup dengan tag
</table>
Sehingga menjadi
<table>
-------------------
</table>
Selanjutnya mengenal element <TR> (Tabel Row / Baris Tabel), element ini adalah element yang fungsinya menampilkan Baris. Semakin banyak elemen ini berarti semakin banyak baris yang di hasilkan. tag <TR> di awali dengan <TR> dan di akhiri dengan </TR>, Sehingga menjadi :
<TR>
-----------------
</TR>
Didalam tag TR terdapat tag TD
Tag TD ini berfungsi menampilkan data yang dimasukan atau diletakan didalam elemen TR, jadi jika kita ingin memasukan data pertama pada baris pertama jadinya :
Contoh :
<table>
<tr>
<td>Baris Pertama, Kolom Pertama</td>
</tr>
</table>
Hasil :
Jika anda ingin menambah jumlah baris, artinya anda harus menambahkan tag TR kembali menjadi dua.
Contoh :
Contoh :
<table>
<tr>
<td>Baris Pertama, Kolom Pertama</td>
</tr>
<tr>
<td>Baris Kedua, Kolom Pertama</td>
</tr>
</table>
Hasil :
Menambah jumlah Kolom menjadi 2
Jika anda ingin menambah jumlah kolom, anda harus menambahkan tag <TD>
Contoh :
<table>
<tr>
<td>Baris Pertama, Kolom Pertama</td>
<td>Baris Pertama, Kolom Kedua</td>
</tr>
<tr>
<td>Baris Kedua, Kolom Pertama</td>
</tr>
</table>
Hasil :
Sampai sini saya yakin anda sudah bisa membuat dan memahami struktur dasar Elemen HTML. namun setelah di coba, hasilnya berantakan, untuk itu mari kita beri garis pada setiap sisi tabel data yaitu dengan menambahkan attribute border. Berikutnya akan saya jelaskan tentang attribute Border pada tabel.
Tabel 1 baris, 1 kolom dengan 1 border
Contoh :
<table border="1">
<table border="1">
<tr>
<td>Baris Pertama, Kolom Pertama</td>
</tr>
</table>
Hasil :
Tabel 2 baris, 1 kolom dengan 1 border
Contoh :
<table border="1">
<tr>
<td>Baris Pertama, Kolom Pertama</td>
</tr>
<tr>
<td>Baris Kedua, Kolom Pertama</td>
</tr>
</table>
Hasil :
Tabel 2 baris, 2 kolom dengan 1 border
Contoh :
<table border="1">
<tr>
<td>Baris Pertama, Kolom Pertama</td>
<td>Baris Pertama, Kolom Kedua</td>
</tr>
<tr>
<td>Baris Kedua, Kolom Pertama</td>
</tr>
</table>
Hasil :
Terlihat jelaskan perbedaannya Tabel yang memakai Border Dengan yang tidak.
Oh iya, ada tambahan. pada element table ini terdapat header tabel, yaitu judul tabel dengan tag <TH>
Menjadi
<table>
<tr>
<th>Judul1</th>
<th>Judul2</th>
<th>Judul3</th>
</tr>
<tr>
<td>Isi1</td>
<td>Isi2</td>
<td>Isi3</td>
</tr>
<tr>
<td>Isi1,1</td>
<td>Isi2,1</td>
<td>Isi3,1</td>
</tr>
</table>
Ditambah Border menjadi
<table border="1">
<tr>
<th>Judul1</th>
<th>Judul2</th>
<th>Judul3</th>
</tr>
<tr>
<td>Isi1</td>
<td>Isi2</td>
<td>Isi3</td>
</tr>
<tr>
<td>Isi1,1</td>
<td>Isi2,1</td>
<td>Isi3,1</td>
</tr>
</table>
Setelah anda mengerti dasar-dasar element Tabel pada HTML, sekarang kita akan langsung membuat Tabel HTML yang keren dengan menggunakan CSS
Membuat Tabel Keren Dengan CSS
Contoh Table dengan CSS
Berikut adalah contoh tabel dengan menggunakan atribut style. Style "margin:0 auto" di dalam tag <table> dibawah adalah untuk membuat posisi tabel tersebut agar berada pada tengah dokumen, width adalah lebar dari tabel, dalam contoh adalah 80% berarti lebar dari tabel tersebut adalah 80% dari lebar jendela browser kita.Kode HTML:
<table style="margin:0 auto;width:80%;border-collapse:collapse;background:#ecf3eb">
<caption><h3>Contoh Tabel dengan CSS</h3></caption>
<tr>
<th style="border:1px solid #999;padding:8px 0;background: #0cf;">Header Kolom 1</th>
<th style="border:1px solid #999;padding:8px 0;background: #0cf;">Header Kolom 2</th>
<th style="border:1px solid #999;padding:8px 0;background: #0cf;">Header Kolom 3</th>
</tr>
<tr>
<td style="border:1px solid #999;padding:4px 8px;">Data Cell</td>
<td style="border:1px solid #999;padding:4px 8px;">Data Cell</td>
<td style="border:1px solid #999;padding:4px 8px;">Data Cell</td>
</tr>
<tr>
<td style="border:1px solid #999;padding:4px 8px;">Data Cell</td>
<td style="border:1px solid #999;padding:4px 8px;">Data Cell</td>
<td style="border:1px solid #999;padding:4px 8px;">Data Cell</td>
</tr>
</table>
Hasil:Header Kolom 1 | Header Kolom 2 | Header Kolom 3 |
---|---|---|
Data Cell | Data Cell | Data Cell |
Data Cell | Data Cell | Data Cell |
Jika menggunakan internal atau eksternal CSS akan kelihatan lebih simpel.
Kode CSS:
table{margin:0 auto;width:80%;border-collapse:collapse;background:#ecf3eb;}
caption h3{}
th, td{border:1px solid #999;}
th{padding:8px 0;background: #0cf;}
td{padding:4px 8px;}
Kode HTML:
<table>
<caption><h3>Contoh Tabel dengan CSS</h3></caption>
<tr>
<th>Header Kolom 1</th>
<th>Header Kolom 2</th>
<th>Header Kolom 3</th>
</tr>
<tr>
<td>Data Cell</td>
<td>Data Cell</td>
<td>Data Cell</td>
</tr>
<tr>
<td>Data Cell</td>
<td>Data Cell</td>
<td>Data Cell</td>
</tr>
</table>
Hasil:
Header Kolom 1 | Header Kolom 2 | Header Kolom 3 |
---|---|---|
Data Cell | Data Cell | Data Cell |
Data Cell | Data Cell | Data Cell |
Jika ingin membuat warna baris cell yang selang seling kita dapat menambahkan atribut "class" atau "id" di dalam tag <td>, dalam contoh berikut kita akan menggunakan atribut class dengan nama baris-ganjil
<table>
<caption><h3>Contoh Tabel dengan CSS</h3></caption>
<tr>
<th>Header Kolom 1</th>
<th>Header Kolom 2</th>
<th>Header Kolom 3</th>
</tr>
<tr>
<td class="baris-ganjil">Data Cell</td>
<td class="baris-ganjil">Data Cell</td>
<td class="baris-ganjil">Data Cell</td>
</tr>
<tr>
<td>Data Cell</td>
<td>Data Cell</td>
<td>Data Cell</td>
</tr>
</tr>
<tr>
<td class="baris-ganjil">Data Cell</td>
<td class="baris-ganjil">Data Cell</td>
<td class="baris-ganjil">Data Cell</td>
</tr>
<tr>
<td>Data Cell</td>
<td>Data Cell</td>
<td>Data Cell</td>
</tr>
</table>
Kita akan membuat background baris ganjil tersebut dengan warna putih maka di dalam CSS kita tambahkan:.baris-ganjil(background:#fff;}
Maka hasilnya adalah sebagai berikut:Header Kolom 1 | Header Kolom 2 | Header Kolom 3 |
---|---|---|
Data Cell | Data Cell | Data Cell |
Data Cell | Data Cell | Data Cell |
Terima kasih infonya , artikelnya sangat bermanfaat buat blogger pemula kaya saya
BalasHapusiya mas, senang bisa membantu
HapusKomentar ini telah dihapus oleh pengarang.
BalasHapusmakasih mas buat artikelnya, jangan lupa mampir balik di www.smartkiosku.com
BalasHapussama sama mas, baca juga ya Cara Membuka RAR yang di Password
Hapus