Tabel adalah terdiri dari kolom dan baris
yang terdapat suatu informasi dalam bentuk angka ataupun data didalamnya. Tabel
biasa dibuat untuk mempermudah pembaca dalam memahami suatu data, karena melalui
tabel suatu informasi dapat disajikan secara ringkas dan mudah dipahami.
Dalam pembuatan suatu tabel secara digital
tentu sudah sangat dimudahkan dengan adanya software-software office seperti
ms.word dan ms.excel, serta penggunaan tag dalam pembuatan tabel pada html
untuk keperluan online.
Pada umumnya suatu lay-out tampilan suatu
web adalah terdiri dari kumpulan tabel-tabel yang dimanipulasi. Pembuatan tabel
pada suatu halaman web biasa dibuat dengan menggunakan 3 tag dasar kode html,
seperti <table>, <tr>, dan <td>. Tag <table> adalah
untuk menandai sebuah tabel, sementara tag <tr> digunakan untuk membentuk
baris, dan tag <td> digunakan untuk membentuk kolom. Pada tampilan
default-nya nilai border pada tabel adalah 0, sehingga bingkai suatu tabel
tidak akan nampak pada tampilan browser. Untuk dapat menampilkan bingkai pada
tabel maka border harus diberi nilai minimal 1. Pada artikel kali ini kita akan
belajar membuat suatu tabel denan menggunakan kode html.
Mari kita mulai...
<table
border="1">
<tr>
<td>tulis sesuatu</td>
</tr>
</table>
*contoh kode diatas adalh tabel 1x1, 1 kolom 1 baris. Dan hasilnya
akan seperti ini..
Jika kita ingin
menambahkan kolom pada tabel menjadi 1x2, 1 baris 2 kolom. Maka masukkan kode
berikut..
<table
width="200" border="1">
<tr>
<td>kolom 1</td>
<td>kolom 2</td>
</tr>
</table>
*maka hasilnya akan seperti ini...
Jika kita ingin
menambahkan baris pada tabel menjadi 2x1, 2 baris 1 kolom. Maka masukkan kode
berikut..
<table
border="1">
<tr>
<td>baris 1</td>
</tr>
<tr>
<td>baris 2</td>
</tr>
</table>
*dan hasilnya akan seperti ini...
***Rehat sejenak, silahkan pahami dulu perbedaan penggunaan
<tr> dan <td>.
Sekarang mari kita
belajar menentukan lebar suatu kolom dalam bentuk prosentase..
<table
width=100% border="1">
<tr>
<td width=25%>ini width
25%</td>
<td width=75%>ini width
75%</td>
</tr>
<tr>
<td width=25%>ini width
25%</td>
<td width=75%>ini width
75%</td>
</tr>
</table>
*kita lihat hasilnya akan seperti ini...
Nah sekian, semoga bermanfaat..
Terima kasih
ConversionConversion EmoticonEmoticon