CARA MEMBUAT TABEL PADA HTML
Kode
– kode untuk membuat tabel pada html :
<table>..</table> : digunakan sebagai tanda awal table.
<tr>..</tr> : digunakan sebagai tanda
awal baris, tr kependekan dari tabel row.
<th>..</th> : digunakan untuk membuat tampilan
kolom header tabel, th kependekan dari table head.
<td>..</td> : digunakan untuk menyusun
kolom data, td kependekan dari tabel data.
Setiap elemen kode HTML tersebut harus
tersusun dan tertata dengan benar. Perhatikan tanda slash (/) garis miring di
setiap akhir elemen, itu merupakan kode penutup untuk kode pembuka di semua
jenis kode HTML.
Atribut
Pendukung Table :
Align :
Untuk mengatur posisi horizontal.
Valigh :
Untuk mengatur posisi vertikal.
Width :
Untuk mengatur lebar.
Height :
Untuk mengatur tinggi.
Border :
Untuk mengatur tebal baris.
Border-color :
Untuk memberi tebal garis dengan warna.
Cellpadding :
Untuk mengatur jarak garis dengan objek di dalamnya.
Cellspacing :
Untuk mengatur jarak tiap cell.
Bgcolor :
Untuk mengatur warna.
Background :
Untuk mengatur latar gambar.
Rowspan :
Jumlah baris yang memotong beberapa garis.
Colspan :
Jumlah kolom yang memotong beberapa kolom.
Contoh Script
Mengatur
Border
Border adalah garis yang mengelilingi 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>
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>
