Beranda » html » Belajar HTML #part4 Table

Belajar HTML #part4 Table

1. Struktur tabel

Untuk membuat table di html kita menggunakan tag / elemen table
Dan untuk membuat baris kita menggunakan <tr>
untuk membuat kolom di tiap baris menggunaka <td>
 kalau membuat table tanpa praktek memang agag sulit di mengerti, jadi langsung praktek saja


<html>
<head><title>belajar table</title>
</head>
<body>
  <table width="50%" border="2">
     <tr> <td>kolom 1 baris 1</td> <td>kolom 2 baris 1</td> </tr> <!-- baris 1 -->
     <tr> <td>kolom 1 baris 2</td> <td>kolom 2 baris 2</td> </tr> <!-- baris 2 -->
  </table>
</body>
</html>

nah kurang lebih hasilnya seperti ini

kolom 1 baris 1 kolom 2 baris 1
kolom 1 baris 2 kolom 2 baris 2

sepertinya cukup jelas ya dengan struktur table.

2. Header

Di table juga ada pembuatan header table juga loh. nah fungsinya untuk memberi judul pada tiap tiap kolom. penggunaannya sama seperti <td>, cuman ini menggantikan <td> yang ada di baris pertama saja. seperti ini

<html>
<head><title>belajar table</title>
</head>
<body>
  <table width="50%" border="2">
     <tr> <th>kolom 1 baris 1</th> <th>kolom 2 baris 1</th> </tr> <!-- baris 1 -->
     <tr> <td>kolom 1 baris 2</td> <td>kolom 2 baris 2</td> </tr> <!-- baris 2 -->
  </table>
</body>
</html>

kolom 1 baris 1 kolom 2 baris 1
kolom 1 baris 2 kolom 2 baris 2


Nah sekarang jadi lebih nampak tablenya bukan ?

3. Colspan

Colspan ini fungsinya untuk menggabungkan kolom. setelah kolom 1 di deklarasikan colspan = 2 maka akan ada 2 kolom yang menjadi 1, disamping itu <td> untuk kolom ke dua harus di hapus
kita ambil dari contoh diatas saja ya.

<html>
<head><title>belajar table</title>
</head>
<body>
  <table width="50%" border="2">
     <tr> <th>kolom 1 baris 1</th> <th>kolom 2 baris 1</th> </tr> <!-- baris 1 -->
     <tr> <td colspan="2">kolom 1 baris 2</td> </tr> <!-- baris 2 -->
  </table>
</body>
</html>

kolom 1 baris 1kolom 2 baris 1
kolom 1 baris 2


Itu untuk colspan

4. Rowspan

Nah sekarang Rowspan, hampir sama dengan colspan yaitu untuk menggabungkan, tapi ini menggabungkan baris, peletakannya sama yaitu di dalam elemen td. jika elemen td diberi atribut rowspan berarti elemen td di bawahnya harus di hapus. contoh


<html>
<head><title>belajar table</title>
</head>
<body>
  <table width="50%" border="2">
     <tr> <th>kolom 1 baris 1</th> <th rowspan="2">kolom 2 baris 1</th> </tr> <!-- baris 1 -->
     <tr> <td colspan="2">kolom 1 baris 2</td> </tr> <!-- baris 2 -->
  </table>
</body>
</html>

Kurang lebih akan jadi seperti ini
kolom 1 baris 1 kolom 2 baris 1
kolom 1 baris 2

tuh udah gambung 2 baris jadi 1

5. Contoh table expert


<html><head>
<title>style</title>
<style id="__web-inspector-hide-shortcut-style__" type="text/css">
.__web-inspector-hide-shortcut__, .__web-inspector-hide-shortcut__ *, .__web-inspector-hidebefore-shortcut__::before, .__web-inspector-hideafter-shortcut__::after
{
    visibility: hidden !important;
}
</style></head>
<body>
<table width="100%">
<tbody><tr height="150px">
<td width="30%" bgcolor="#4f77d8">a</td>
<td width="30%" bgcolor="#704396">a</td>
<td width="30%">
    <table width="100%" height="150px">
        <tbody><tr><td bgcolor="blue" width="50%">a</td> <td>
            <table width="100%" height="100%"><tbody><tr><td bgcolor="red">a</td><td bgcolor="orange">a</td></tr>
                <tr><td bgcolor="green">a</td><td bgcolor="purple">a</td></tr>
            </tbody></table>
            </td></tr>
    </tbody></table>
    </td> 
</tr>

<tr height="150px"> <td width="30%" height="150px"><table width="100%" height="100%"><tbody><tr><td width="50%" bgcolor="purple">b</td><td width="50%" bgcolor="yellow">b</td></tr></tbody></table></td>
    
<td width="30%" rowspan="2" bgcolor="blue">b</td>
<td width="30%" height="150px"><table width="100%" height="100%"><tbody><tr><td width="50%" bgcolor="orange">b</td><td width="50%" bgcolor="blue">b</td></tr></tbody></table></td> </tr>

<tr height="150px">
<td width="30%">
    <table width="100%" height="150px">
        <tbody><tr><td bgcolor="blue" width="50%">a</td> <td>
            <table width="100%" height="100%"><tbody><tr><td bgcolor="red">a</td><td bgcolor="orange">a</td></tr>
                <tr><td bgcolor="green">a</td><td bgcolor="purple">a</td></tr>
            </tbody></table>
            </td></tr>
    </tbody></table>
    </td><td width="30%" bgcolor="blue">a</td>

 
</tr>

</tbody></table>

</body></html>

Silahkan jika ingin mencoba di run
Previous

21.24 - tanpa komentar

0 komentar untuk Belajar HTML #part4 Table.

Emoticon Emoticon

Perlihatkan Semua Komentar Tutup Semua Komentar