Cara membuat table di HTML

Cara membuat table di HTML

Table di HTML  adalah data yang berisi iktisar sejumlah data informasi, biasanya berupa kata-kata dan bilangan yang tersusun secara bersistem, urut ke bawah dalam lajur dan deret tertentu dengan garis pembatas sehingga mudah untuk disimak (menurut :Kamus Besar Bahasa Indonesia).

format penulisan Tag table :

Atribut table di HTML

  • border  : untuk menetukan ketebalan garis table. Value-nya  dari 0 dan seterusnya
  • width : menetukan lebar table. Value-nya bisa memakai % atau pixsel (100%,50%,500px,200px, … dst)
  • cellspacing : untuk mentukan jarak sepasi antara sel dan border, value sellspacing mulai dari 0,1,2,3, … dst.
  • cellpading  : untuk mentukan jarak sepasi antara data dalam cell dan border cell.

Berikut contoh penggunaan table di HTML tanpa menggunakan atribut dan menggunkan atribut

Tanpa menggunakan atribut

Menggunkan atribut

Dalam pembuatan sebuah table kita perlu membutuhkan elemen – elemen pendukung seperti elemen membuat baris, membuat kolom dan lain sebagainya. Berikut adalah elemen – elemen  tag table di HTML

Elemen – elemen  tag table di HTML

Table row di HTML

Table row ini digunakan untuk mendefinisikan sutu baris.

Format penulisan elemen table row :

Berikut contoh penggunaan table row

Table header di HTML

Table header digunkan  untuk membuat judul dari suatu data,ciri dari table header adalah teksnya dicetak tebal .

format penulisan  table header di HTML :

Berikut contoh penggunaan table header

Atribut table header

  • align : digunakan untuk mengatur tata letak text. Value dari atribut align adalah center (membuat teks berada ditengah),right(membuat teks berada dikanan), dan left(membuat teks berada kiri).
  • colspan : digunakan untuk menggabungkan beberapa kolom  menjadi satu, sehingga satu unit kolom   menjadi lebih lebar. Value colspan mulai dari 1,2,3, .. dst. Sesuai kebutuhan jumlah kolom yang ini ingin  digabung menjadi 1 kolom.
  • rowspan :  digunakan untuk menggabungkan beberapa baris  menjadi satu, sehingga satu unit baris   menjadi lebih lebar. Value rowspan mulai dari 1,2,3, .. dst. Sesuai kebutuhan jumlah baris yang ini ingin digabung menjadi 1 baris.

Berikut contoh penggunaan atribut table header

Teble data di HTML

Table header digunkana untuk mengisi data-data yang nantinya akan membentuk sebuah kolom.

Format penulisan elemen table data :

Beikut contoh penggunaan table data

Atribut table data

  • align : digunakan untuk mengatur tata letak text. Value dari  align adalah center (membuat teks berada ditengah),right(membuat teks berada dikanan), dan left(membuat teks berada kiri).
  • colspan : digunakan untuk menggabungkan beberapa kolom  menjadi satu, sehingga satu unit kolom   menjadi lebih lebar. Value colspan mulai dari 1,2,3, .. dst. Sesuai kebutuhan jumlah kolom yang ini ingin  digabung menjadi 1 kolom.
  • rowspan :  digunakan untuk menggabungkan beberapa baris  menjadi satu, sehingga satu unit baris   menjadi lebih lebar. Value rowspan mulai dari 1,2,3, .. dst. Sesuai kebutuhan jumlah baris yang ini ingin digabung menjadi 1 baris.

Berikut contoh penggunaan atribut table data

Table head di HTML

Table head digunakan untuk mengelompokkan konten yang terletak di kepala (judul) sebuah tabel.

Format penulisan table head

Berikut contoh penggunaan table head

Table body di HTML

Table body digunakan untuk mengelompokan  konten yang terletak di bagian pokok isi sebuah tabel.

Format penulisan table body

Berikut contoh penggunaan table body

Table foot di HTML

Table foot digunakan untuk mengelompokan data tabel bagian bawah.

Format penulisan table foot

Berikut contoh penggunaan table foot

Berikut contoh penggunaan table di HTML

 

artikel selanjutnya :

cara membuat link di html

artikel terkait :

Cara membuat paragraf di HTML

Cara membuat paragraf di HTML

Cara membuat heading di HTML

LEAVE A REPLY

Please enter your comment!
Please enter your name here