Tag awal yang digunakan adalah <TABLE> dan tag penutupnya </TABLE>.
Bagian Tabel
Bagian Tabel
a. Judul Table
<CAPTION> ...judul tabel...</CAPTION> digunakan untuk membentuk judul table. Judul table akan terletak di luar table di bagian atas atau di bagian bawah.
<TH>judul tabel</TH> digunakan untuk meletakkan judul table di bagian paling atas atau bagian paling kiri dari table.
b. Isi Tabel
Tag <TR> digunakan untuk memulai baris pada suatu tabel dan disertai dengan penutupnya yaitu </TR>. diantara atau didalam Tag <TR> diletakan tag <TD>kolom tabel</TD> sebagai kolom dari tabel yang kamu buat, digunakan untuk tempat menuliskan informasi atau data tabel. Jumlah tabel dan baris bisa berapa saja sesuai keinginan anda.
penulisan tabel adalah :
<table [properti] >
<tr >
<td>kolom 1 pada baris 1</td>
<td>kolom 2 pada baris 1</td>
<td>kolom n pada baris 1</td>
</tr>
<tr>
<td>kolom 1 pada baris 2</td>
<td>kolom 2 pada baris 2</td>
<td>kolom n pada baris 2</td>
</tr>
</table>
<tr >
<td>kolom 1 pada baris 1</td>
<td>kolom 2 pada baris 1</td>
<td>kolom n pada baris 1</td>
</tr>
<tr>
<td>kolom 1 pada baris 2</td>
<td>kolom 2 pada baris 2</td>
<td>kolom n pada baris 2</td>
</tr>
</table>
hasilnya
contoh penulisan tabel
<html>
<head>
<title>Tabel</title>
</head>
<body>
<table border="1">
<caption>seputar liga italia</caption>
<tr>
<th>nama klub</th>
<th>berita</th>
</tr>
<tr>
<td>Ac milan</td>
<td>Ac milan mengalahkan Intermilan di semifinal liga champion</td>
</tr>
<tr>
<td>Juventus</td>
<td>Juventus juara liga italia musim 2002/2003</td>
</tr>
<td>
<tr>Roma</tr>
<tr>Roma akan berhadapan dengan Milan di final copa italia</tr>
</td>
</table>
</body>
</html>
<head>
<title>Tabel</title>
</head>
<body>
<table border="1">
<caption>seputar liga italia</caption>
<tr>
<th>nama klub</th>
<th>berita</th>
</tr>
<tr>
<td>Ac milan</td>
<td>Ac milan mengalahkan Intermilan di semifinal liga champion</td>
</tr>
<tr>
<td>Juventus</td>
<td>Juventus juara liga italia musim 2002/2003</td>
</tr>
<td>
<tr>Roma</tr>
<tr>Roma akan berhadapan dengan Milan di final copa italia</tr>
</td>
</table>
</body>
</html>
Properti pada Tabel
a. Tabel Border
Properti Border ditambahkan jika anda ingin mengatur ketebalan border. Nilai default border adalah 0 dan anda tidak perlu menuliskan properti border=0 jika anda tidak ingin memberi border(karena sudah default border=0). Border bernilai 0 tidak akan terlihat, untuk memunculkan border nilai boder harus diisikan 1.
b.Table ALIGN dan WIDTH
Dalam perataan horizontal menggunakan atribut ALIGN, dimana bisa bernilai left untuk perataan kiri, right untuk perataan kanan. Untuk perataan vertical Anda dapat menggunakan VALIGN, bernilai TOP untuk perataan atas, bernilai MIDDLE untuk perataan tengah dan BOTTOM untuk perataan bawah. Sedangkan untuk WIDTH digunakan untuk mengatur lebar table biasanya dinyatakan dalam (%) atau dinyatakan dengan pixel yang berarti ukuran sesungguhnya.
contoh:
<html>
<head>
<title>Tabel dengan width dan align</title>
</head>
<body>
<table width="88%" height="210">
<tr>
<td width="30%" height="110" valign="top">lihatlah
valign="top"<br>
jangan kamu malu pada sesuatu yang tidak kamu ketahui
</td>
<td width="34%" height="110" valign="middle">bandingkan
dengan valign="middle"<br>
</td>
<td width="36%" height="110" valign="bottom">bagaimana dengan
valign="bottom"<br>
</td>
</tr>
</table>
</body>
</html>
<head>
<title>Tabel dengan width dan align</title>
</head>
<body>
<table width="88%" height="210">
<tr>
<td width="30%" height="110" valign="top">lihatlah
valign="top"<br>
jangan kamu malu pada sesuatu yang tidak kamu ketahui
</td>
<td width="34%" height="110" valign="middle">bandingkan
dengan valign="middle"<br>
</td>
<td width="36%" height="110" valign="bottom">bagaimana dengan
valign="bottom"<br>
</td>
</tr>
</table>
</body>
</html>
c.Table CELLSPACING dan CELLPADDING
Atribut CELLSPACING digunakan untuk menentukan jumlah spasi yang terdapat diantara dua buah cell. CELLPADDING digunakan untuk mengatur jumlah spasi yang terdapat antar batas/ border dengan isi atau teks di dalam cell tersebut.
contoh:
<html>
<head>
<title>cellspacing dan cellpadding</title>
</head>
<body>
<table width="85%" border="3" cellspacing="5" cellpadding="5">
<tr>
<td width="43%">baris 1, kolom 1</td>
<td width="57%">baris1, kolom 2</td>
</tr>
<tr>
<td>baris 2, kolom 1</td>
<td>baris 2, kolom 2</td>
</tr>
</table>
</body>
</html>
<head>
<title>cellspacing dan cellpadding</title>
</head>
<body>
<table width="85%" border="3" cellspacing="5" cellpadding="5">
<tr>
<td width="43%">baris 1, kolom 1</td>
<td width="57%">baris1, kolom 2</td>
</tr>
<tr>
<td>baris 2, kolom 1</td>
<td>baris 2, kolom 2</td>
</tr>
</table>
</body>
</html>
c.Table COLSPAN dan ROWSPAN
Atribut COLSPAN digunakan untuk menghubungkan beberapa kolom menjadi 1 kolom. ROWSPAN digunakan untuk menghubungkan beberapa baris menjadi satu.
contoh:
<html>
<head>
<title>colspan dan rowspan</title>
</head>
<body>
<table width="85%" border="1" cellspacing="5" cellpadding="5">
<tr>
<td width="43%" rowspan="2">baris 1, kolom 1 <p>baris 2, kolom 1</td>
<td width="57%">baris 1, kolom 1</td>
</tr>
<tr>
<td width="57%">baris 2, kolom 2</td>
</tr>
<tr>
<td width="100%" colspan="2">baris 3, kolom 1 <p> baris 3, kolom 2</td>
</tr>
</table>
</body>
</html>
d.Table COLOR
Selain warna pada background, border juga bisa ditentukan warnanya. Untuk background digunakan atribut BGCOLOR dan untuk memberi warna pada border digunakan atribut BORDER COLOR.
contoh:
<html>
<body>
<table width="100%" border="3" cellpadding="5" cellspacing="5" bordercolor="#FF0000">
<tr>
<td width="50%" bgcolor="#808080"> </td>
<td width="50%"> </td>
</tr>
<tr>
<td width="50%"> </td>
<td width="50%" bgcolor="#008080"> </td>
</tr>
</table>
<table width="100%" border="3" cellpadding="5" cellspacing="5"
bordercolorlight="008080"
bordercolordark="800080">
<tr>
<td width="100%"> </td>
</tr>
</table>
</body>
</html>
Untuk contoh copy paste aja contoh penggunaannya dengan notepad lalu save as sebagai file html.
Posts
0 comments:
Post a Comment
Silahkan berkomentar dengan bijak, tapi jangan spam !