Membuat
tabel dengan tag <table> di html. Untuk membuat tabel di html kita perlu
mengetahui tag tabel dalam html , diantaranya ialah <table></table>
,<tr></tr>,<th></th>,<td></td>. Disini akan
saya jelaskan fungsi tag tabel satu persatu.
Untuk
meletakkan tag table harus diawali dengan <table> dan diakhiri juga
dengan </table>. Sedangkan tag <tr> </tr> (Table Row) ini
merupakan baris pada table. Dan <th></th> Merupakan Tag Table
Heading yang biasanya digunakan untuk judul kolom tabel. Tag <td></td>
(Table Data) merupakan kolom pada tabel. Untuk jelasnya kita lihat contoh
berikut :
<html>
<head>
<title>Contoh Tabel Pada HTML</title>
</head>
<body>
<table border=1>
<tr>
<th>Judul Kolom
1</th>
<th>Judul Kolom
2</th>
</tr>
<tr>
<td>isi Kolom 1 Baris 1</td>
<td>isi Kolom 2
Baris 1</td>
</tr>
</table>
</body>
</html>
Maka
akan menghasilkan output seperti ini :
·
Didalam tag table terdapat atribut border=1,
yaitu memberikan ketebalan border 1,
·
Didalam tag <tr></tr> terdapat dua
kolom, karena tag <td></td> ada dua kali.
· Tag <th></th>, merupakan tabel heading, atau judul kolom , yang akan
ditandai dengan huruf bercetak tebal
· Dan didalam tag table hanya ada 3 tag
<tr></tr>, ini berarti baris pada tabel ada 3.
Nah, mungkin dari contoh diatas
kawan-kawan sudah mulai mengerti untuk membuat table dalam HTML. Selanjutnya
kita akan mencoba membuat Biodata dengan table.
Berikut contohnya:
Berikut contohnya:
<html>
<head>
<title>Biodata</title>
</head>
<body>
<h2 align="center">Biodata</h2>
<table border=1 align="center"
width=”500px” cellspacing=0>
<tr>
<th>NAMA</th>
<th>JENIS
KELAMIN</th>
<th>ALAMAT</th>
</tr>
<tr>
<td>Andi</td>
<td>Laki-laki</td>
<td>Tembung</td>
</tr>
<tr>
<td>Wahyu</td>
<td>Laki-laki</td>
<td>Marelan</td>
</tr>
<tr>
<td>Dea</td>
<td>Perempuan</td>
<td>Binjai</td>
</tr>
</table>
</body>
</html>
Keterangan:
· Tag <h2
align="center">Biodata</h2> , merupakan heading, disini saya
menggunakan sebagai judul, dan terdapat atribut align dengan value Center,
berarti pada tag h2 saya menginginkan posisinya berada di tengah, (didalam tag
<body>).
· Di <table border=1 align="center"
width="500px">, saya juga memberikan atribut align supaya table
berada di tengah. Dan width yang berarti lebar , saya memberikan lebar pada
tabel yaitu 500px.
· Atribut cellspacing dalam tag <table border=1
align="center" width=”500px” cellspacing=0> merupakan jarak antar
kolom dengan kolom lainnya.
Oke, kawan-kawan bisa juga
mencoba untuk membuat tabel di html , mungkin dengan tema daftar buku atau
semacamnya. Jika ada yang kurang jelas bisa berikan komentar dibawah. Sekian
dari saya semoga bermanfaat.
No comments