Minggu ke-3
LEBIH MENGENAL TAG <TABLE>
Pertama yang harus kita tuliskan adalah tag <table> dan diakhiri oleh </table> setelah tag <body>, untuk menuliskan berapa banyak baris yang kita pakai dalam tabel kita tinggal menambahkan tag <tr> </tr> didalam tag <table> sementara untuk kolom kita menambahkan tag <td> </td> ataupun tag <th> </th> perbedaannya tag <th> untuk header didalam tabel dan tag <td> adalah isi dari tabel tersebut
Contoh - contoh tabel dan code html nya:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<TABLE>
<CAPTION>Tabel Keahlian</CAPTION>
<TR><TH>Nama</TH><TH>Keahlian</TH></TR>
<TR><TD>Superman</TD><TD>Bisa Terbang</TD></TR>
<TR><TD>Spiderman</TD><TD>Bisa Panjat Dinding</TD></TR>
<TR><TD>Mbah Boedy</TD><TD>Bisa Ngajar :)</TD></TR>
</TABLE>
</BODY>
</HTML>
ini tabel yang sangat standard, dan tidak memakai border jika ingin memakai border dan background pada tabel kita tinggal memasukan tag <table border="10" bgcolor="green">
contoh tabel dan html nya:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<TABLE BGCOLOR="yellow" BORDER="5">
<CAPTION>Tabel Keahlian</CAPTION>
<TR><TH>Nama</TH><TH>Keahlian</TH></TR>
<TR><TD>Superman</TD><TD>Bisa Terbang</TD></TR>
<TR><TD>Spiderman</TD><TD>Bisa Panjat Dinding</TD></TR>
<TR><TD>Mbah Boedy</TD><TD>Bisa Ngajar :)</TD></TR>
</TABLE>
</BODY>
</HTML>
MENGENAL CELLPADDING DAN CELLSPACING:
Pengaturan jarak pada tabel diatur oleh atribut CELLPADDING dan CELLSPACING pada tag <TABLE>. CELLPADDING digunakan untuk mengatur jarak antara teks dengan batas tepi kiri, atas, dan bawah dari suatu cell dan CELLSPACING digunakan untuk mengatur jarak antar cell.
contoh tabel dan code html nya:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="1" WIDTH="300" HEIGHT="200">
<CAPTION>Tabel Keahlian</CAPTION>
<TR><TH>Nama</TH><TH>Keahlian</TH></TR>
<TR><TD>Superman</TD><TD>Bisa Terbang</TD></TR>
<TR><TD>Spiderman</TD><TD>Bisa Panjat Dinding</TD></TR>
<TR><TD>Mbah Boedy</TD><TD>Bisa Ngajar :)</TD></TR>
</TABLE>
</BODY>
</HTML>
ROWSPAN DAN COLSPAN:
Untuk melakukan penggabungan cell dapat dilakukan dengan mengatur atribut COLSPAN dan ROWSPAN pada tag <TD> ataupun <TH>. Atribut COLSPAN digunakan untuk mengatur penggabungan kolom sedangkan atribut ROWSPAN digunakan untuk penggabungan baris.
contoh contoh tabel dan html nya:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="5">
<CAPTION>Data Mamalia di Kebun Binatang</CAPTION>
<TR>
<TH ROWSPAN="2" COLSPAN="2">Mamalia</TH>
<TH COLSPAN="3">Jenis Mamalia</TH>
</TR>
<TR>
<TH bgcolor=>Orang Utan</TH>
<TH>Gajah</TH>
<TH>Zebra</TH>
</TR>
<TR>
<TH ROWSPAN="2">Jenis Kelamin</TH>
<TH>Jantan</TH>
<TD>15</TD>
<TD>5</TD>
<TD>8</TD>
</TR>
<TR>
<TH>Betina</TH>
<TD>25</TD>
<TD>7</TD>
<TD>10</TD>
</TR>
</Table>
</BODY>
</HTML>
contoh:
<HTML>
<BODY>
<table border="3"width="400" height="400">
<tr>
<th colspan="3"><img src="Desert.jpg" width="50" height="50"><h2 align="center">Global Solution</h2></th>
</tr>
<tr>
<td rowspan="4">Global solution.........</td>
</tr>
<tr>
<td><ol type="1">
<li>____</li>
<li>____</li>
<li>____</li>
</td>
</tr>
<tr>
<td>
Rencana kedepannya....
</td>
</tr>
<tr>
<td>
tujuan perusahaan....
</td>
</tr>
</table>
</BODY>
</HTML>
contoh:
<html>
<head>
</head>
<body>
<table border="1">
<tr><td bgcolor="black">hitam</td> <td colspan="3"></td> <td bgcolor="black">hitam</td> </tr>
<tr><td colspan="2"></td> <td bgcolor="black">black</td> <td colspan="2"></td> </tr>
<tr><td colspan="1"></td><td bgcolor="black">hitam</td><td></td> <td bgcolor="black">hitam</td> <td colspan="1"></td> </tr>
<tr><td colspan="2"></td><td bgcolor="black">hitam</td><td colspan="2"></td></tr>
<tr><tr><td bgcolor="black">hitam</td> <td colspan="3"></td> <td bgcolor="black">hitam</td> </tr></tr>
</table>
</body>
</html><html>
<head>
</head>
<body>
<table border="1">
<tr><td bgcolor="black">hitam</td> <td colspan="3"></td> <td bgcolor="black">hitam</td> </tr>
<tr><td colspan="2"></td> <td bgcolor="black">black</td> <td colspan="2"></td> </tr>
<tr><td colspan="1"></td><td bgcolor="black">hitam</td><td></td> <td bgcolor="black">hitam</td> <td colspan="1"></td> </tr>
<tr><td colspan="2"></td><td bgcolor="black">hitam</td><td colspan="2"></td></tr>
<tr><tr><td bgcolor="black">hitam</td> <td colspan="3"></td> <td bgcolor="black">hitam</td> </tr></tr>
</table>
</body>
</html>
diposting oleh PEMROGRAMAN WEB @ 09.00
0 Komentar
0 Komentar:
Posting Komentar
Berlangganan Posting Komentar [Atom]
<< Beranda