Cara Membuat Tabel Dengan HTML

Di beberapa program HTML Editor ada yang sudah menyertakan toolbar tabel untuk membuat tabel, namun ada juga dan mungkin banyak yang tidak menyertakan toolbar tabel. Selain itu, dalam membuat blog, umumnya juga tidak tersedia toolbar tabel. Akan berarti bukan berarti tidak bisa menggunakan tabel, yakni tentu saja dengan menggunakan bahasa pemrograman html. Dalam html, sintaks tabel adalah sebagai berikut:

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

Keterangan:

• <tabel>..............</table> menandakan bahwa kita akan membuat tabel
• <tr>.....................</tr> mendefenisikan baris tabel. 1 sintaks <tr>....................</tr> akan membuat 1 baris tabel. 2 sintaks <tr>....................</tr> akan membuat 2 baris tabel, begitu seterusnya.
• <td>..................</td> mendefenisikan kolom tabel. 1 sintaks <td>................</td> akan membuat 1 kolom tabel. 2 sintaks <td>................</td> akan membuat 2 kolom tabel, begitu terusnya.

Contoh:
Kita akan membuat tabel dengan jumlah kolom adalah 4 kolom dan jumlah baris adalah 3 baris, maka sintaksnya adalah:

<table>

<tr>

<td>Isi kolom 1 baris 1</td>

<td>Isi kolom 2 baris 1</td>

<td>Isi kolom 3 baris 1</td>

<td>Isi kolom 4 baris 1</td>

</tr>

<tr>

<td>Isi kolom 1 baris 2</td>

<td>Isi kolom 2 baris 2</td>

<td>Isi kolom 3 baris 2</td>

<td>Isi kolom 4 baris 2</td>

</tr>

<tr>

<td>Isi kolom 1 baris 3</td>

<td>Isi kolom 2 baris 3</td>

<td>Isi kolom 3 baris 3</td>

<td>Isi kolom 4 baris 3</td>

</tr>

</table>

Hasilnya:

Isi kolom 1 baris 1	Isi kolom 2 baris 1	Isi kolom 3 baris 1	Isi kolom 4 baris 1
Isi kolom 1 baris 2	Isi kolom 2 baris 2	Isi kolom 3 baris 2	Isi kolom 4 baris 2
Isi kolom 1 baris 3	Isi kolom 2 baris 3	Isi kolom 3 baris 3	Isi kolom 4 baris 3

Tampak pada contoh di atas bahwa garis (border) tabel tidak tampak, dan untuk menampakkan garis tabel, kita harus menambahkan atribut border pada tabel. Sintaksnya:

border="angka" contoh border="1"

Contoh:

<table border="1">

<tr>

<td>Isi kolom 1 baris 1</td>

<td>Isi kolom 2 baris 1</td>

<td>Isi kolom 3 baris 1</td>

<td>Isi kolom 4 baris 1</td>

</tr>

<tr>

<td>Isi kolom 1 baris 2</td>

<td>Isi kolom 2 baris 2</td>

<td>Isi kolom 3 baris 2</td>

<td>Isi kolom 4 baris 2</td>

</tr>

<tr>

<td>Isi kolom 1 baris 3</td>

<td>Isi kolom 2 baris 3</td>

<td>Isi kolom 3 baris 3</td>

<td>Isi kolom 4 baris 3</td>

</tr>

</table>

Hasilnya:

Isi kolom 1 baris 1	Isi kolom 2 baris 1	Isi kolom 3 baris 1	Isi kolom 4 baris 1
Isi kolom 1 baris 2	Isi kolom 2 baris 2	Isi kolom 3 baris 2	Isi kolom 4 baris 2
Isi kolom 1 baris 3	Isi kolom 2 baris 3	Isi kolom 3 baris 3	Isi kolom 4 baris 3

Mudah bukan! Selamat Mencoba!

Nantikan posting selanjutnya mengenai cara membuat tabel dengan html ini. 

Mengatur Properti Tabel Pada HTML

Dalam tutorial sebelumnya penulis telah membahas bagaimana cara membuat tabel dengan html. Tabel yang telah dibuat sebelumnya adalah seperti berikut:

Isi kolom 1 baris 1	Isi kolom 2 baris 1	Isi kolom 3 baris 1	Isi kolom 4 baris 1
Isi kolom 1 baris 2	Isi kolom 2 baris 2	Isi kolom 3 baris 2	Isi kolom 4 baris 2
Isi kolom 1 baris 3	Isi kolom 2 baris 3	Isi kolom 3 baris 3	Isi kolom 4 baris 3

Tabel di atas, garis tepinya belum teratur, begitu pula dengan warnanya. Selain itu, kalau kita mengisikan teks/objek di dalamnya, maka tabel akan bergeser. Perhatikan tabel berikut, kita akan mencoba menambahkan beberapa kata di dalam tabel.

Isi kolom 1 baris 1. Isi kolom 1 baris 1 ini ditambah......	Isi kolom 2 baris 1	Isi kolom 3 baris 1	Isi kolom 4 baris 1
Isi kolom 1 baris 2	Isi kolom 2 baris 2	Isi kolom 3 baris 2	Isi kolom 4 baris 2
Isi kolom 1 baris 3	Isi kolom 2 baris 3	Isi kolom 3 baris 3	Isi kolom 4 baris 3

Sel-sel tabel berpindah kan! Untuk mengatur agar tabel tidak berpindah, kita harus menambahkan beberapa properti pada tabel yang kita buat, kita harus mengatur lebar tabel (kita juga harus mengatur lebar ataupun tinggi sel tabel, dan akan dibahas pada kesempatan lain). Beberapa properti tabel yang dapat kita tambahkan antara lain sebagai berikut:

• tabel garis tabel (border) yang diukur dengan angka. Sintaksnya:border="angka" contoh: border="1"
• warna garis tabel (bordercolor). Sintaksnya: bordercolor="warna/kode warna"contoh: bordercolor="blue" atau bordercolor="#0000ff"
• Tata letak tabel (align), yaitu dalam posisi bagaimana tabel tersebut (kiri, kanan, atau tengah). Contoh: align="center"
• Jarak tepi tabel dengan isi sel tabel (cellpadding), diukur dengan angka dalam satuan pixel. Sintaksnya: cellpadding="angka" contoh: cellpadding="2". Angka 1 berarti 1 pixel. Semakin besar angkanya, maka isi sel akan semakin jauh dari tepi tabel.
• Tebal frame tabel atau spasi antara sel, yang juga diukur dengan angka dalam satuan pixel. Sintaksnya: cellspacing="angka" contoh: cellspacing="0". Perlu diperhatikan, antara border dan cellspacing berbeda

Perhatikan contoh berikut:

<table align="center" border="1" bordercolor="blue" cellpadding="5" cellspacing="0">

<tr>  

<td>Isi kolom 1 baris 1</td>  

<td>Isi kolom 2 baris 1</td>  

<td>Isi kolom 3 baris 1</td>  

<td>Isi kolom 4 baris 1</td>  

 </tr>

<tr>

<td>Isi kolom 1 baris 3</td>  

<td>Isi kolom 2 baris 2</td>  

<td>Isi kolom 3 baris 2</td>  

<td>Isi kolom 4 baris 2</td>  

</tr>

<tr>  

<td>Isi kolom 1 baris 3</td>  

<td>Isi kolom 2 baris 3</td>  

<td>Isi kolom 3 baris 3</td>  

<td>Isi kolom 4 baris 3</td>  

</tr>
</table>

Hasilnya sebagai berikut:

Isi kolom 1 baris 1	Isi kolom 2 baris 1	Isi kolom 3 baris 1	Isi kolom 4 baris 1
Isi kolom 1 baris 3	Isi kolom 2 baris 2	Isi kolom 3 baris 2	Isi kolom 4 baris 2
Isi kolom 1 baris 3	Isi kolom 2 baris 3	Isi kolom 3 baris 3	Isi kolom 4 baris 3

Kita coba ganti cellspacing dengan angka 3, seperti contoh berikut:

<table align="center" border="1" bordercolor="blue" cellpadding="5" cellspacing="3">

<tr>  

<td>Isi kolom 1 baris 1</td>  

<td>Isi kolom 2 baris 1</td>  

<td>Isi kolom 3 baris 1</td>  

<td>Isi kolom 4 baris 1</td>  

 </tr>

<tr>

<td>Isi kolom 1 baris 3</td>  

<td>Isi kolom 2 baris 2</td>  

<td>Isi kolom 3 baris 2</td>  

<td>Isi kolom 4 baris 2</td>  

</tr>

<tr>  

<td>Isi kolom 1 baris 3</td>  

<td>Isi kolom 2 baris 3</td>  

<td>Isi kolom 3 baris 3</td>  

<td>Isi kolom 4 baris 3</td>  

</tr>
</table>

Hasilnya sebagai berikut:

Isi kolom 1 baris 1	Isi kolom 2 baris 1	Isi kolom 3 baris 1	Isi kolom 4 baris 1
Isi kolom 1 baris 3	Isi kolom 2 baris 2	Isi kolom 3 baris 2	Isi kolom 4 baris 2
Isi kolom 1 baris 3	Isi kolom 2 baris 3	Isi kolom 3 baris 3	Isi kolom 4 baris 3

Tutorial ini cukup di sini dahulu nanti disambung di lain waktu.

Mengatur Properti Baris Dan Kolom Tabel Dalam HTML

Dalam membuat tabel dengan html, sebenarnya tabel yang kita buat tetap dapat berfungsi sebagaimana mestinya walaupun kita tidak melakukan pengaturan pada baris dan kolom tabel tersebut. Hanya saat kita memasukkan teks di dalamnya, kolom/sel ataupun baris tabel akan bergeser dan bisa saja menjadikan sel/kolom/baris  yang lainnya akan bergeser menjadi lebih kecil. Untuk itu kita harus menambahkan properti atau atribut pada baris dan sel kolom tabel yang kita buat, di antaranya sebagai berikut:

1. Atribut Baris (<tr atribut>.....................</tr>), di antaranya:
• Tata letak horizontal (align), yakni tatak letak teks/obek di dalam sel tabel, misalnya kiri (left), tengah (center), kanan (right) dan kiri-kanan (justify). Contoh sintaks: align="center"
• Tata letak vertikal (valign), yakni tatak letak teks/objek di dalam sel tabel secara horizontal. Maksudnya adalah saat teks/objek dimasukkan, maka akan berada pada posisi yang telah ditentukan. Misalnya jika kita memilih bagian atas (top), maka teks akan berada pada bagian atas.  Tatak letak letak yang tersedia adalah atas (top), tengah (middle) dan bawah (bottom). Contoh sintaks: valign="top"
  
  Catatan:
  Atribut yang kita berikan akan berlaku 1 baris dalam 1 sintaks <tr>....................</tr>, untuk sintaks <tr>.............</tr> lainnya akan berlaku atribut lain sesuai dengan atribut yang kita berikan.
2. Atribut Sel Kolom (<td atribut>............................</td>)
• Tata letak horizontal (align), yakni tata letak teks/objek di dalam sel kolom. Sintaksnya sama dengan pada atribut baris.
• Tata letak vertikal (valign), yakni tata letak teks/objek di dalam sel kolom secara vertikal. Sintaksnya sama dengan pada atribut baris.
• Warna latar (bgcolor) pada sel kolom. Sintaksnya: bgcolor="warna atau kode warna", contoh: bgcolor="red" atau bgcolor="#ff0000"
• Lebar sel kolom (width), diukur dengan angka dalam pixel (px) atau persen (%), contoh sintaks: width="50px".

Contoh:
<table border="1" bordercolor="black" align="center" cellpadding="1" cellspacing="0" Width="750px">
<tr align="center" valign="top">
<td bgcolor="red" align="center" valign="middle" width="40px">No</td>
<td bgcolor="blue" align="center" valign="middle" width="150px">Nama</td>
<td bgcolor="yellow" align="center" valign="middle" width="200px">Tempat/Tanggal Lahir</td>
<td bgcolor="green" align="center" valign="middle" width="260px">Alamat</td>
<td bgcolor="aqua" align="center" valign="middle" width="100px">Keterangan</td>
</tr>

<tr align="center" valign="top">
<td bgcolor="red" align="center" valign="middle" width="40px">1</td>
<td bgcolor="blue" align="center" valign="middle" width="50px">La Ode Raja Hussein A.A</td>
<td bgcolor="yellow" align="center" valign="middle" width="200px">Oensuli, 02-04-2010</td>
<td bgcolor="green" align="center" valign="middle" width="260px">Desa Oensuli</td>
<td bgcolor="aqua" align="center" valign="middle" width="100px"></td>
</tr>

<tr align="center" valign="top">
<td bgcolor="red" align="center" valign="middle" width="40px">2</td>
<td bgcolor="blue" align="center" valign="middle" width="50px">La Ode Safarudin T. An Nuh</td>
<td bgcolor="yellow" align="center" valign="middle" width="200px">Oensuli, 17-01-2012</td>
<td bgcolor="green" align="center" valign="middle" width="260px">Desa Oensuli</td>
<td bgcolor="aqua" align="center" valign="middle" width="100px"></td>
</tr>
</table>

Hasilnya sebagai berikut:

No	Nama	Tempat/Tanggal Lahir	Alamat	Keterangan
1	La Ode Raja Hussein A.A	Oensuli, 02-04-2010	Desa Oensuli
2	La Ode Safarudin T. An Nuh	Oensuli, 17-01-2012	Desa Oensuli

Catatan:
Tampilan tabel di atas mungkin akan berbeda ukurannya dalam blog ini karena lebar maksimum tabel tidak sampai 750px, Anda dapat mencobanya dengan menyalin kode di atas lalu tempelkan ke dalam HTML editor Anda, dan lihat hasilnya pada web browser.

Mengenal Rowspan Dalam Tabel HTML

Dalam membuat tabel, sering kali ada item yang sama yang ditulis. Misalnya pada tabel 1 berikut:

No	Nama	Tempat/Tanggal Lahir	Alamat	Keterangan
1	La Ode Raja Hussein A.A	Oensuli, 02-04-2010	Desa Oensuli
2	La Ode Safarudin T. An Nuh	Oensuli, 17-01-2012	Desa Oensuli

Tampak pada tabel di atas bahwa alamat adalah sama yakni Desa Oensuli. Item alamat dalam tabel di atas, dapat kita jadikan 1 (merger baris, dalam html disebut rowspan). Menjadi sebagai berikut (tabel 2):

No	Nama	Tempat/Tanggal Lahir	Alamat	Keterangan
1	La Ode Raja Hussein A.A	Oensuli, 02-04-2010	Desa Oensuli
2	La Ode Safarudin T. An Nuh	Oensuli, 17-01-2012

Bagaimana cara membuatnya?
Sintaks pada tabel 1 adalah sebagai berikut:

<table align="center" border="1" bordercolor="black" cellpadding="1" cellspacing="0">


<tr align="center" valign="top">
<td align="center" bgcolor="red" valign="middle" width="40px">No</td>
<td align="center" bgcolor="blue" valign="middle" width="150px">Nama</td>
<td align="center" bgcolor="yellow" valign="middle" width="200px">Tempat/Tanggal Lahir</td>
<td align="center" bgcolor="green" valign="middle" width="260px">Alamat</td>
<td align="center" bgcolor="aqua" valign="middle" width="100px">Keterangan</td>
 </tr>


<tr align="center" valign="top">
<td align="center" bgcolor="red" valign="middle" width="40px">1</td>
<td align="center" bgcolor="blue" valign="middle" width="50px">La Ode Raja Hussein A.A</td>
<td align="center" bgcolor="yellow" valign="middle" width="200px">Oensuli, 02-04-2010</td>

<td align="center" bgcolor="green" valign="middle" width="260px">Desa Oensuli</td> 

<td align="center" bgcolor="aqua" valign="middle" width="100px"></td>
</tr>


<tr align="center" valign="top">
<td align="center" bgcolor="red" valign="middle" width="40px">2</td>
<td align="center" bgcolor="blue" valign="middle" width="50px">La Ode Safarudin T. An Nuh</td>
<td align="center" bgcolor="yellow" valign="middle" width="200px">Oensuli, 17-01-2012</td>

<td align="center" bgcolor="green" valign="middle" width="260px">Desa Oensuli</td> 

<td align="center" bgcolor="aqua" valign="middle" width="100px"></td>
</tr>


</table>

Yang akan kita merger adalah kolom alamat yakni pada baris 2 dan 3 atau dalam sintaks di atas yang dicetak merah. Dalam melakukan merger baris, kita menambahkan sintaks rowspan="angka" pada baris dimana kita akan mulai. Banyaknya baris yang akan di merger adalah sama dengan angka yang dimasukkan dalam sintaks. Misalnya, jika baris yang akan kita merger adalah 2 baris, sintaksnya adalah: rowspan="2", hanya saja pada baris/sel selanjutnya tidak dimasukkan lagi. Misalnya pada contoh di atas (yang dicetak merah), cukup yang dicetak merah pertama saja yang diisi. Seperti contoh berikut:

<table align="center" border="1" bordercolor="black" cellpadding="1" cellspacing="0">


<tr align="center" valign="top">
<td align="center" bgcolor="red" valign="middle" width="40px">No</td>
<td align="center" bgcolor="blue" valign="middle" width="150px">Nama</td>
<td align="center" bgcolor="yellow" valign="middle" width="200px">Tempat/Tanggal Lahir</td>
<td align="center" bgcolor="green" valign="middle" width="260px">Alamat</td>
<td align="center" bgcolor="aqua" valign="middle" width="100px">Keterangan</td>
 </tr>


<tr align="center" valign="top">
<td align="center" bgcolor="red" valign="middle" width="40px">1</td>
<td align="center" bgcolor="blue" valign="middle" width="50px">La Ode Raja Hussein A.A</td>
<td align="center" bgcolor="yellow" valign="middle" width="200px">Oensuli, 02-04-2010</td>

<td align="center" bgcolor="green" valign="middle" width="260px" rownspan="2">Desa Oensuli</td> 

<td align="center" bgcolor="aqua" valign="middle" width="100px"></td>
</tr>


<tr align="center" valign="top">
<td align="center" bgcolor="red" valign="middle" width="40px">2</td>
<td align="center" bgcolor="blue" valign="middle" width="50px">La Ode Safarudin T. An Nuh</td>
<td align="center" bgcolor="yellow" valign="middle" width="200px">Oensuli, 17-01-2012</td>

<td align="center" bgcolor="green" valign="middle" width="260px">Desa Oensuli</td> 

<td align="center" bgcolor="aqua" valign="middle" width="100px"></td>
</tr>


</table>

Menjadi sebagai berikut:

<table border="1" bordercolor="black" align="center" cellpadding="1" cellspacing="0" Width="750px">

<tr align="center" valign="top">
<td bgcolor="red" align="center" valign="middle" width="40px">No</td>
<td bgcolor="blue" align="center" valign="middle" width="150px">Nama</td>
<td bgcolor="yellow" align="center" valign="middle" width="200px">Tempat/Tanggal Lahir</td>
<td bgcolor="green" align="center" valign="middle" width="260px">Alamat</td>
<td bgcolor="aqua" align="center" valign="middle" width="100px">Keterangan</td>
</tr>

<tr align="center" valign="top">
<td bgcolor="red" align="center" valign="middle" width="40px">1</td>
<td bgcolor="blue" align="center" valign="middle" width="50px">La Ode Raja Hussein A.A</td>
<td bgcolor="yellow" align="center" valign="middle" width="200px">Oensuli, 02-04-2010</td>
<td bgcolor="green" align="center" valign="middle" width="260px" rowspan="2">Desa Oensuli</td>
<td bgcolor="aqua" align="center" valign="middle" width="100px"></td>
</tr>

<tr align="center" valign="top">
<td bgcolor="red" align="center" valign="middle" width="40px">2</td>
<td bgcolor="blue" align="center" valign="middle" width="50px">La Ode Safarudin T. An Nuh</td>
<td bgcolor="yellow" align="center" valign="middle" width="200px">Oensuli, 17-01-2012</td>
<td bgcolor="aqua" align="center" valign="middle" width="100px"></td>
</tr>

</table>

Hasilnya seperti tabel 2 di atas.

Anda dapat mencoba dengan tabel dengan baris yang banyak.