Rabu, 04 Desember 2013

Membuat Tabel dengan HTML

Unknown
Tabel digunakan untuk menampilkan data dalam betuk baris dan kolom. Adapun Elemen-Elemen yang digunakan untuk membuat Tabel yaitu:



dan untuk Atribut Tabel Tag :

Mengatur Border
Border adalah garis yang mengelilingi sebuah tabel.
Contoh:
<html>
<head><title>Muslihpedia</title></head>
<body>
<BODY><CENTER>
<P>Cara 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>


Tampilan Setelah Dijalankan :


Menggabungkan  Kolom
Contoh :
<html>
<head><title>Muslihpedia</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>

Tampilan Setelah Dijalan :


Menggabungkan Baris
Contoh
<html>
<head><title>Muslihpedia</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>



Tampilan Setelah Dijalankan :


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>

Tampilan Setelah Dijalankan :



Unknown / Author & Editor

Has laoreet percipitur ad. Vide interesset in mei, no his legimus verterem. Et nostrum imperdiet appellantur usu, mnesarchum referrentur id vim.

0 komentar:

Posting Komentar

Coprights @ 2016, Blogger Template Designed By Templateism | Distributed By Blogger Template