Cara Membuat Tabel Dengan HTML

Assalamualaikum.Wr.Wb

kali ini ane mau share tentang"Cara Membuat Tabel Dengan HTML" sebelum nya saya akan menjelaskan sedikit mengenai tabel..langsung saja ke TKP... :)) «««

Tabel«« merupakan salah satu objek yang terbentuk dari beberapa garis dan bidang yang membentuk sebuah kotak.

Tabel ini hampir sama dengan perintah div, perbedaannya div adalah pembagian bidang yang dapat diisi berbagai elemen sedangkan tabel adalah himpunan kotak yang memiliki border garis berdasarkan baris dan kolom.

HTML banyak sekali digunakan untuk menyusun objek, gambar, tulisan, layout, bidang ruang, tampilan halaman dan sebagainya. Apabila anda sedang mempelajari pemrograman web dengan PHP, maka tidak akan terlepas dari HTML dan database. Dari database tersebut, tentu berbentuk sebuah tabel. Oleh karena itu sangat penting bagi kita untuk mengetahui kode yang merupakan elemen pemasangan sebuah tabel.

Terlebih dahulu kita akan mengenal perintah kode-kode yang berhubungan dengan tabel.

<table border="2">
  <tr>
    <th>contoh1</th>
    <th>contoh2</th>
  </tr>
  <tr>
    <td>Experiment1</td>
    <td>Experiment2</td>
  </tr>
</table>

Apabila melihat contoh susunan tabel diatas, pengertian kode HTML nya adalah sebagai berikut :

Perintah Dasar Membuat Tabel di HTML :

TANDA/KODE HTML	FUNGSI/KEGUNAAN
<table>.....</table>	digunakan sebagai tanda awal tabel
<tr>..........</tr>	digunakan sebagai tanda awal baris, tr kependekan dari table row
<th>.....</th>	untuk membuat tampilan kolom header tabel, th kependekan dari table head
<td>.......</td>	untuk menyusun kolom data, td kependekan dari table data

Setiap elemen dari kode HTML tersebut harus tersusun dan tertata dengan benar.
Perhatikan tanda slash / garis miring di setiap akhir elemen, itu merupakan kode penutup untuk kode pembuka di semua jenis kode HTML.

Atribut pendukung Table :

Atribut  pendukung	Fungsi Atribut
align	untuk mengatur posisi horizontal
valign	untuk mengatur posisi vertikal
width	untuk mengatur lebar
height	untuk mengatur tinggi
border	untuk mengatur tebal garis
border-color	untuk memberi tebal garis dengan warna
cellpadding	untuk mengatur jarak garis dengan objek didalamnya
cellspacing	untuk mengatur jarak tiap cell
bgcolor	untuk mengatur warna
background	untuk mengatur latar gambar
rowspan	jumlah baris yang memotong beberapa baris
colspan	jumlah kolom yang memotong beberapa kolom

Berikut ini adalah contoh dari tabel dengan beberapa kode warna dengan atribut :

CONTOH	Nama	Alamat	Telp.	CONTOH
	EXPERIMENT1	JTR DUKUH	08574XXX
	EXPERIMENT2	SONGGOM	08783XXX

Berikut Susunan script:

<table border="1" cellpadding="3" cellspacing="0" style="width: 410px;">

<tbody>
<tr>

<th bgcolor="red" rowspan="3" width="58">CONTOH </th>

<th bgcolor="violet" height="41" width="79">Nama</th>

<th bgcolor="gren" width="83">Alamat</th>

<th bgcolor="yellow" width="92">Telp.</th>

<th bgcolor="red" rowspan="3" width="58">CONTOH </th>

</tr>
<tr>

<td bgcolor="pink">EXPERIMENT1</td>

<td align="center" bgcolor="silver">JTR DUKUH </td>

<td bgcolor="violet">08574XXX</td>

</tr>
<tr>

<td bgcolor="orange">EXPERIMENT2</td>

<td align="center" bgcolor="gren old">SONGGOM </td>

<td bgcolor="gold">08783XXX</td>


</tr>
</tbody></table>

Jika anda ingin mendalami HTML silahkan KLIK DISINI untuk panduan belajar.

Demikian Tutorial dari saya,, semoga bisa bermanfaat untuk para newbie html seperti saya.

Note :"Tak ada manusia yang bodoh kecuali malas untuk belajar"

Wassalamualaikum.Wr.wb referensi