Yap kali ini seripu akan menjelaskan cara membuat tabel di html, nah dalam membuat table di perlukan beberapa tag, yang pertama sebagai induk berupa <TABLE> dan diikuti dengan anak anaknya <TR> dan <TD> beriku penjelasannya :
TR digunakan untuk membuat baris dari suatu tabel.
Dan yang terakhir TD digunakan untuk membuat kolom dari suatu baris.
Dari kode di atas akan menghasilkan seperti berikut :
Maka browser akan menampilkan :
Maka browser akan menampilkan :
Maka browser akan menampilkan :
Cellspacing berfungsi untuk mengatur jarak antar border,
Maka browser akan menampilkan :
Maka browser akan menampilkan :
Maka browser akan menampilkan :
Contoh penulisan table dengan syntax html
<html>
<head>
<title>Membuat tabel</title>
</head>
<body>
<table border="1">
<tr>
<td>bari 1 colom 1</td>
</tr>
<tr>
<td> baris 2 kolom 1</td>
</tr>
</table>
</body>
</html>
TABLE digunakan untuk menandai sebuah tabel, nah untuk border tersebut digunakan untuk membuat ketebalan pada garis pinggir sebuah tabel, jika border tersebut di beri nilai "0" maka garis pinggir tabel tidak akan terlihat.<head>
<title>Membuat tabel</title>
</head>
<body>
<table border="1">
<tr>
<td>bari 1 colom 1</td>
</tr>
<tr>
<td> baris 2 kolom 1</td>
</tr>
</table>
</body>
</html>
TR digunakan untuk membuat baris dari suatu tabel.
Dan yang terakhir TD digunakan untuk membuat kolom dari suatu baris.
Dari kode di atas akan menghasilkan seperti berikut :
Cara membuat 2 baris 3 kolom
<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>
</table>
script di atas tinggal di masukkan ke dalam tag body<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>
</table>
Maka browser akan menampilkan :
Cara membuat 2 kolom 4 baris
<table border="1">
<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>
<tr>
<td>baris 3 kolom 1</td>
<td>baris 3 kolom 2</td>
</tr>
<tr>
<td>baris 4 kolom 1</td>
<td>baris 4 kolom 2</td>
</tr>
</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>
<tr>
<td>baris 3 kolom 1</td>
<td>baris 3 kolom 2</td>
</tr>
<tr>
<td>baris 4 kolom 1</td>
<td>baris 4 kolom 2</td>
</tr>
</table>
Maka browser akan menampilkan :
Mengatur lebar dan tinggi kolom:
<table border="1">
<tr height="150px">
<td width="100px">baris 2 kolom 1</td>
<td width="200px">baris 2 kolom 2</td>
</tr>
<tr height="100">
<td width="100px">baris 3 kolom 1</td>
<td width="200px">baris 3 kolom 2</td>
</tr>
</table>
<tr height="150px">
<td width="100px">baris 2 kolom 1</td>
<td width="200px">baris 2 kolom 2</td>
</tr>
<tr height="100">
<td width="100px">baris 3 kolom 1</td>
<td width="200px">baris 3 kolom 2</td>
</tr>
</table>
Maka browser akan menampilkan :
Cellspacing dan Cellpadding dalam tabel
<table border="7" cellpadding="10" cellspacing="10">
<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>
Cellpadding berfungsi untuk mengatur jarak dari isi suatu kolom dengan border,<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>
Cellspacing berfungsi untuk mengatur jarak antar border,
Maka browser akan menampilkan :
Menggabungkan 2 kolom dengan colspan
<table border="1" cellpadding="10">
<tr>
<td colspan="2">baris 1 dengan menggabungkan 2 kolom</td>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
</table>
<tr>
<td colspan="2">baris 1 dengan menggabungkan 2 kolom</td>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
</table>
Maka browser akan menampilkan :
Menggabungkan 2 baris dengan rowspan
<table border="1" cellpadding="10">
<tr>
<td rowspan="2">baris 1 dan 2 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td>baris 2 kolom 2</td>
</tr>
</table>
<tr>
<td rowspan="2">baris 1 dan 2 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td>baris 2 kolom 2</td>
</tr>
</table>
Maka browser akan menampilkan :
Ok sekian tutorial
Cara Membuat Tabel di HTML
jika ada yang ditanyakan silahkan berkomentar!!
2 komentar
Click here for komentarTabel yang dibuat masih merupakan sebuah tabel yang hanya menyimpan data. Data yang disimpan dan ditampilkan sendiri tidak memiliki strukutur. Bagaimana caranya jika tabel yang ingin dibuat harus bersifat dinamis?
ReplyTerima Kasih
Kunjungi web kampus saya : Atma Luhur
Kunjungi web saya : Rismawati
terimakasih gan atas artikel yang admin buat. artikelnya sangat membantu saya dalam belajar bagaimana cara membuat tabel di html. penyajian materinya menarik, rapi, dan sangat mudah dipahami. semangat dalam berkarya dan terus menciptakan karya-karya yang bermanfaat untuk yang lainnya. perkenalkan nama saya Lois Pratama, website kampus saya https://www.atmaluhur.ac.id/
ReplyConversionConversion EmoticonEmoticon