HTML Programming 5 - Tabel Di HTML
Assalamu'alaikum
Selamat malam, masih di kebut terus pembahasan html karena berhubung belajar ulang buat UTS :v. Kali ini saya ingin membahas mengenai tabel pada html. Pada dasarnya membuat tabel di html tidak semudah membuat tabel pada aplikasi aplikasi microsoft :v. Karena untuk membuat kolom dan baris saja sudah cukup untuk menghitung berapa script tr dan td yang digunakan.
Tabel Pada HTML
Umumnya tabel pada html biasa digunakan untuk merapihkan teks, gambar, atau untuk membuat sebuah form data diri misalnya. Sehingga tampilan dari website yang menggunakan tabel akan terlihat lebih rapih. Untuk membuat tabel setidaknya ada 3 tag yang saling melengkapi dan merupakan tag wajib yang diantaranya :
- <table>...</table> : tag untuk membuat sebuah tabel
- <tr>...</tr> : tag untuk membuat baris tabel (row)
- <td>...</td> : tag untuk membuat kolom tabel (row)
Dimana struktur ketiga tag ini harus berdampingan dengan struktur sebagai berikut.
<table><tr><td></td></tr></table>
Secara default tag tabel jika tidak di beri attribute apapun, tidak akan memiliki garis tabel. Dan untuk penulisan di atas hanya akan memunculkan tabel dengan 1 kotak saja. Karena pada dasarnya tabel terdiri dari tampilan 2 dimensi antara baris dan kolom, maka berikut contoh tabel 2x2 dengan menggunakan html
<table border="1"><tr><td>test</td><td>test2</td></tr>
<tr><td>test</td><td>test2</td></tr></table>
Selain tag yang disebutkan ada beberapa tag lain seperti :
- <caption>...</caption> : untuk judul tabel, diletakkan setelah tag <table>
- <th>...</th> : fungsinya sama sebagai judul, namun diletakkan di dalam salah satu baris. Jika ingin menggunakan tag ini, tag td harus diganti dengan tag th.
Selain itu, sisanya adalah attribute attribute yang bisa digunakan pada tag table seperti cellpadding (mengatur text batas dalam pada tag tabel) dan cellspacing (mengatur antara kolom dalam tabel dengan batas luar tabel pada tag tabel). Biasanya kedua parameter ini di gunakan untuk membuat visualisasi tabel terlihat lebih hidup. Default scripting yang biasa saya gunakan di blog ini contohnya adalah script berikut.
<table font="courier" border="2" cellpadding="5" cellspacing="0">...</table>
Langsung saja masuk ke latihan, berikut contoh scripting html menggunakan beberapa tag yang disebutkan diatas. Sisanya kita bisa mengkustumisasi warna tabel dan lain lainnya menggunakan attribute yang berkaitan.
| <html> <head> <title>Latihan Tabel | Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </title> </head> <body> <table border="1" align="center" cellpadding="5" cellspacing="0" width='50%'> <tr bgcolor="red"><th>judul1</th><th>judul2</th><th>judul3</th></tr> <tr><td align="center">1</td><td align="center">2</td><td align="center">3</td></tr> <tr><td>4</td><td>5</td><td>6</td></tr> <tr><td>7</td><td>8</td><td>9</td ></tr> <tr><td>10</td><td>11</td><td>12</td></tr> </table> <br> <p align=center> © Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </p> </body> </html> |
Kira-kira hasilnya akan seperti contoh berikut.
Colspan dan Rowspan
Selanjutnya adalah attribute colspan dan rowspan yang berfungsi untuk menggabungkan beberapa kolom (colspan) dan baris (rowspan). Attribute colspan dan rowspan di lakukan pada tag th, untuk menjalankan fungsi attribute ini tentu kita harus mengganti tag td dengan tag th. Berikut contoh htmlnya.
| <html> <head> <title>Latihan Tabel | Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </title> </head> <body> <table border="1" align="center" cellpadding="5" cellspacing="0" width='50%'> <tr bgcolor="red"><th>judul1</th><th>judul2</th><th>judul3</th></tr> <tr><td align="center">1</td><td align="center">2</td><td align="center">3</td></tr> <tr><td>4</td><td>5</td><td>6</td></tr> <tr><td>7</td><td>8</td><td>9</td ></tr> <tr><td>10</td><td>11</td><td>12</td></tr> </table> <br> <p align=center> © Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </p> </body> </html> |
Kira-kira hasilnya akan seperti contoh berikut.
Masih di pembahasan mengenai colspan dan rowspan, kali ini kita akan coba buat rowspan diletakan di sisi sebelah kanan. Caranya cukup mudah, di bagian td (kolom) yang ingin digabungkan kolomnya tinggal di ganti saja menggunakan tag th sama seperti diatas. Yang bingung bisa lihat contoh script html berikut.
| <html> <head> <title>Latihan Tabel Colspan Rowspan | Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </title> </head> <body> <table border="1" align="center" cellpadding="5" cellspacing="0" width='50%'> <tr><th colspan="3">Colspan</th></tr> <tr><td align="center">1</td><td align="center">2</td><td align="center">3</td></tr> <tr align="center"><td>4</td><td>5</td><th rowspan="2">Rowspan1</th></tr> <tr align="center"><th rowspan="2">Rowspan2</th><td>8< /td></tr> <tr align="center"><td>10</td><td>11</td></tr> </table> <br> <p align=center> © Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </p> </body> </html> |
Kira-kira hasilnya akan seperti contoh berikut.
Demikian penjelasan mengenai pembahasan kali ini. Semoga bermanfaat untuk pembaca. Bagi yang masih bingung silahkan letakkan komentar di bawah. Sekian dari saya, sampai berjumpa di pembahasan berikutnya. Salam programming!!.
0 komentar:
Post a Comment