Tabel pada HTML dipergunakan untuk membuat dan menampilkan data dalam betuk
baris dan kolom. Disini kita akan membahas apa saja yang digunakan untuk
membuat Tabel adalah:
Bagian untuk Mengatur Border
Border yaitu merupakan garis yang mengelilingi pada sebuah tabel.
Border yaitu merupakan garis yang mengelilingi pada sebuah tabel.
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>
<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>
Bagian untuk
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>
Bagian untuk Menggabungkan Baris
Contoh :
<html>
<head><title>Sampul Ilmu</title></head>
<BODY>
<TABLE BORDER="1" CELLPADDING="1" CELLSPACING="1">
<TR>
<TD ROWSPAN="2">Kotak A & C</TD> <!-- Menggabung baris -->
<TD>Kotak B</TD>
</TR>
<TR>
<TD>Kotak D</TD>
</TR>
</TABLE>
</BODY>
</html>
Bagian unutk Perataan Tabel
Posisi tabel dapat diatur pertaannya dengan
menyertakan atribut yaitu ALIGN
pada tag <TABLE>
Contoh :
<html><body>
<TABLE BORDER ALIGN="center">
<TR>
<TH>ALIGN="center"</TH>
<TD>Kotak #A Tengah</TD>
<TD>Kotak #B Tengah</TD>
</TR>
</TABLE><BR>
<TABLE BORDER ALIGN="right">
<TR>
<TH>ALIGN="right"</TH>
<TD>Kotak #A Kanan</TD>
<TD>Kotak #B Kanan</TD>
</TR>
</TABLE><BR>
<TABLE BORDER ALIGN="left">
<TR>
<TH>ALIGN="Left"</TH>
<TD>Kotak #A Kiri</TD>
<TD>Kotak #B Kiri</TD>
</TR>
</TABLE>
</body></html>
<TABLE BORDER ALIGN="center">
<TR>
<TH>ALIGN="center"</TH>
<TD>Kotak #A Tengah</TD>
<TD>Kotak #B Tengah</TD>
</TR>
</TABLE><BR>
<TABLE BORDER ALIGN="right">
<TR>
<TH>ALIGN="right"</TH>
<TD>Kotak #A Kanan</TD>
<TD>Kotak #B Kanan</TD>
</TR>
</TABLE><BR>
<TABLE BORDER ALIGN="left">
<TR>
<TH>ALIGN="Left"</TH>
<TD>Kotak #A Kiri</TD>
<TD>Kotak #B Kiri</TD>
</TR>
</TABLE>
</body></html>
Bagian untuk Mengatur Isi Sel
Teks yang terdapat pada sel dapat diatur (ALIGN) dengan: Rata kiri, rata
tengah, dan rata kanan
Atribut yang digunakan adalah :
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>
<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 bermanfaat yaa :)
Tidak ada komentar:
Posting Komentar