Cara Membuat Tabel, Colspan, dan Rowspan
Cara Membuat TABEL , COLSPAN, dan ROWSPAN di HTML
oleh : Radarbolang
Fungsi Tabel dalam HTML:
Fungsi tabel dalam HTML yaitu digunakan untuk menyajikan data dalam bentuk kolom dan baris.
Tujuannya
agar informasi dapat ditampilkan secara terstruktur, ringkas, dan mudah dibaca.dibawah ini merupakan contoh tabel dasar :
Membuat Tabel Sederhana
Sekarang kita coba buat tabel sederhana dulu ya gan.
Alon-alon :D
Berikut adalah format dasar dari sebuah tabel:
Tag yang diperlukan adalah
<tr>(tabel row) untuk membuat garis
<td>(tabel data) untuk membuat kolom
<html>
<head>
<title> Membuat tabel sederhana</title>
</head>
<body >
<table border=1>
<tr>
<td>Baris1
kolom1</td>
<td>Baris1
kolom2</td>
</tr>
<tr>
<td>Baris2
kolom1</td>
<td>Baris2
kolom2</td>
</tr>
</table>
</body>
</html>
NEXT...
COLSPAN dan ROWSPAN
Apa itu Colspan dan Rowspan?
Colspan dan Rowspan berfungsi untuk menggabungkan beberapa
baris atau kolom pada sebuah tabel.
Untuk mudahnya dalam aplikasi lain, seperti: microsoft word
dan microsoft excel disebut MERGE.
Coba Contoh Berikut!
<html>
<head>
<title>tabel colspan rowspan</title>
</head>
<body>
<table
border="1" bgcolor="white" align="center">
<caption align="top">
<b> Tabel Daftar Nilai Mahasiswa
</b> </caption>
<tr bgcolor="gray"><th rowspan="2">No</th>
<th rowspan="2">NPM</th>
<th rowspan="2">Nama</th> <th colspan="2">Nilai</th>
</tr>
<tr
bgcolor="gray"><th>UTS</th> <th>UAS</th>
</tr>
<tr><td align="center"
width="20">1.</td>
<td align="left"
valign="middle" width="80"
height="40">06.100.001</td>
<td align="left"
valign="middle" width="180" height="40">Amin
A. Angkasa</td>
<td align="center"
valign="middle">70</td> <td align="center"
valign="middle">80</td>
</tr>
<tr><td
width="20">2.</td>
<td align="left"
valign="middle" width="80"
height="40">06.100.002</td>
<td align="left"
valign="middle" width="180" height="40">Beni B.Bernadi</td>
<td align="center"
valign="middle">70</td> <td align="center"
valign="middle">80</td>
</tr>
</table>
</body>
</html>
Tampilannya akan seperti gambar dibawah :
Memang sedikit rumit tapi jika terus dicoba pasti bisa
Selamat mencoba
Semoga bermanfaat
Salam Radar :)
Komentar
Posting Komentar