Saat membuat suatu artikel pada halaman website kadang kala kita ingin membuat suatu isi dengan menggunakan tabel agar dapat mengelompokan isi tersebut sesuai dengan jenis nya, salah satu contoh halaman HTML yang saya buat dengan adanya tabel adalah pada halaman statis saya yaitu Kamus HTML.
HTML telah menyediakan tag-tag yang dapat Anda gunakan untuk membuat tabel pada suatu halaman HTML, kita dapat menggunakan tag <table> dan di akhiri denga </table> untuk membuat tabel pada halaman HTML.
Setelah itu di dalam tag <table></table> kita harus memberikan tag lagi yaitu tag <tr></tr>. Tag tersebut gunanya untuk memberikan baris pada tabel yang kita buat. Selain itu kita juga membutuhkan tag <td></td> untuk membuat kolom pada tabel yang kita buat. Tag <td></td> akan kita berikan di dalam tag <tr></tr>. untuk memberikan garis pada tabel tersebut maka kita harus berikan atribut 'border' pada tag table.
Belajar Membuat Table
Untuk membuat suatu tabel setidaknya kita memerlukan tiga buah tag yaitu tag <table> <tr> dan <td>.
Penjelasan :
- <table> : digunakan untuk memulai membuat table.
- <tr> : digunakan untuk membuat suatu baris pada tabel atau merupakan singkatan dari table row.
- <td> : digunakan untuk menginputkan data pada tabel atau merupakan singkatan dari table data.
Berikut adalah contoh source code nya :
<!DOCTYPE html>
<html>
<head>
<title>Membuat Tabel</title>
</head>
<body>
<h1>Belajar Menggunakan Tag Tabel</h1>
<table border="1">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td> Baris 2, Kolom 3</td>
</tr>
<tr>
<td> Baris 3, Kolom 1</td>
<td> Baris 3, Kolom 2</td>
<td> Baris 3, Kolom 3</td>
</tr>
<tr>
<td> Baris 4, Kolom 1</td>
<td> Baris 4, Kolom 2</td>
<td> Baris 4, Kolom 3</td>
</tr>
</table>
</body>
</html
Menggabungkan Kolom Pada Table
Pada halaman HTML kita juga dapat menggabungkan kolom pada tabel yang kita buat, caranya adalah dengan menggunakan colspan.
Berikut adalah source code nya :
<!DOCTYPE html>
<html>
<head>
<title>Membuat Table</title>
</head>
<body>
<table border="3">
<tr>
<td colspan="2">Kolom yang kita gabungkan</td>
</tr>
<tr>
<td>Kolom 1, Baris 2</td>
<td>Kolom 2, Baris 2</td>
</tr>
</table>
</body>
</html>
Menggabungkan Baris Pada Table
Salin itu kita juga dapat menggabungkan baris pada table yang kita buat, caranya adalah dengan menggunakan rowspan.
Berikut adalah source code nya :
<!DOCTYPE html>
<html>
<head>
<title>Membuat Table</title>
</head>
<body>
<table border="3">
<tr>
<td rowspan="2">Baris yang akan kita gabungkan</td>
<td>Kolom 2 , Baris 1</td>
</tr>
<tr>
<td >Kolom 2, Baris 2</td>
</tr>
</table>
</body>
</html>
Membuat Table di Dalam Table
Pada kasus yang lebih kompleks biasanya kita juga ingin membuat suatu table di dalam sebuah table, caranya tidak sulit, yang kita butuhkan adalah membuat kerangka table pertama terlebih dahulu.
Berikut adalah contohnya :
<!DOCTYPE html>
<html>
<head>
<title>Membuat Table di Dalam Table</title>
</head>
<body>
Table Hewan
<table width="600px" height="300px" border="2px solid
black">
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
Jika sudah membuat kerangka table pertama maka sekarang yang kita butuhkan adalah membuat kerangka table yang kedua, jika sudah Anda buat kerangka table kedua maka selanjutnya sisipkan kerangka table kedua tersebut kedalam tag <td></td> pada kerangka table pertama yang sudah kita buat.
Berikut adalah contohnya :
<table width="220px" height="270px" border="2px solid">
<tr>
<td> </td>
</tr>
</table>
Selanjutnya kita coba sisipkan sebuah gambar pada table kedua yang telah kita buat, caranya dengan memberikan tag <img> diantara tag <td></td> pada table kedua yang telah dibuat.
Berikut adalah source code nya :
<td><img src="image.jpg" width="220px" height="270px"></td>
Lalu kita akan membuat keterangan gambar pada gambar yang telah kita sisipkan di dalam table kedua, caranya kita harus memberikan tag <td></td> lagi pada table kedua yang kita buat, selanjutnya kita akan membuat kerangka table ketiga untuk membuat keterangan gambar.
Berikut adalah contohnya :
<td><img src="image.jpg" width="215px" height="265px"></td>
<td>
<table width="550px" height="270px" border="1px
solid">
<tr>
<td>. </td>
<td> .</td>
<td> .</td>
</tr>
<tr>
<td>. </td>
<td>. </td>
<td>. </td>
</tr>
<tr>
<td>. </td>
<td>. </td>
<td>. </td>
</tr>
</table>
</td>
Setelah itu kita akan isikan keterangan gambar tersebut pada table ketiga yang sudah kita buat yaitu dengan menuliskan nya diantara tag <td>....</td>.
Berikut adalah contohnya :
<td>
<table width="550px" height="270px" border="2px
solid">
<tr>
<td>Nama Hewan </td>
<td>:</td>
<td>Kuda</td>
</tr>
<tr>
<td>Ciri-ciri</td>
<td>:</td>
<td>Berlari cepat, memiliki 4 kaki, memakan rumput</td>
</tr>
<tr>
<td>Cara bertahan</td>
<td>:</td>
<td>Dengan menendang musuh di depannya menggunakan kedua kaki depan nya</td>
</tr>
</table>
</td>
Agar lebih jelasnya saya akan berikan coding yang sudah jadi.
Berikut adalah source code nya :
<!DOCTYPE html>
<html>
<head>
<title>Membuat Table di Dalam Table</title>
</head>
<body>
Table Hewan
<table width="600px" border="2px solid
black" height="300px">
<tr>
<td>
<table width="220px" height="270px">
<tr>
<td><img src="image.jpg" width="215px"
height="265px"></td>
<td>
<table width="550px" height="270px" border="2px solid''>
<tr>
<td>Nama Hewan</td>
<td>:</td>
<td>Kuda</td>
</tr>
<tr>
<td>Ciri-ciri</td>
<td>:</td>
<td>Berlari cepat, memiliki 4 kaki, memakan rumput</td>
</tr>
<tr>
<td>cara bertahan diri</td>
<td>:</td>
<td>Dengan menendang musuh di depannya menggunakan kedua kaki depan nya</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Kurang lebih tampilannya akan seperti dibawah ini, gambar yang muncul akan menyesuaikan source dari gambar yang Anda gunakan.
Baca Juga :
Pengenalan Dasar Programming Web
Belajar Membuat Halaman HTML Dengan Notepad
Mengenal Lebih Dalam Struktur Body HTML
2 komentar
iya mas itu kodenya ajib ajib:D saya sering pake boostrap
Iya mbak soalnya kalo pake bootsrap bakalan lebih mudah dalam mengatur tampilan hehe
EmoticonEmoticon