Belajar Dasar HTML : Cara membuat tabel menggunakan HTML
Tuesday, April 17, 2018
Add Comment
 |
| Contoh Tabel Siswa |
Tiga tag dasar untuk membuat atable pada html
- Tag <table> tag ini merupakan tag pembuka untuk membuat table
- Tag <tr> adalah kepanjangan dari Table row yang digunakan Untuk membuat baris baru pada table
- Tag <td> atau Table data digunakan Untuk membuat kolom pada sebuah table
Untuk lebih jelasnya tulislah script dibawah ini lalu jalankan pada browser.
<html>
<head>
<title> Latihan Membuat Table </title>
</head>
<body>
<h2> Membuat Tabel Sederhana Menggunakan HTML </h2>
<table border="1">
<tr>
<td> No</td>
<td> Nama</td>
<td> Alamat</td>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2 </td>
<td>baris 2 kolom 3</td>
</tr>
</table>
</body>
</html>
<head>
<title> Latihan Membuat Table </title>
</head>
<body>
<h2> Membuat Tabel Sederhana Menggunakan HTML </h2>
<table border="1">
<tr>
<td> No</td>
<td> Nama</td>
<td> Alamat</td>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2 </td>
<td>baris 2 kolom 3</td>
</tr>
</table>
</body>
</html>
Hasilnya seperti dibawah ini
 |
| Contoh tabel sederhana pada html |
Dari gambar diatas terlihat ada 1 tabel dengan 2 baris 3 kolom dan saya tambahkan atribut border=”1” untuk membuat garis tepi pada tabel dengan ukuran 1 pixel, kalian bisa mengganti nilai atribut border sesuai kebutuhan.
Atribut colspan, rowspan, cellspacing dan cellpadding pada table
- Atribut colspan digunakan untuk menggabungkan antara kolom dan baris (merge-cell) secara Horizontal
- Atribut rowspan digunakan untuk menggabungkan antara kolom dan baris (merge-cell) secara Vertikal
- Atribut cellspacing digunakan untuk membuat jarak antar cell ( kolom )
- Atribut cellpadding digunakan untuk membuat jarak objek yang ada pada cell (kolom ) dengan garis pada kolom tersubut.
Untuk lebih jelasnya mari kita lihat contoh dibawah ini :
<html>
<head>
<title> Latihan Membuat Table </title>
</head>
<body>
<h2> contoh tabel dengan rowspan </h2>
<table border="1">
<tr>
<td rowspan="2"> contoh rowspan</td>
<td> baris 1, kolom 2</td>
</tr>
<tr>
<td>baris 2 kolom 2 </td>
</tr>
</table>
<h2> contoh tabel dengan colspan</h2>
<table border="1">
<tr>
<td colspan="2"> contoh colspan</td>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
</table>
<br/>
<h2>Tabel dengan border 1 cellspacing 15</h2>
<table border="1" cellspacing="15">
<tr>
<td>Nama</td>
<td>Alamat</td>
</tr>
<tr>
<td>Rijal</td>
<td>Situbondo</td>
</tr>
</table>
<h2>Tabel dengan border 1 cellpadding 15</h2>
<table border="1" cellpadding="15">
<tr>
<td>Nama</td>
<td>Alamat</td>
</tr>
<tr>
<td>Rijal</td>
<td>Situbondo</td>
</tr>
</table>
</body>
</html>
<head>
<title> Latihan Membuat Table </title>
</head>
<body>
<h2> contoh tabel dengan rowspan </h2>
<table border="1">
<tr>
<td rowspan="2"> contoh rowspan</td>
<td> baris 1, kolom 2</td>
</tr>
<tr>
<td>baris 2 kolom 2 </td>
</tr>
</table>
<h2> contoh tabel dengan colspan</h2>
<table border="1">
<tr>
<td colspan="2"> contoh colspan</td>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
</table>
<br/>
<h2>Tabel dengan border 1 cellspacing 15</h2>
<table border="1" cellspacing="15">
<tr>
<td>Nama</td>
<td>Alamat</td>
</tr>
<tr>
<td>Rijal</td>
<td>Situbondo</td>
</tr>
</table>
<h2>Tabel dengan border 1 cellpadding 15</h2>
<table border="1" cellpadding="15">
<tr>
<td>Nama</td>
<td>Alamat</td>
</tr>
<tr>
<td>Rijal</td>
<td>Situbondo</td>
</tr>
</table>
</body>
</html>
Hasilnya seperti gamba dibawah ini :
 |
| Tabel menggunakan atribut rowspan, colspan, cellspacing dan cellpadding |
Mengunakan atribut< th> pada html
Atribut < th> sebenarnya hampir sama dengan atribut < td> perbedaannya terletak pada cara penggunaannya, atribut < th> biasanya digunakan untuk header table pada baris pertama sebagai keterangan data dari masing – masing kolom dan text yang ditampilkan berupa huruf tebal dan rata tengah.
Berikut contoh penggunaanya :
<html>
<head>
<title>Latihan Membuat Table</title>
</head>
<body>
<h2>Contoh Penggunaan tag th </h2>
<table border="1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
<th>Agama</th>
</tr>
<tr>
<td>1</td>
<td>Imam hanafi</td>
<td>Situbondo</td>
<td>Islam</td>
</tr>
<tr>
<td>2</td>
<td>Ahmad Asmito</td>
<td>Situbondo</td>
<td>Islam</td>
</tr>
<tr>
<td>3</td>
<td>Nur Mahmudah</td>
<td>Situbondo</td>
<td>Islam</td>
</tr>
</table>
</body>
</html>
<head>
<title>Latihan Membuat Table</title>
</head>
<body>
<h2>Contoh Penggunaan tag th </h2>
<table border="1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
<th>Agama</th>
</tr>
<tr>
<td>1</td>
<td>Imam hanafi</td>
<td>Situbondo</td>
<td>Islam</td>
</tr>
<tr>
<td>2</td>
<td>Ahmad Asmito</td>
<td>Situbondo</td>
<td>Islam</td>
</tr>
<tr>
<td>3</td>
<td>Nur Mahmudah</td>
<td>Situbondo</td>
<td>Islam</td>
</tr>
</table>
</body>
</html>
Dan hasilnya seperti gambar dibawah ini :
 | ||
| Penggunan tag <th>pada HTML |
0 Response to "Belajar Dasar HTML : Cara membuat tabel menggunakan HTML"
Post a Comment