Cara Mudah Membuat Tabel HTML Menggunakan Text Editor

Apakah anda pernah menggunakan microsoft excell? Mungkin seperti itulah sedikit gambaran tabel yang akan kita buat menggunakan markup html yaitu tag table.
Di dalam tag HTML table sendiri kita dapat menyisipkan elemen gambar, teks, dan link menjadi baris dan kolom atau yang kita sebut row dan coll.
Kemudian untuk membuat elemen tabel kita akan menggunakan tag <tr> dan <td>.
Tag AwalKeterangan
<table>Mendefinisikan sebuah tebel dalam HTML.
<tr>Mendefinisikan baris pada tabel
<th>Mendefinisikan sel header tabel
<td>Mendefinisikan sebuah sel data tabel

#1 Struktur Tabel HTML

Berikut merupakan struktur penulisan dari tabel:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Tables</title>
   </head>

   <body>
      <table border = "1">
         <tr>
            <td>Baris 1, Kolom 1</td>
            <td>Baris 1, Kolom 2</td>
         </tr>

         <tr>
            <td>Baris 2, Kolom 1</td>
            <td>Baris 2, Kolom 2</td>
         </tr>
      </table>

   </body>
</html>
Dan berikut adalah hasilnya:
Baris 1, Kolom 1Baris 1, Kolom 2
Baris 2, Kolom 1Baris 2, Kolom 2
Dari tabel diatas dapat anda lihat bahwa kita membuat tabel dengan tag <table> kemudian didalmnya kita menambhakan tag <tr> untuk menambah baris (struktur kebawah)
Dan terakhir didalam baris kita membuat kolom dengan tag <td>.

#2 Contoh Tabel HTML dengan Heading

Silahkan perhatikan kode berikut ini:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Header</title>
   </head>

   <body>
     <table border="1">
        <tr>
           <th>NPM</th>
           <th>Nama</th>
           <th>Jenis Kelamin</th>
           <th>IPK</th>
        </tr>
        <tr>
           <td>16.0504.0146</td>
           <td>Damas Amirul Karim</td>
           <td>Laki-Laki</td>
           <td>3.62</td>
        </tr>
     </table>
   </body>

</html>
Dan Hasilnya adalah sebagai berikut:
NPMNamaJenis KelaminIPK
16.0504.0146Damas Amirul KarimLaki-Laki3.62
Yang membedakan ada pada tag <td> digantikan tag <th> khusus untuk header kolom.

#3 Atribut Cellpadding dan Cellspacing

Yang membedakan kedua atribut tersebut adalah:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Cellpadding</title>
   </head>

   <body>
      <table border = "1" cellpadding = "5" cellspacing = "5">
         <tr>
            <th>Nama</th>
            <th>Gaji</th>
         </tr>
         <tr>
            <td>Andi</td>
            <td>$5000/tahun</td>
         </tr>
         <tr>
            <td>Budi</td>
            <td>$7000/tahun</td>
         </tr>
      </table>
   </body>

</html>
Dalam kode diatas kita membuat sebuah file .html yang isinya berupa tabel dengan judul atau header nama dan gaji. Kemudian pada baris selanjutnya kita mengisi seperti biasa.
Berkut catatan saya:
AtributKeterangan
cellspacinguntuk mengatur jarak antar cell
cellpaddinguntuk memberi jarak antara cell border dengan konten di dalam cell

#4 Perbedaan collspan dan rowspan

Langsung saja silahkan perhatikan kode berikut ini:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Colspan/Rowspan</title>
   </head>

   <body>
      <table border = "1">
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
         <tr>
            <td rowspan="2">Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
         </tr>
         <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
         </tr>
         <tr>
            <td colspan="3">Row 3 Cell 1</td>
         </tr>
      </table>
   </body>

</html>
Sehingga anda akan mendapatkan hasil seperti ini:
Column 1Column 2Column 3
Row 1 Cell 1Row 1 Cell 2Row 1 Cell 3
Row 2 Cell 2Row 2 Cell 3
Row 3 Cell 1
Dan berikut adalah sedikit catatan dari saya:
AtributKeterangan
rowspanUntuk menggabungkan 2 atau lebih baris
collspanuntuk menggabungkan 2 atau lebih kolom

#5 Beberapa Atribut Tambahan

Sama seperti tag html lainnya, kita dapat menambahkan beberapa atribut untuk elemen html:
AtributKeterangan
bgcolorUntuk Mengubah background elemen tabel
heightUntuk mengatur tinggi cell
widthUntuk mengatur lebar kolom
alignMengatur perataan text horizontal (left, center, right)
valignMengatur perataan text vertikal (top, middle, bottom)

BONUS: Header, Body, and Footer

Tabel dalam html juga bisa dibagi menjadi 3 elemen yaitu header, body dan footer.
Berikut masing-masing fungsinya:
  • <thead> − untuk membagi kepala tabel
  • <tbody> − untuk mengindikasikan konten utama tabel
  • <tfoot> − untuk membagi kaki Tabel
Untuk lebih jelasnya kita langsung ke contoh berikut:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table</title>
   </head>

   <body>
      <table border = "1" width = "100%">
         <thead>
            <tr>
               <td colspan = "4">This is the head of the table</td>
            </tr>
         </thead>

         <tfoot>
            <tr>
               <td colspan = "4">This is the foot of the table</td>
            </tr>
         </tfoot>

         <tbody>
            <tr>
               <td>Cell 1</td>
               <td>Cell 2</td>
               <td>Cell 3</td>
               <td>Cell 4</td>
            </tr>
         </tbody>

      </table>
   </body>

</html>

Komentar

Posting Komentar

Jika ingin mengkritik :
"Dimohon untuk menggunakan bahasa yang sopan santun."

Postingan populer dari blog ini

Mengenal Fitur CSS3

Gambar
Chrome | 43.0  4.0 -webkit- | | Internet Explore / Edge | 10.0 | | Firefox | 16.0 5.0 -moz- | | Safari | 9.0 4.0 -webkit- | | Opera | 30.0 15.0 -webkit- 12.0 -o- | Keterangan : Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti. Angka-angka yang diikuti oleh -webkit-, -moz-, atau -o- menentukan versi pertama yang bekerja dengan awalan -webkit-, -moz-, atau -o-. Contoh Pengguna opera versi 30.0 ke atas : div { animation-iteration-count: 2; } Sedangkan pengguna opera versi 15.0 hingga 29.0 : div { -webkit-animation-iteration-count: 2; } Nilai Properti : animation-name menentukan nama  keyframe  yang akan dikaitkan ke  selector animation-duration menetukan berapa lama waktu (dalam satuan detik atau mili detik) yang diperlukan untuk menyelesaikan animasi animation-timing-function Menentukan kurva kecepatan animasi Nilai properti : linear mengatur animasi dengan kecepatan yang sama dari awal hingga akhir ease Nilai default  an
Baca selengkapnya

Command Line

Gambar
Version control system  atau disingkat VCS adalah kategori perangkat lunak yang dapat membantu Kamu atau tim Kamu untuk mengelola setiap perubahan yang dilakukan dari waktu ke waktu. VCS merekam setiap perubahan kode yang dilakukan sehingga jika terjadi kesalahan kita dapat melakukan rollback untuk membanding code sebelum dan sesudah perubahan dilakukan sehingga dapat membantu kita dalam meminimalisir kesalahan. Bagi seorang programmer source yang telah dibuat adalah aset yang berharga karena berisi kumpulan solusi dari masalah yang telah dipecahkan dan diselesaikan. Dengan adanya VCS dapat melindungi source code dari kesalahan yang dilakukan oleh manusia dan dari hal-hal lain yang tidak diinginkan. Tanpa VCS Kamu akan kesulitan dalam mengelola dan berkordinasi dengan tim terkait perubahan yang telah dilakukan sehingga tidak saling timpa-menimpa satu sama lain. Dalam mengembangkan perangkat lunak tanpa menggunakan VCS sangat beresiko, seperti tidak memiliki backup. VCS juga dapat memb
Baca selengkapnya

7+ Tipe Data C++ Berserta Contoh Program dan Jangkauannya

Mari kita ingat kembali, tipe data digunakan untuk menentukan jenis nilai atau value yang akan disimpan ke dalam variabel untuk kemudian di proses dalam program kita. Ketika anda mendeklarasikan sebuah variabel, pada dasarnya anda sedang memesan sebuah ruang didalam memori. Lalu besarnya memori dipengaruhi oleh Tipe Data. Nah tugas besar seorang programmer adalah bisa menentukan tipe data yang tepat, karena kita dituntut untuk membuat program yang efektif dan tidak boros memori. Untuk itu, kita akan mengenal beberapa tipe data dalam Bahasa C++. Tipe Data Primive C++ Pada dasarnya tipe data dibagi menjadi 3 jenis: Tipe Data Angka  - untuk angka dan berhubungan dengan aritmetika. Tipe Data Karakter  - untuk karakter dan angka bukan untuk operasi aritmetika. Tipe Data Logika  - untuk logika benar ( true ) atau salah ( false ). Untuk penjelasan lebih detail silahkan baca:  macam macam tipe data dan fungsinya Pada dasarnya C++ memiliki beberapa tipe data  built-in
Baca selengkapnya