Cara menggunakan membuat tabel html keren

– berfungsi untuk membungkus kepala tabel. – berfungsi untuk membungkus tubuh tabel. – berfungsi untuk membuat baris tabel, singkatan dari Table Row.

Apa itu tag table pada HTML?

Table pada HTML biasanya digunakan untuk pengguna sebagai membuat tampilan lebih terstruktur sesuai dengan baris dan kolom yang akan dibuat. Table dapat menggunakan tag <table>. Tag untuk mengatur baris adalah :
, dan tag untuk mengatur baris menjadi kolom dapat menggunakan tag.

Bagaimana cara untuk membuat baris pada table?

Klik sel di atas atau di bawah tempat yang ingin Anda tambahkan baris. Di bawah Alat Tabel, di tab Tata Letak, lakukan salah satu hal berikut: Untuk menambahkan baris di atas sel, klik Sisipkan di Atas dalam grup Baris dan Kolom. Untuk menambahkan baris di bawah sel, klik Sisipkan di Bawah dalam grup Baris dan Kolom.

Apa fungsi dari tag TD dan TR?

Jawaban. td (Table Data) : digunakan untuk membuat kolom dan disisipkannya data. tr ( Table Row) : digunakan untuk membuat baris table. th (Table Header) : fungsinya sama seperti tag td, tetapi terletak di baris pertama dan sebagai header dari table.

Tutorial belajar HTML kali ini akan membahas cara membuat tabel dan penggunaan attribute di dalamnya.

HTML Table memiliki standard tag 

 sebagai pembuka,  sebagai baris atau row dan  seperti contoh ini

 sebagai cell data atau kolom.

Kode HTML:




HTML Tables


     
Baris 1, Kolom 1 Baris 1, Kolom 2
Baris 2, Kolom 1 Baris 2, Kolom 2

Kode HTML Table diatas akan menghasilkan:

Baris 1, Kolom 1 Baris 1, Kolom 2
Baris 2, Kolom 1 Baris 2, Kolom 2
Contoh table pada html

Table Heading

Pada pembuatan HTML Table terdapat attribute 

 yang artinya table heading. Table Heading digunakan untuk memberikan judul pada kolom.

Kode HTML:

Kolom 1 Kolom 2
Baris 1, Kolom 1 Baris 1, Kolom 2
Baris 2, Kolom 1 Baris 2, Kolom 2

Hasilnya table akan memiliki baris judul, seperti ini:

Kolom 1Kolom 2
Baris 1, Kolom 1 Baris 1, Kolom 2
Baris 2, Kolom 1 Baris 2, Kolom 2

Table Colspan dan Rowspan

HTML Tables memiliki attribute colspan untuk menggabungkan dua atau lebih kolom menjadi satu kolom. Dan gunakan rowspan bila kamu ingin menggabungkan dua baris atau lebih menjadi satu baris.

COLSPAN

Kode HTML:

Kolom 1 Kolom 2
Baris 1, Kolom 1 Baris 1, Kolom 2
Baris 2, Kolom 1 Baris 2, Kolom 2
2 Kolom jadi 1

Hasilnya akan seperti berikut

Kolom 1Kolom 2
Baris 1, Kolom 1 Baris 1, Kolom 2
Baris 2, Kolom 1 Baris 2, Kolom 2
2 Kolom jadi 1

ROWSPAN

Kode HTML:

Kolom 1 Kolom 2
2 Baris jadi 1 Baris 1, Kolom 2
Baris 2, Kolom 2

Hasilnya akan seperti ini

Kolom 1Kolom 2
2 Baris jadi 1 Baris 1, Kolom 2
Baris 2, Kolom 2

Table Background

HTML Table memiliki attribute bgcolor untuk memberikan warna pada table itu sendiri.

Kode HTML:

Kolom 1 Kolom 2
2 Baris jadi 1 Baris 1, Kolom 2
Baris 2, Kolom 2

Dan hasilnya table akan menampilkan warna kuning seperti dibawah ini

Kolom 1Kolom 2
2 Baris jadi 1 Baris 1, Kolom 2
Baris 2, Kolom 2

Penggunaan bgcolor juga dapat  ditempatkan pada table row atau 

Kolom 1 Kolom 2
2 Baris jadi 1 Baris 1, Kolom 2
Baris 2, Kolom 2

Hasilnya akan seperti berikut

Kolom 1Kolom 2
2 Baris jadi 1 Baris 1, Kolom 2
Baris 2, Kolom 2

Table Width dan Height

HTML Table memiliki attribute width untuk memberikan nilai lebar tabel dan height untuk memberikan nilai tinggi tabel.

WIDTH

Kolom 1 Kolom 2
2 Baris jadi 1 Baris 1, Kolom 2
Baris 2, Kolom 2

Kolom 1Kolom 2
2 Baris jadi 1 Baris 1, Kolom 2
Baris 2, Kolom 2

HEIGHT

Kolom 1 Kolom 2
2 Baris jadi 1 Baris 1, Kolom 2
Baris 2, Kolom 2

Kolom 1Kolom 2
2 Baris jadi 1 Baris 1, Kolom 2
Baris 2, Kolom 2

Nilai pada attribute width dan height diatas berupa satuan ukuran pixels (px), apabila kamu ingin merubah menjadi persen (%) silakan ubah nilai antara 1% – 100%.

Demikian tutorial belajar HTML kali ini, mudah-mudahan kamu memahami cara membuat tabel pada pembuatan sebuah website. Kamu juga bisa belajar html secara lengkap karena penjelasan disertai gambar dan kode html nya.

Baca disini: Belajar HTML Gampang Banget! – HTML Warrior #1

Semoga bermanfaat! Jangan lupa share yah!

Langkah langkah membuat tabel di HTML?

Cara Membuat Tabel di HTML <table> – tag pertama yang wajib ditulis saat membuat tabel, berfungsi untuk membungkus tabel.