Dalam tutorial tabel HTML: cara membuat judul kolom header tabel HTML ini, kita akan mempelajari fungsi tag th. Tag th digunakan untuk membuat judul kolom (kolom header) dalam tabel HTML.
Fungsi Tag th
Sering kali dalam membuat tabel, baris pertama kita gunakan sebagai judul kolom dari baris-baris dibawahnya. Dan biasanya baris pertama tabel ini secara visual dibedakan dengan baris dibawahnya agar tampak lebih menarik, misalnya diberi warna yang berbeda, atau font yang berbeda.
Untuk keperluan ini, HTML memiliki tag khusus yang bisa digunakan, yaitu tag th (singkatan dari table head) . Dalam penggunaan tag th, kita hanya perlu mengganti tag td dengan th pada baris pertama tabel.
Sebagai contoh cara penggunaan tag th, silahkan buka aplikasi text editor, ketikkan kode berikut, dan save sebagai tabelth.html
Contoh penggunaan tag th:
<!DOCTYPE html> <html> <head> <title>Cara Penulisan Tag th dalam Tabel HTML</title> </head> <body> <h2>Belajar Tag th untuk Tabel HTML</h2> <table border="1"> Â Â Â Â <tr> Â Â Â Â Â Â Â <th>Judul 1</th> Â Â Â Â Â Â Â <th>Judul 2</th> Â Â Â Â Â Â Â <th>Judul 3</th> Â Â Â Â </tr> Â Â Â Â <tr> Â Â Â Â Â Â Â <td>Baris 1, Kolom 1</td> Â Â Â Â Â Â Â <td>Baris 1, Kolom 2</td> Â Â Â Â Â Â Â <td>Baris 1, Kolom 3</td> Â Â Â Â </tr> Â Â Â Â <tr> Â Â Â Â Â Â Â <td>Baris 2, Kolom 1</td> Â Â Â Â Â Â Â <td>Baris 2, Kolom 2</td> Â Â Â Â Â Â Â <td>Baris 2, Kolom 3</td> Â Â Â Â </tr> </table> </body> </html>
Perhatikan pada baris pertama tabel, dimana dalam tutorial tentang tabel HTML sebelumnya, semua sel dari tabel ditulis menggunnakan tag td. Namun, kali ini tag td kita ganti menjadi tag th.
Tag th secara default akan ditampilkan sedikit berbeda pada beberapa web browser. Pada mozilla firefox yang saya gunakan, tag th ditampilkan dengan huruf tebal dan berada di tengah-tengah kolom.
Untuk tutorial tabel HTML selanjutnya, kita akan membahas tentang tag caption untuk membuat judul tabel HTML.
kurang lengkap yaaaaa
Kalau boleh tau, beby mau lihat tutorial tentang apa ya?
Duniailkom telah membuat 9 tutorial tabel HTML, dan beberapa tutorial lain terkait HTML.
Index lengkapnya dapat di lihat di halaman Tutorial Belajar HTML dan Index Artikel HTML
untung ada agan andre.. jadi gw belajar gak usah ngeluarin duit buat beli bukunye. thx gan andre.
Hehe.. silahkan gan.. mudah2an bisa bermanfaat tutorialnya :)
Mas bro, sertakan juga dong, kode css untuk tampilan tabelnya. bingung bikin kode css, soalnya di blog saya tabelnya koq ngga ada garis2 nya.
Untuk sementara bisa cek kesini gan: https://www.duniailkom.com/tutorial-php-mysql-cara-penyajian-data-mysql-dalam-bentuk-tabel-html-dengan-css/
Disitu saya membuat tabel dengan desain CSS. Tp memang tidak saya bahas detail tentang CSSnya. Kalau sempat akan saya buatkan tutorial khususnya.
Agan andre mau tanya.apakah tutorial di e-book dan dibuku yang diperjualbelikan agan, sama dengan tutorial di website ini atau berbeda ?
Tolong dijawab agan soalnya ane insya allah kalau ane punya rizki, ane tertarik untuk membeli. Karena artikel yang agan berikan lebih mudah di pahami bagi para pemula.
Berbeda gan. Karena sudah "bayar", tentu harus dapat lebih dari yang gratisan, hehe..
Bisa dibilang, materi di website ini baru 30%. Sisa 70%nya saya bahas di eBook. Misalnya untuk HTML, di web duniailkom saya tidak bahas tag2 lanjutan seperti <canvas>, <audio> dan <video>. Ini dikupas habis di eBook HTML Uncover. Begitu juga dengan materi di eBook CSS dan PHP Uncover, jauh lebih banyak dan detail daripada yang ada di tutorial web duniailkom.
kalau buat satu judul dari tabel yg terdiri dr tiga kolom gimana ya mas ?
Caranya dengan menambahkan atribut colspan di dalam tag <th>. Penjelasannya bisa kesini: https://www.duniailkom.com/belajar-html-lanjutan-cara-menggabungkan-sel-tabel-html-atribut-rowspan-dan-colspan/
tutorialnya sangat membantu buat para pemula dan saya izin ikut belajar gan hhe