Belajar Membuat Tabel Pada HTML
12/30/2018
0 Komentar
Tabel adalah sarana untuk menempatkan informasi agar mudah dibaca dan dipahami. Dalam membuat suatu tabel, anda juga dapat mengatur tabel dan juga masing-masing kolomnya dengan menggunakan atribut seperti Width, Border, dan lain-lain.
Sebelumnya dalam membuat tabel pada HTML, ada beberapa tag-tag yang paling penting diingat yaitu :
- Tag <table> ... </table> untuk membukus tabel.
- Tag <tr> ... </tr> untuk membuat baris baru.
- Tag <td> ... </td> untuk membuat kolom baru.
<html>
<head>
<title>Contoh Tabel</title>
</head>
<body>
<table>
<tr>
<td>sel 1,1</td>
<td>sel 1,2</td>
<td>sel 1,3</td>
</tr>
<tr>
<td>sel 2,1</td>
<td>sel 2,2</td>
<td>sel 2,3</td>
</tr>
<tr>
<td>sel 3,1</td>
<td>sel 3,2</td>
<td>sel 3,3</td>
</tr>
</table>
</body>
</html>Hasilnya :
| sel 1,1 | sel 1,2 | sel 1,3 |
| sel 2,1 | sel 2,2 | sel 2,3 |
| sel 3,1 | sel 3,2 | sel 3,3 |
Anda juga bisa memberi atribut-atribut yang menyertai pada tabel seperti.
- Atribut Border, untuk mengatur ketebalan baris pembatas antar sel-sel dalam tabel. (Atribut ini hanya bisa diberikan kepada tag <table>)
- Atribut Width, untuk mengatur lebar tabel. Contoh :
- Atribut Height, untuk mengatur tinggi tabel. Contoh :
- Atribut Cellspacing, untuk menyatakan jarak antar sel satu dengan yang lainnya. (Atribut ini hanya bisa diberikan kepada tag <table>)
- Atribut Cellpadding, untuk menyatakan jarak antar isi sel dengan batas dari sel tersebut. (Atribut ini hanya bisa diberikan kepada tag <table>)
- Atribut Rowspan, untuk menggabungkan beberapa buah baris menjadi satu. (Atribut ini hanya bisa diberikan kepada tag <td>)
- Atribut Colspan, untuk menggabungkan beberapa kolom menjadi satu. (Atribut ini hanya bisa diberikan kepada tag <td>)
- Atribut Bgcolor, untuk memberikan warna pada tabel. Contoh :
Contoh :
<html>
<head>
<title>Memberi Border</title>
</head>
<body>
<table border="1">
<tr>
<td>sel 1,1</td>
<td>sel 1,2</td>
<td>sel 1,3</td>
</tr>
<tr>
<td>sel 2,1</td>
<td>sel 2,2</td>
<td>sel 2,3</td>
</tr>
<tr>
<td>sel 3,1</td>
<td>sel 3,2</td>
<td>sel 3,3</td>
</tr>
</table>
</body>
</html>Hasilnya :
<html>
<head>
<title>Mengatur Lebar Tabel</title>
</head>
<body>
<table border="1" width="60%">
<tr>
<td>sel 1,1</td>
<td width="50">sel 1,2</td>
<td>sel 1,3</td>
</tr>
<tr>
<td>sel 2,1</td>
<td>sel 2,2</td>
<td>sel 2,3</td>
</tr>
<tr>
<td>sel 3,1</td>
<td>sel 3,2</td>
<td>sel 3,3</td>
</tr>
</table>
</body>
</html>Hasilnya :
<html>
<head>
<title>Mengatur Tinggi Tabel</title>
</head>
<body>
<table border="1" height="60%">
<tr>
<td>sel 1,1</td>
<td>sel 1,2</td>
<td>sel 1,3</td>
</tr>
<tr>
<td>sel 2,1</td>
<td>sel 2,2</td>
<td>sel 2,3</td>
</tr>
<tr>
<td>sel 3,1</td>
<td>sel 3,2</td>
<td>sel 3,3</td>
</tr>
</table>
</body>
</html>Hasilnya :
Contoh :
<html>
<head>
<title>Cellspacing</title>
</head>
<body>
<table border="1" cellspacing="20">
<tr>
<td>sel 1,1</td>
<td>sel 1,2</td>
<td>sel 1,3</td>
</tr>
<tr>
<td>sel 2,1</td>
<td>sel 2,2</td>
<td>sel 2,3</td>
</tr>
<tr>
<td>sel 3,1</td>
<td>sel 3,2</td>
<td>sel 3,3</td>
</tr>
</table>
</body>
</html>Hasilnya :
Contoh :
<html>
<head>
<title>Cellpadding</title>
</head>
<body>
<table border="1" cellpadding="20">
<tr>
<td>sel 1,1</td>
<td>sel 1,2</td>
<td>sel 1,3</td>
</tr>
<tr>
<td>sel 2,1</td>
<td>sel 2,2</td>
<td>sel 2,3</td>
</tr>
<tr>
<td>sel 3,1</td>
<td>sel 3,2</td>
<td>sel 3,3</td>
</tr>
</table>
</body>
</html>Hasilnya :
Contoh :
<html>
<head>
<title>Rowspan</title>
</head>
<body>
<table border="1">
<tr>
<td>sel 1,1</td>
<td>sel 1,2</td>
<td rowspan="2">sel 1,3</td>
</tr>
<tr>
<td>sel 2,1</td>
<td rowspan="2">sel 2,2</td>
</tr>
<tr>
<td>sel 3,1</td>
<td>sel 3,2</td>
</tr>
</table>
</body>
</html>Hasilnya :
Contoh :
<html>
<head>
<title>Colspan</title>
</head>
<body>
<table border="1">
<tr>
<td>sel 1,1</td>
<td colspan="2">sel 1,2</td>
</tr>
<tr>
<td>sel 2,1</td>
<td>sel 2,2</td>
<td>sel 2,3</td>
</tr>
<tr>
<td colspan="3">sel 3,1</td>
</tr>
</table>
</body>
</html>Hasilnya :
<html>
<head>
<title>Bgcolor</title>
</head>
<body>
<table border="1" width="60%" bgcolor="blue">
<tr bgcolor="green">
<td>sel 1,1</td>
<td>sel 1,2</td>
<td>sel 1,3</td>
</tr>
<tr>
<td>sel 2,1</td>
<td bgcolor="red">sel 2,2</td>
<td>sel 2,3</td>
</tr>
<tr>
<td>sel 3,1</td>
<td>sel 3,2</td>
<td>sel 3,3</td>
</tr>
</table>
</body>
</html>Hasilnya :
Semoga yang saya berikan ini bisa bermanfaat bagi anda yang belum paham.
Saran saya, belajarlah atau sering-seringlah latihan, karena koding HTML sulit dipahami untuk pemula.
Demikian artikel ini saya buat.
Terima Kasih!
0 Komentar
- Kalau ada kesalahan lapor admin biar secepatnya diperbaiki.
- Jika berkenan silahkan berikan komentar anda mengenai artikel diatas.
- Gunakan kosa kata yang mudah dipahami.
- Usahakan Tidak berkomentar sebagai "Anonymous".
- Untuk menyisipkan kode, gunakan tag [pre] KODE ANDA [/pre].
Emoticon