pengaturan layout dan penyajian data dalam betuk baris dan kolom. Dengan menggunakan bentuk tabel layout kita bisa lebih rapi dan tertata, begitu juga dengan data yang kita tampilkan didalam table akan sangat informatif dibanding dengan data yang kita tampilkan secara acak atau apa adanya.
Sebagai contoh Tag yang digunakan untuk membuat Tabel adalah sebagai berikut :
Silahkan copas script ini di notepad dan simpan dengan format ( .html ) , setelah di save open file itu dengan browser yang anda miliki dan lihat hasilnya.
Contoh:
<html>
<head><title>Sampul Ilmu</title></head>
<body>
<BODY><CENTER>
<P>Menggunakan tag <b><
TABLE BORDER="1"></b><P>
<TABLE BORDER="1">
<TR>
<TD>Baris #1 Kolom #1</TD>
<TD>Baris #1 Kolom #2</TD>
</TR>
<TR>
<TD>Baris #2 Kolom #1</TD>
<TD>Baris #2 Kolom #2</TD>
</TR>
</TABLE></body></html>
Menggabungkan Kolom
Contoh :
<html>
<head><title>Sampul Ilmu</title></head>
<BODY>
<TABLE BORDER="1" CELLPADDING="1" CELLSPACING="1">
<TR>
<TD COLSPAN=2>Kolom A & B</TD>
</TR>
<TR>
<TD>Kolom C</TD>
<TD>Kolom D</TD>
</TR>
</TABLE></BODY>
</html>
Menggabungkan Baris
Contoh
<html>
<head><title>Sampul Ilmu</title></head>
<BODY>
<TABLE BORDER="1" CELLPADDING="1" CELLSPACING="1">
<TR>
<TD ROWSPAN="2">Kolom A & C</TD> <!-- Menggabung baris -->
<TD>Kolom B</TD>
</TR>
<TR>
<TD>Kolom D</TD>
</TR>
</TABLE>
</BODY>
</html>
Perataan Tabel
Posisi tabel dapat diatur pertaannya dengan menyertakan atribut ALIGN pada tag <TABLE>
Contoh:
<html><body>
<TABLE BORDER ALIGN="center">
<TR>
<TH>ALIGN="center"</TH>
<TD>Kolom #A Tengah</TD>
<TD>Kolom #B Tengah</TD>
</TR>
</TABLE><BR>
<TABLE BORDER ALIGN="right">
<TR>
<TH>ALIGN="right"</TH>
<TD>Kolom #A Kanan</TD>
<TD>Kolom #B Kanan</TD>
</TR>
</TABLE><BR>
<TABLE BORDER ALIGN="left">
<TR>
<TH>ALIGN="Left"</TH>
<TD>Kolom #A Kiri</TD>
<TD>Kolom #B Kiri</TD>
</TR>
</TABLE>
</body></html>
Mengatur Isi Sel
Teks dalam sel dapat diatur (align) dengan: Rata kiri, rata tengah, dan rata kanan
Atribut yang digunakan adalah :
Align={“left” | “center” | “right”} pada tag <TD>
Atau
Align={“left” | “center” | “right” | “justify”} pada tag <P> dalam tag <TD>
Contoh:
<html>
<BODY>
<TABLE BORDER="1" CELLSPACING="1" WIDTH="100%">
<TR bgcolor="silver">
<td>Text Rata Kiri</td>
<td>Text Rata Tengah</td>
<td>Text Rata Kanan</td>
<td>Text Rata Kiri-Kanan</td>
</TR>
</TR>
<TR>
<TD ALIGN="left" bgcolor="yellow">Kata-kata dalam sel ini rata KIRI</TD>
<TD ALIGN="center">Kata-kata dalam sel ini rata TENGAH</TD>
<TD ALIGN="right" bgcolor="green"><font color="yellow">Kata-kata dalam sel ini rata KANAN</TD>
<TD><p Align="Justify">Kata-kata dalam sel ini rata KIRI-KANAN</TD>
</TR>
</TABLE>
</BODY>
</html>
Selamat mencoba, semoga bermmanfaat,,,jangan lupa save sebagai file html untuk melihat hasilnya secara langsung, walaupun disave dengan php juga bisa.
Yang perli kita lakukan dalam pembuatan table ini adalah kreatifitas kita dalam menggunakan tag yang digunakan oleh table. Tag - tag ini misalnya <table> sebagi pembuka, kemudia ada <th> , <td> yang fungsinya hampir sama yaitu melakukan penambahan colom, atau bisa juga dikatakan memecah satu baris menjadi banyak kolom sesuai yang kita butuhkan. Sedangkan untuk membuat baris kita memerlukan Tag <tr> satu <tr> kemudian akan diakhiri dengan tag </tr> berarti terdapat 1 baris, 2 tag <tr> dan </tr> berarti 2 baris dan seterusnya. Untuk mengakhiri tang cukup di tambahkan (/) sebelum pemberian nama tag.
Silahkan copas script ini di notepad dan simpan dengan format ( .html ) , setelah di save open file itu dengan browser yang anda miliki dan lihat hasilnya.
Contoh:
<html>
<head><title>Sampul Ilmu</title></head>
<body>
<BODY><CENTER>
<P>Menggunakan tag <b><
TABLE BORDER="1"></b><P>
<TABLE BORDER="1">
<TR>
<TD>Baris #1 Kolom #1</TD>
<TD>Baris #1 Kolom #2</TD>
</TR>
<TR>
<TD>Baris #2 Kolom #1</TD>
<TD>Baris #2 Kolom #2</TD>
</TR>
</TABLE></body></html>
Menggabungkan Kolom
Contoh :
<html>
<head><title>Sampul Ilmu</title></head>
<BODY>
<TABLE BORDER="1" CELLPADDING="1" CELLSPACING="1">
<TR>
<TD COLSPAN=2>Kolom A & B</TD>
</TR>
<TR>
<TD>Kolom C</TD>
<TD>Kolom D</TD>
</TR>
</TABLE></BODY>
</html>
Menggabungkan Baris
Contoh
<html>
<head><title>Sampul Ilmu</title></head>
<BODY>
<TABLE BORDER="1" CELLPADDING="1" CELLSPACING="1">
<TR>
<TD ROWSPAN="2">Kolom A & C</TD> <!-- Menggabung baris -->
<TD>Kolom B</TD>
</TR>
<TR>
<TD>Kolom D</TD>
</TR>
</TABLE>
</BODY>
</html>
Perataan Tabel
Posisi tabel dapat diatur pertaannya dengan menyertakan atribut ALIGN pada tag <TABLE>
Contoh:
<html><body>
<TABLE BORDER ALIGN="center">
<TR>
<TH>ALIGN="center"</TH>
<TD>Kolom #A Tengah</TD>
<TD>Kolom #B Tengah</TD>
</TR>
</TABLE><BR>
<TABLE BORDER ALIGN="right">
<TR>
<TH>ALIGN="right"</TH>
<TD>Kolom #A Kanan</TD>
<TD>Kolom #B Kanan</TD>
</TR>
</TABLE><BR>
<TABLE BORDER ALIGN="left">
<TR>
<TH>ALIGN="Left"</TH>
<TD>Kolom #A Kiri</TD>
<TD>Kolom #B Kiri</TD>
</TR>
</TABLE>
</body></html>
Mengatur Isi Sel
Teks dalam sel dapat diatur (align) dengan: Rata kiri, rata tengah, dan rata kanan
Atribut yang digunakan adalah :
Align={“left” | “center” | “right”} pada tag <TD>
Atau
Align={“left” | “center” | “right” | “justify”} pada tag <P> dalam tag <TD>
Contoh:
<html>
<BODY>
<TABLE BORDER="1" CELLSPACING="1" WIDTH="100%">
<TR bgcolor="silver">
<td>Text Rata Kiri</td>
<td>Text Rata Tengah</td>
<td>Text Rata Kanan</td>
<td>Text Rata Kiri-Kanan</td>
</TR>
</TR>
<TR>
<TD ALIGN="left" bgcolor="yellow">Kata-kata dalam sel ini rata KIRI</TD>
<TD ALIGN="center">Kata-kata dalam sel ini rata TENGAH</TD>
<TD ALIGN="right" bgcolor="green"><font color="yellow">Kata-kata dalam sel ini rata KANAN</TD>
<TD><p Align="Justify">Kata-kata dalam sel ini rata KIRI-KANAN</TD>
</TR>
</TABLE>
</BODY>
</html>
Selamat mencoba, semoga bermmanfaat,,,jangan lupa save sebagai file html untuk melihat hasilnya secara langsung, walaupun disave dengan php juga bisa.
