Pemrograman Web : Cara Membuat Tabel Menggunakan HTML - TutorialZR
Trending
Rabu, 11 Januari 2017

Pemrograman Web : Cara Membuat Tabel Menggunakan HTML

Hallo gays, kali ini saya akan memberikan tutorial bagaimana Cara Membuat Tabel Menggunakan HTML. Tabel merupakan elemen penting ketika kita ingin membangun daftar terdiri dari kolom dan baris, dengan adanya tabel tampilan daftar menjadi tertata rapih dan enak untuk dilihat.

Cara Membuat Tabel Menggunakan HTML

Cara Membuat Tabel Menggunakan HTML

OK langsung saja kita mulai tutorialnya, pertama-tama sobat siapkan text editornya untuk membuat file htmlnya, lalu sobat copy paste kode berikut atau tulis manual pada editor yang sobat gunakan supaya terbiasa.

<table border='1' cellpadding='5' cellspacing='0'>
  <tr>
    <th>Kolom satu</th>
    <th>Kolom dua</th>
    <th>Kolom tiga</th>
    <th>Kolom empat</th>
  </tr>
  <tr>
    <td>Baris satu Kolom satu</td>
    <td>Baris satu Kolom dua</td>
    <td>Baris satu Kolom tiga</td>
    <td>Baris satu Kolom empat</td>
  </tr>
  <tr>
    <td>Baris dua Kolom satu</td>
    <td>Baris dua Kolom dua</td>
    <td>Baris dua Kolom tiga</td>
    <td>Baris dua Kolom empat</td>
  </tr>
  <tr>
    <td>Bariss tiga Kolom satu</td>
    <td>Baris tiga Kolom dua</td>
    <td>Baris tiga Kolom tiga</td>
    <td>Baris tiga Kolom empat</td>
  </tr>
  <tr>
    <td>Baris empat Kolom satu</td>
    <td>Baris empat Kolom dua</td>
    <td>Baris empat Kolom tiga</td>
    <td>Baris empat Kolom empat</td>
  </tr>
</table>

Simpan file tersebut dengan nama tabel.html, lalu bukalah menggunakan browser kesayangan sobat. Hasilnya kurang lebih seperti gambar di atas.

Penjelasan

<table> - tag awal untuk membuat tabel, pada tag ini TutorialZR juga menambahkan beberapa atribut yaitu border dengan nilai 1 untuk memberikan garis tabel dengan ketebalan 1 px, cellpadding  dengan nilai 5 untuk memberikan jarak antara text dengan border tabel, dan cellspacing dengan nilai 0 untuk menghilangkan spasi antara kolom/baris satu dengan kolom/baris lainnya.

<tr> - tag html untuk mengawali suatu baris

<th> - tag html untuk membuat heading tabel

<td> - tag html untuk mengisi data pada baris/kolom tabel

Atribut pada Tabel

Berikut ini beberapa atribut yang sering digunakan dalam tag tabel :

align - untuk mengatur perataan text jika digunakan pada tag <td> atau <th>, sedangkan jika digunakan pada tag <table> akan mengatur penempatan posisi tabel dengan nilai left untuk posisi/perataan kiri, right untuk posisi/perataan kanan dan center untuk posisi/perataan tengah.

valign - vertical align,  untuk mengatur perataan text secara vertikal, digunakan pada tag <td> atau <th> dengan nilai top untuk posisi/perataan atas, bottom untuk posisi/perataan bawah dan middle untuk posisi/perataan tengah.

border - untuk memberikan garis/batas pada tabel

bgcolor - untuk memberikan background pada tabel

cellpadding - untuk memberikan jarak antara text dengan border tabel

cellpadding - untuk menghilangkan spasi antara kolom/baris satu dengan kolom/baris lainnya

colspan - untuk menggabungkan kolom, misal : penggunakan colspan = '2'  pada <th> yang akan menggabungkan tabel heading kolom 1 dengan kolom 2.

rowspan - untuk menggabungkan baris

width - untuk mengatur lebar dari tabel dengan nilai berupa px atau %

Sekarang, mari kita modifikasi kode html diatas dengan menambahkan beberapa atribut sehingga kodenya menjadi seperti berikut :

<table border='1' cellpadding='5' cellspacing='0'>
  <tr>
    <th colspan='2' bgcolor='yellow'>Kolom satu</th>
    <th rowspan ='2' bgcolor='yellow'>Kolom dua</th>
    <th rowspan ='2' bgcolor='yellow'>Kolom tiga</th>
  </tr>
  <tr>
    <td bgcolor='yellow'>Baris satu Kolom satu</td>
    <td bgcolor='yellow'>Baris satu Kolom dua</td>
  </tr>
  <tr>
    <td>Baris dua Kolom satu</td>
    <td>Baris dua Kolom dua</td>
    <td>Baris dua Kolom tiga</td>
    <td>Baris dua Kolom empat</td>
  </tr>
  <tr>
    <td>Bariss tiga Kolom satu</td>
    <td>Baris tiga Kolom dua</td>
    <td>Baris tiga Kolom tiga</td>
    <td>Baris tiga Kolom empat</td>
  </tr>
  <tr>
    <td>Baris empat Kolom satu</td>
    <td>Baris empat Kolom dua</td>
    <td>Baris empat Kolom tiga</td>
    <td>Baris empat Kolom empat</td>
  </tr>
</table>

Maka hasilnya kurang lebih akan menjadi seperti berikut :

Cara Membuat Tabel Menggunakan HTML

*Jika ada pertanyaan silahkan sampaikan melalui form komentar, dan jika suka dengan artikel ini silahkan dengan klik like, share, atau join fans page untuk mengetahui artikel lainnya. 

Demikianlah Cara Membuat Tabel Menggunakan HTML semoga bermanfaat dan mudah dipahami, sampai jumpa di tutorial berikutnya.

Pemrograman Web : Cara Membuat Tabel Menggunakan HTML Reviewed by Unknown on Januari 11, 2017 Rating: 5 Hallo gays,  kali ini saya akan memberikan tutorial bagaimana   Cara Membuat Tabel Menggunakan HTML . Tabel merupakan elemen penting ketika...

Tidak ada komentar: