Petik.net - Membuat daftar dan tabel adalah hal yang sangat umum dilakukan dalam pembuatan website. Daftar berguna untuk mengorganisir informasi secara terstruktur dan tabel digunakan untuk menampilkan data secara terorganisir. Dalam artikel ini, kita akan membahas bagaimana membuat daftar dan tabel di HTML serta beberapa cara untuk mengformat tabel menggunakan CSS.
Tag ol, ul, dan li
Tag ol (ordered list) dan ul (unordered list) digunakan untuk membuat daftar pada halaman web. Perbedaan antara keduanya adalah ol menggunakan nomor dan ul menggunakan bullet point. Tag li (list item) digunakan untuk menambahkan item dalam daftar.
Contoh:
Ordered List:
- Item 1
- Item 2
- Item 3
Unordered List:
- Item 1
- Item 2
- Item 3
Tag table, tr, th, dan td
Tag table digunakan untuk membuat tabel pada halaman web. Tabel terdiri dari baris dan kolom. Tag tr (table row) digunakan untuk menambahkan baris dalam tabel dan tag th (table header) digunakan untuk menambahkan header dalam kolom. Sedangkan, tag td (table data) digunakan untuk menambahkan data pada kolom.
Contoh:
| Nama | Alamat | No. HP |
|---|---|---|
| Andi | Jakarta | 081234567890 |
| Budi | Bandung | 085678901234 |
Atribut colspan dan rowspan
Atribut colspan digunakan untuk menggabungkan beberapa kolom menjadi satu kolom, sedangkan atribut rowspan digunakan untuk menggabungkan beberapa baris menjadi satu baris.
Contoh:
| Nama | Alamat | |
|---|---|---|
| Andi | Jakarta | Selatan |
| Jakarta | Timur | |
| Budi | Bandung | Barat |
Mengformat tabel dengan CSS
CSS (Cascading Style Sheets) dapat digunakan untuk mengatur tampilan tabel, seperti mengubah warna background, warna border, dan ukuran font. Kita dapat menggunakan ID atau class untuk menentukan tabel mana yang ingin diubah tampilannya.
Contoh:
HTML:
| Nama | Alamat | No. HP |
|---|---|---|
| Andi | Jakarta | 081234567890 |
| Budi | Bandung | 085678901234 |
CSS
#tabel1 {
border-collapse: collapse;
width: 100%;
}
Follow us on
