Membuat tabel di awali dengan tag di bawah ini :
<table width="450px" cellspacing="0px" cellpadding="5" border="2px">
<tr align="center" bgcolor="#39C5FF">
<td>judul kolom1</td>
<td>judul kolom2</td>
<td>judul kolom3</td>
</tr>
<tr align="left">
<td>isi kolom ke 1</td>
<td>isi kolom ke 2</td>
<td>isi kolom ke 3</td>
</tr>
</table>
Contoh:
Kita akan membuat tabel yang berisi nomor, nama, jenis kelamin dan alamat di bawah ini:
<table width="450px" cellspacing="0px" cellpadding="5px" border="2px">
<tr align="center" bgcolor="#39C5FF">
<td><b>No</b></td>
<td><b>Nama</b></td>
<td><b>Jenis Kelamin</b></td>
<td><b>Alamat</b></td>
</tr>
<tr align="left">
<td>1</td>
<td>Sarjono</td>
<td>Laki-laki</td>
<td>Jl. Jawa 290 Surabaya</td>
</tr>
</table>
Hasil :
| No | Nama | Jenis Kelamin | Alamat |
| 1 | Sarjono | Laki-laki | Jl. Jawa 290 Surabaya |
Penjelasan
width="450px" adalah lebar tabel sebesar 450 pixel anda bisa mengganti angka tersebut sesuai dengan keinginan anda
cellspacing="0" jarak antar cell pada tabel sebesar 0 pixel, boleh dikatakan tidak ada jarak.
cellpadding="5px" adalah jarak penulisan dari samping, atas dan bawah cell sebesar 5 pixel, anda bisa mengganti jarak tersebut sesuai dengan keinginan anda.
<tr align="center" bgcolor="#39C5FF"> adalah bahwa kepala tabel rata tengah dan berwarna biru muda.
border="2px" adalah garis tepi dari tabel dengan ketebalan 2 pixel
sedangkan <tr align="left"> adalah bahwa cell untuk isi dari tabel rata kiri dan tidak menggunakan warna.
Bagaimana bila kita menginginkan cell dari isi tabel berwarna putih?
Pada <tr align="left"> tinggal menambahkan bgcolor="#FFFFFF" sehingga menjadi <tr align="left" bgcolor="#FFFFFF">
Masih bingung, baiklah kita menggunakan contoh di atas dengan cell untuk isi tabel berwarna putih, sebagai berikut:
<table width="450px" cellspacing="0px" cellpadding="5px" border="2px">
<tr align="center" bgcolor="#39C5FF">
<td><b>No</b></td>
<td><b>Nama</b></td>
<td><b>Jenis Kelamin</b></td>
<td><b>Alamat</b></td>
</tr>
<tr align="left" bgcolor="#FFFFFF">
<td>1</td>
<td>Sarjono</td>
<td>Laki-laki</td>
<td>Jl. Jawa 290 Surabaya</td>
</tr>
</table>
Hasil :
| No | Nama | Jenis Kelamin | Alamat |
| 1 | Sarjono | Laki-laki | Jl. Jawa 290 Surabaya |
Bagaimana bila isi Tabel lebih dari satu?
Contoh:
<table width="450px" cellspacing="0px" cellpadding="5px" border="2px">
<tr align="center" bgcolor="#39C5FF">
<td><b>No</b></td>
<td><b>Nama</b></td>
<td><b>Jenis Kelamin</b></td>
<td><b>Alamat</b></td>
</tr>
<tr align="left" bgcolor="#FFFFFF">
<td>1<br/>2<br/>3<br/>4</td>
<td>Sarjono<br/>Sartono<br/>Jamilah<br/>Paiman</td>
<td>Laki-laki<br/>Laki-laki<br/>Perempuan<br/>Laki-laki</td>
<td>Jl. Jawa 290 Surabaya<br/>Jl. Bali 322 Surabaya<br/>Jl. Lombok 411 Surabaya<br/>Jl. Sumba 523 Surabaya</td>
</tr>
</table>
Hasil :
| No | Nama | Jenis Kelamin | Alamat |
| 1 2 3 4 | Sarjono Sartono Jamilah Paiman | Laki-laki Laki-laki Perempuan Laki-laki | Jl. Jawa 290 Surabaya Jl. Bali 322 Surabaya Jl. Lombok 411 Surabaya Jl. Sumba 523 Surabaya |
Bila anda menginginkan antar cell untuk isi tabel dipisahkan oleh garis, maka sebagai berikut:
Contoh :
<table width="450px" cellspacing="0px" cellpadding="5px" border="2px">
<tr align="center" bgcolor="#39C5FF">
<td><b>No</b></td>
<td><b>Nama</b></td>
<td><b>Jenis Kelamin</b></td>
<td><b>Alamat</b></td>
</tr>
<tr align="left" bgcolor="#FFFFFF">
<td>1</td>
<td>Sarjono</td>
<td>Laki-laki</td>
<td>Jl. Jawa 290 Surabaya</td>
</tr>
<tr align="left" bgcolor="#FFFFFF">
<td>2</td>
<td>Sartono</td>
<td>Laki-laki</td>
<td>Jl. Bali 322 Surabaya</td>
</tr>
<tr align="left" bgcolor="#FFFFFF">
<td>3</td>
<td>Jamilah</td>
<td>Perempuan</td>
<td>Jl. Lombok 411 Surabaya</td>
</tr>
<tr align="left" bgcolor="#FFFFFF">
<td>4</td>
<td>Paiman</td>
<td>Laki-laki</td>
<td>Jl. Sumba 523 Surabaya</td>
</tr>
</table>
Hasil :
| No | Nama | Jenis Kelamin | Alamat |
| 1 | Sarjono | Laki-laki | Jl. Jawa 290 Surabaya |
| 2 | Sartono | Laki-laki | Jl. Bali 322 Surabaya |
| 3 | Jamilah | Perempuan | Jl. Lombok 411 Surabaya |
| 4 | Paiman | Laki-laki | Jl. Sumba 523 Surabaya |
Semoga bermanfaat dan selamat mencoba!!!
0 comments:
Post a Comment