cara membuat tabel pada HTML

CARA MEMBUAT TABEL PADA HTML

Mengenal Struktur Tabel HTML

Tabel dalam HTML ditandai dengan kode <tabel> dan diakhir dengan </tabel>. Untuk membuat baris di dalam tabel menggunakan kode <tr> (tr singkatan table row), dan pada setiap baris mesti memiliki kolom-kolom, untuk membuat kolom menggunakan kode <td> (td singkatan table data). Data yang ada pada kolom bisa berupa text, angka, gambar, link. Berikut struktur lengkap Tabel HTML:

<table>
<tr>
<td></td>
</tr>
</table>

Contoh Membuat Tabel

Masukkan kode berikut ke notepad :

<table border=”1″>
<tr>
<td>No</td>
<td>Nama Mahasiswa</td>
<td>Alamat</td>
<td>Semester</td>
</tr>
<tr>
<td>1</td>
<td>Bandi</td>
<td>Surabaya</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>Agung Firmansyah</td>
<td>Jakarta</td>
<td>8</td>
</tr>
</table>

Kemudian save dan beri nama tabel.html Save as Type-nya pilih All Files. Buka tabel.html menggunakan firefox/internet explorer/google chrome, akan tampil seperti di bawah ini:

No	Nama Mahasiswa	Alamat	Semester
1	Bandi	Surabaya	5
1	Agung Firmansyah	Jakarta	8

Cara Membuat Tabel HTML memakai Atribut :

Untuk mendesain tabel supaya bisa terlihat lebih indah memerlukan atribut tambahan yang bekerja pada tag <table>. Berikut atribut tag tabel yang diperlukan:

• Tabel Header

Tabel header digunakan untuk membedakan data header dan data konten pada tabel. Tabel header menggunakan tag <th>, berikut contohnya:

<table border=”1″>
<tr>
<th>No</th>
<th>Nama Mahasiswa</th>
<th>Alamat</th>
<th>Semester</th>
</tr>
<tr>
<td>1</td>
<td>Bandi </td>
<td>Surabaya</td>
<td>5</td>
</tr>
</table>

Hasil:

No	Nama Mahasiswa	Alamat	Semester
1	Bandi	Surabaya	5

• Tabel Caption

Table Caption berfungsi untuk memberikan penamaan pada tabel. Didefinisikan dengan tag <caption>. Contoh penggunaan, tambahan kode <caption>Tabel Mahasiswa</caption> di bawah tag <table>. Hasilnya menjadi:

Tabel Mahasiswa
No	Nama Mahasiswa	Alamat	Semester
1	Bandi	Surabaya	5

• 
  
• Penggabungan Kolom dan Baris

Menggabungkan beberapa kolom menjadi satu kolom menggunakan atribut colspan , sedangkan untuk menggabungkan baris menggunakan atribut rowspan. Contoh penggunaan:

Penggunaan Atribut colspan:

<table border=”1″>
<tr>
<td colspan=”2″>Gabungan Kolom 1 dan 2 pada Baris 1</td>
</tr>
<tr>
<td style=”width:50%”>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>

Hasil:

Gabungan Kolom 1 dan 2 pada Baris 1
Baris 2 Kolom 1	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

Penggunaan Atribut rowspan:

<table border=”1″>
<tr>
<td rowspan=”2″>Gabungan Baris 1 dan 2 pada Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>

Hasil:

Gabungan Baris 1 dan 2 pada Kolom 1	Baris 1 Kolom 2
	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

• Pengaturan Jarak pada kolom

Pengaturan jarak antara text dengan kolom tabel menggunakan cellpadding dan cellspacing. celpadding berarti mengatur jarak dari sisi bagian dalam kolom, sedangkan cellspacing mengatur jarak dari sisi bagian luar kolom. Contoh penggunaan:

Atribut cellpadding:

<table border=”1″ celpadding=”10″>
<tr>
<th>No</th>
<th>Nama Mahasiswa</th>
<th>Alamat</th>
<th>Semester</th>
</tr>
<tr>
<td>1</td>
<td>Bandi </td>
<td>Surabaya</td>
<td>5</td>
</tr>
</table>

Hasil:

No	Nama Mahasiswa	Alamat	Semester
1	Bandi	Surabaya	5

Atribut cellspacing:

<table border=”1″ cellspacing=”10″>
<tr>
<th>No</th>
<th>Nama Mahasiswa</th>
<th>Alamat</th>
<th>Semester</th>
</tr>
<tr>
<td>1</td>
<td>Bandi </td>
<td>Surabaya</td>
<td>5</td>
</tr>
</table>

Hasil:

No	Nama Mahasiswa	Alamat	Semester
1	Bandi	Surabaya	5

• Tabel Background

Untuk memperindah tampilan tabel salah satunya dengan mengatur warna dari tabel. Berikut contoh pengaturan warna pada tabel:

<table border=”1″ celpadding=”10″ style=”background:#eee;”>
<tr style=”background:red;”>
<th>No</th>
<th>Nama Mahasiswa</th>
<th>Alamat</th>
<th>Semester</th>
</tr>
<tr>
<td>1</td>
<td>Agung Firmansyah </td>
<td>Jakarta </td>
<td>8</td>
</tr>
</table>

Hasil:

No	Nama Mahasiswa	Alamat	Semester
1	Agung Firmansyah	Jakarta	8

Keterangan :

Di dalam tabel, kita bisa bisa beberapa atribut di dalamnya, antara lain yaitu:

1.   bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".

2.  align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left"|"center"|"right" .

 3. cellpadding : untuk mengatur jarak antara tepi sel dengan isi sel di dalam sebuah tabel. Penempatan kodenya : cellpadding="pixel" .

 4. border : untuk mengatur tingkat ketebalan garis tepi pada tabel. Penempatan  kodenya : boeder="pixel" .

 5. cellspacing : untuk mengatur jarak antara sel. Penempatan kodenya : cellspacing="pixel" .

6. height : untuk mengatur tinggi tabel. penempatan kodenya : height="pixel"|"%" .

7. valign : untuk mengatur posisi vertikal. penempatan kodenya : valign="top"|"middle"|"bottom"

8. colspan : untuk mengatur kolom. Penempatan kodenya : colspan="nomor" .

9. rowspan : untuk mengatur row atau baris. Penempatan kodenya : rowspan="nomor"