Tabel dapat membagi halaman web menjadi beberapa kolom dan baris, sehingga memudahkan untuk mengatur peletakan teks maupun gambar dalam sebuah homepage. Tabel terdiri dari kolom dan baris. Data-data dimasukkan dalam kombinasi antara kolom dan baris. Beberapa baris dan kolom dapat digabungkan untuk membuat tampilan yang sesuai dengan kebutuhan
Perintah (tag) membuat tabel :
<table>, <tr>, dan <td>.
<tr> = membuat suatu baris baru.
<td> = membuat kolom/data.
Untuk mempermudah mengingatnya, lihat huruf belakangnya, tr --> r = row, td --> d = data.
Membuat Tabel
Perintah (tag) untuk membuat tabel :
<table>
<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>
Perintah diatas, membuat tabel berukuran 2 X 2, yaitu 2 kolom dan 2 baris.
Tabel pada HTML berdasarkan baris (row). Misal memasukkan data di baris pertama kolom pertama, yang dilakukan pertama membuat baris kemudian membuat kolom, lalu memasukkan data. Jika memasukkan data pada kolom kedua baris pertama maka harus membuat sebuah baris, lalu buat kolom pertama, kemudian buat kolom kedua, lalu isi datanya.
Mengatur Lebar Table
Perintahnya width=”” ,(pixel(px)/procent(%). Misal tabel ukuran 450px, perintahnya <table width=”450?>.
Perintah (tag) HTML nya:
<html>
<head>
<title>Belajar HTML Table</title>
</head>
<body>
<table border=”2? width=”450?>
<tr>
<td>Kolom 1</td>
<td>Kolom 2</td>
<td>Kolom 3</td>
</tr>
</table>
</body>
</html>
Sekarang tabelnya tampak seperti ini:
Menggabungkan Sel
Dalam HTML, penggabungan sel berdasarkan kolom dan baris.
Menggabungkan kolom (col) pada tabel.
Membuat tabel dengan 2 kolom yang digabungkan (baris pertama, kolom pertama dan kedua digabung).
1
2 3
4 5
Atribut dari <td> yang digunakan colspan.
Contoh penggunaannya.
<table>
<tr>
<td colspan="2">kolom yang digabungkan</td></tr>
<tr>
<td>baris 2, kolom 1</td>
<td>baris 2, kolom 2</td>
</tr>
<tr>
<td>baris 3, kolom 1</td>
<td>baris 3, kolom 2</td>
</tr>
</table>
Perintah <td colspan="2"> memerintahkan beberapa kolom digabung, (sesuai nilainya). Contoh diatas nilainya "2", sehingga 2 kolom digabung menjadi satu.
Menggabungkan baris (row) pada table.
Kolom 2 dan 4 digabung sehingga kolom 4 nya hilang.
1
2 3
5
atribut dari <td> yang digunakan rowspan.
Contoh penggunaannya :
<table>
<tr>
<td rowspan="2">Baris yang digabungkan</td>
</tr>
<tr>
<td rowspan="2">baris 2, kolom 1</td>
<td>baris 2, kolom 2</td>
</tr>
<tr>
<td>baris 3, kolom 2</td>
</tr>
</table>
Mengatur Tabel
Tabel dapat diatur agar menarik, dengan atribut seperti warna pada sel, border, align, cellpadding.
Memberi Warna Pada Sel
Atribut yang digunakan bgcolor=”#” yang ditaruh pada tag yang akan diberi warna.
<td bgcolor=”Red”> atau <td bgcolor=”#FF0000?>
Perintah (tag) HTML nya :
<html>
<head>
<title>Warna Pada Sel</title>
</head>
<body>
<table border=”2”width=”450”>
<tr>
<td colspan=”3”bgcolor=”#FF9900”>kolom1+2+3
</td>
</tr>
<tr>
<td rowspan=”2”>Kolom 1A<br />+kolom 1B</td>
<td>Kolom 2A</td>
<td>Kolom 3A<br />+Kolom 3B</td>
</tr>
<tr>
<td>Kolom 2B</td>
</tr>
<tr>
<td>Kolom 1C</td>
<td>Kolom 2C</td>
<td>Kolom 3C</td>
</tr>
</table>
</body>
</html>
Hasil tabel yang ditampilkan :
Warna Pada Sel
Border
Batas antara kolom demi kolom disebut border. Atribut yang digunakan border=”#”, letaknya pada tag <table>.
<table border=”#”>
# berisi angka (termasuk 0), menunjukkan lebar border.
Perintah (tag) HTML nya:
<html>
<head>
<title>Border</title>
</head>
<body>
<table border=”2?>
<tr>
<td>Kolom 1</td>
<td>Kolom 2</td>
<td>Kolom 3</td>
</tr>
</table>
</body>
</html>
Hasil tabel yang ditampilkan :
Border
Kolom 1 Kolom 2 Kolom 3
Align
Perataan teks dalam tabel, yaitu rata kiri, tengah, kanan. Atribut yang digunakan align=”#” ditambahkan pada tag <table>.
<table align=”#”> Tanda # = left, center, right.
Perintah (tag) HTML nya :
<html>
<head>
<title>Align Pada Tabel</title>
</head>
<body>
<table align=”center” border=”2?>
<tr>
<td>Tengah 1</td>
<td>Tengah 2</td>
<td>Tengah 3</td>
</tr>
</table>
</body>
</html>
Hasil tabel yang ditampilkan :
Align Pada Tabel
Tengah 1 Tengah 2 Tengah 3
Cellpadding
Menentukan jarak antara isi cell dengan batas cell (pixel). Atribut cellpadding=”#” ,pada tag <table>.
<table cellpadding=”#”>
# berupa angka (termasuk 0), menunjukkan jarak.
Perintah (tag) HTML nya :
<html>
<head>
<title>Cellpadding Pada Tabel</title>
</head>
<body>
<table cellpadding=”5” align=”center” border=”2?>
<tr>
<td>Jarak 1</td>
<td>Jarak 2</td>
<td>Jarak 3</td>
</tr>
</table>
</body>
</html>
Hasil tabel yang ditampilkan :
Cellpadding Pada Tabel
Jarak 1 Jarak 2 Jarak 3
Menghafal Code HTML Ribeeeeeeeettttttt.............
ReplyDeletePakai saja Microsoft Office Front Page 2003, Microsoft Office 2000(ada front page nya) atau HTML editor lainnya