Memberi Tabel Dengan Html
Tabel sanggup 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 sanggup digabungkan untuk menciptakan tampilan yang sesuai dengan kebutuhan
Perintah (tag) menciptakan tabel :
<table>, <tr>, dan <td>.
<tr> = menciptakan suatu baris baru.
<td> = menciptakan kolom/data.
Untuk mempermudah mengingatnya, lihat aksara belakangnya, tr --> r = row, td --> d = data.
Membuat Tabel
Perintah (tag) untuk menciptakan 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, menciptakan tabel berukuran 2 X 2, ialah 2 kolom dan 2 baris.
Tabel pada HTML menurut baris (row). Misal memasukkan data di baris pertama kolom pertama, yang dilakukan pertama menciptakan baris kemudian menciptakan kolom, kemudian memasukkan data. Jika memasukkan data pada kolom kedua baris pertama maka harus menciptakan sebuah baris, kemudian buat kolom pertama, kemudian buat kolom kedua, kemudian 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 menyerupai ini:
Menggabungkan Sel
Dalam HTML, penggabungan sel menurut 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 dipakai 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 dipakai 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 sanggup diatur semoga menarik, dengan atribut menyerupai warna pada sel, border, align, cellpadding.
Memberi Warna Pada Sel
Atribut yang dipakai 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 dipakai border=”#”, letaknya pada tag <table>.
<table border=”#”>
# berisi angka (termasuk 0), menawarkan 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, ialah rata kiri, tengah, kanan. Atribut yang dipakai 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), menawarkan 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
Sumber http://herlambank.blogspot.com
0 Response to "Memberi Tabel Dengan Html"
Posting Komentar