Rabu, 22 Januari 2014

CARA MEMBUAT TABEL DI HTML

CARA MEMBUAT TABEL DI HTML
Tabel digunakan untuk menyajikan data dalam betuk baris dan kolom. Anda Juga Dapat Membaca Cara Membuat Kolom Atau Frame Di HTML. Adapun Elemen-Elemen yang digunakan untuk membuat Tabel adalah:
Atribut Tabel tag <TD>

Mengatur Border
Border adalah garis yang mengelilingi sebuah tabel.
Contoh:

<html>
<head><title>Sampul Ilmu</title></head>
<body>
<BODY><CENTER>
<P>Menggunakan tag <b>&lt;
TABLE BORDER="1"&gt;</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>


 terima kasih telah membaca artikel saya, selamat mencoba, semoga bermanfaat....

Tidak ada komentar:

Posting Komentar

Berkomentarlah Dengan Tutur Kata Yang Sopan Agar Nyaman. Komentar Yang Mengandung Unsur SARA, Kasar, Tidak Sopan Dan Mengejek Orang Lain Akan Saya Hapus