The Daily Journal

Membuat Tabel Menggunakan HTML dan CSS

Membuat Tabel Menggunakan HTML dan CSS? Bagaimana cara Membuat Tabel Menggunakan HTML ? Apa saja elemen dan attribute yang diperlukan untuk membuat table? Seperti apa table hasil buatan dengan HTML dan CSS?

HTML adalah hypertext markup language yang berguna sebagai kerangka sebuah web. Namun jika hanya kerangka, hasilnya tidak akan cantik. Kita dapat menggunakan CSS untuk mempercantik web. Salah satu tag html adalah table. Dengan menggunakan table, kita dapat membuat sebuah tabel untuk menampung daftar data. Misalnya data siswa dan siswi.

Baca juga :
Berkenalan Dengan Bahasa HTML
Struktur Dasar Penyusun HTML(Tag, Elemen, dan Attribut)

Pertama buatlah sebuah folder html dan berikan nama table.html dan buatlah struktur HTML seperti kode di bawah ini :

Buat elemen table menggunakan tag <table></table> di bagian body sehingga kode menjadi seperti berikut ini, jangan lupa save :

Setelah itu kita tambahkan tag <tr></tr> didalam tag <table></table>, tag <tr></tr> berguna sebagai table row atau untuk menambah baris baru pada tabel. Isi tag didalam table row bisa th (heading) atau td (isi biasa). Kata dan huruf yang ada di dalam tag <th></th> akan ditebalkan.

Buatlah empat tag <th></th>  di dalam tag <table></table> lalu berikan isi tag <th></th> secara berturut – turut dengan Nama, Kelas, Jurusan, dan No. Absen Sehingga kodenya menjadi seperti berikut, setelah mengetikkan kode jangan lupa save :

Jika di jalankan di browser, maka akan menjadi seperti di bawah ini, tidak ada garis tabel karena kita belum menambahkan garis tabel :

Kemudian buatlah table row lagi sebagai baris baru untuk mengisi data nama, kelas dan, jurusan . Di dalam tabel row tersebut, buatlah empat tag <td></td> yang memiliki isi secara berturut – turut Josi Kie, XI-RPL, Rekayasa Perangkat Lunak, dan 22. Atau kamu dapat mengganti isinya sesukamu dengan nama, kelas, jurusan, no. absen mu misalnya. Sehingga kodenya menjadi seperti berikut ini, setelah mengetikkan kode jangan lupa save :

Berikut hasilnya jika di buka di browser :

Selanjutnya kita akan membuat CSS. Di bagian head buatlah tag <style></style> karena di dalam tag <style></style> nanti akan dituliskan CSS. Tuliskan kode berikut didalam tag <style></style> :

Sehingga keseluruhan kode akan berubah menjadi seperti berikut :

Jika di buka di browser, maka akan menjadi seperti berikut ini :

Baca juga : Tutorial Mencari Data Pada Entity Sesuai Kategori Dengan Spring Boot dan JpaRepository

Sekian, terimakasih, dan semoga bermanfaat:)