Belajar Membuat Tabel Rowspan dan Colspan pada HTML

Assalamualaikum wr.wb

Pada kesempatan kali ini kita akan belajar Rowspan dan Colspan pada table
tutorial kali ini menggunakan HTML5 yang diawal dengan <!DOCTYPE html>

Bukan hanya html saja yang akan kita pelajari tetapi kita juga akan mempelajari bagaimana cara penggunakaan CSS (Cassading Style Sheet)

Apa itu CSS?
CSS adalah singkatan dari Cassading Style Sheet yang biasanya digunakan untuk mengatur tampilan sebuah website yang biasa diterapkan pada tag HTML
CSS juga dapat berfungsi sebagai pemisah antara content dan visual pada website

HTML dan CSS memiliki keterkaitan yang sangat erat, karena HTML merupakan wadah atau pondasi website dan CSS untuk
memperbaiki tampilan website maka kedua bahasa pemrograman ini harus berjalan bersamaan

Kelebihan menggunakan CSS, Teman-teman dapat mengatur tampilan pada file yang berbeda disemua aspek, lalu menentukan style yang akan dipakai
kemudian diintegrasikan file CSS tersebut diatas markup HTML atau dapat dibuat pada tag HTML secara langsung.

CSS Style dibagi menjadi 3
1. CSS Internal
2. CSS External
3. CSS Inline

nah pada kesempatan kali ini kita akan belajar membuat table HTML dengan konsep Rowspan dan Colspan serta menggunakan CSS Internal
Silahkan teman-teman simak pembahasan dibawah ini:

 Silahkan teman-teman buka tesk editor teman-teman yang biasa dipakai
lalu ketikan script dibawah ini:

<!DOCTYPE html>
<html>
<head>
<title>Tabel Data absensi Mahasiswa</title>
</head>
<body background="silver">
<center><h1>DATA ABSENSI MAHASISWA</h1></center>
<table bgcolor="white" border="1" cellspacing="1" cellpadding="0" width="700px" align="center" style="text-align: center;height: 200px;">
<tr bgcolor="grey"  style="color: white;">
<td rowspan="2">Kelas</td>
<td rowspan="2">NPM</td>
<td colspan="3">Keterangan</td>
</tr>
<tr bgcolor="silver"  style="color: white;">
<td>Sakit</td>
<td>Izin</td>
<td>Alpa</td>
</tr>
<tr>
<td rowspan="2">2A</td>
<td>101101</td>
<td>3</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>101101</td>
<td></td>
<td>2</td>
<td>10</td>
</tr>
<tr>
<td rowspan="2">2B</td>
<td>101201</td>
<td>2</td>
<td>-</td>
<td>1</td>
</tr>
<tr>
<td>101202</td>
<td></td>
<td>1</td>
<td></td>
</tr>
</table>
</body>
</html>
Maka Hasilnya Seperti Gambar Berikut ini:

Dengan Menggunakan Script diatas maka kita tidak usah untuk mengetikan script HTML yang banyak kita hanya mengatur pada bagian tag table saja untuk mengatur tampilan keseluruhannya.

Script diatas hanyalah sebagai contoh penerapan Rowspan dan Colspan dengan sedikit menggunakan CSS (Cassading Style Sheet). Teman-teman boleh mengubah jenis tulisan atau tampilan sesuai dengan yang teman-teman inginkan. 

Terimkasih Telah berkunjung.. Semoga Bermanfaat :) 

0 Response to "Belajar Membuat Tabel Rowspan dan Colspan pada HTML"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel