Cara Membuat WEB, Blogging dan Bahasa Pemrograman

Cara Membuat Tabel HTML

Cara Membuat Tabel HTML - Dalam HTML, Anda dapat membuat tabel menggunakan tag table, tag tersebut ada hubungannya dengan tag tr dan td. Meskipun ada tag lain untuk membuat tabel, ini adalah dasar-dasar untuk membuat tabel dalam HTML.

Berikut kode untuk tabel dasar:

Sel tabel 1Sel tabel 2
Hasilnya:
Sel tabel 1Sel tabel 2

Cara Membuat Tabel HTML

Dalam kode Cara Membuat Tabel HTML di atas, kita menambahkan atribut perbatasan ke tag table. Ini merupakan atribut yang memungkinkan kita untuk menentukan seberapa tebal perbatasannya. Jika kita tidak ingin ada perbatasan (garis tepi), kita dapat menentukan 0 (nol) pada atribut bordernya. Dalam banyak kasus, Anda dapat memilih untuk tidak menggunakan nilai ini, sehingga Anda dapat menggunakan Cascading Style Sheets (CSS) untuk menentukan batas tabel Anda. Lebih lanjutnya ada di bawah ini.

Cara Membuat Tabel HTML

Tabel Header
Dari sekian banyak tabel, terutama pada tabel dengan data tabular, memiliki baris header atau kolom. Dalam HTML, Anda dapat menggunakan tag th.
Kebanyakan browser menampilkan tabel header dalam teks tebal.

Tabel headerTable header
Sel tabel 1Sel tabel 2
Hasilnya:
Tabel headerTable header
Sel tabel 1Sel tabel 2

Colspan
Anda dapat menggunakan atribut colspan untuk membuat rentang sel pada kolom.
Tabel header
Sel tabel 1Sel tabel 2
Hasilnya:
Tabel header
Sel tabel 1Sel tabel 2

Rowspan
Hampir mirip dengan colspan, rowspan memungkinkan Anda untuk membuat rentang sel pada beberapa baris.
Tabel headerSel tabel 1
Sel tabel 2
Hasilnya:
Tabel headerSel tabel 1
Sel tabel 2

Menambahkan CSS ke tabel
Anda dapat memformat tabel Anda menggunakan Cascading Style Sheets (CSS). Menggunakan CSS, Anda dapat menentukan warna latar belakang, warna border, gaya perbatasan dll.
Tabel headerTabel header
Sel tabel 1Sel tabel 2
Sel tabel 3Sel tabel 4
Hasilnya:
Tabel headerTabel header
Sel tabel 1Sel tabel 2
Sel tabel 3Sel tabel 4

Semoga artikel Cara Membuat Tabel HTML di atas bermanfaat bagi Anda.

4 komentar :