Membuat tabel dengan format colspan & rowspan berbasis html

CARA MEMBUAT TABEL BERBASIS HTML MENGGUNAKAN COLSPAN & ROWSPAN




Kali ini saya akan menjelaskan tentang cara membuat tabel website berbasis html seperti gambar di bawah ini !



Hallo ! ini adalah artikel pertama saya kali ini saya akan berbagi ilmu cara membuat table sederhana yang menggunakan listing program menggunakan bahasa html. contoh seperti di bawah menggunakan cara rowspan & colspan. apa itu colspan & rowspan? yaitu menggabungkan kedua kolom table menjadi 1 bagian. seperti pada gambar di bawah !



Listing Program Berikut !

<html>
<head>
<title> Latihan 1 </title>
</head>
<body background="foto.jpg">

<h1 align="center">DATA ARSIP SURAT </h1>

<table width='70%' border='0' align='center'>
<tr height="50" width='70%'  align="center">
              <td bgcolor="red"> <a href='https://www.google.co.id>Data Surat Masuk</td>
              <td bgcolor="yellow"> <a href='#'>Data Surat Keluar</td>
              <td bgcolor="green"> <a href='#'>Input Surat Masuk</td>
              <td bgcolor="blue"> <a href='#'>Input Surat Keluar</td>
           


</tr>
<tr height="10">
 <td colspan="4" height="10"></td>

</tr>

<tr height="500">
<td colspan="4" bgcolor="lavender"></td>

</tr>           

</table>
</body>
</html>

"Pahamilah listing program berikut jangan asal copy paste"

Keterangan :

Jika ada Tag pembuka berarti ada juga tabel penutup.

<title> Latihan 1 </title> = Berfungsi sebagai judul pada website yang bertempat di bagian kepala website yang di bungkus oleh <head> </head>

<body background="foto.jpg"> = Untuk merubah bentuk background bisa berupa warna/gambar, dan untuk memanggil gambar yaitu gambar harus berada pada 1 folder html dan cara memanggilnya "foto.jpg" yaitu nama file gambar tersebut.

<h1> = Judul pada artikel website.
align="center" = Berfungsi untuk meratakan tulis seperti rata tengah ("Center")
<a href> = Berfungsi untuk membuat link tambahan

Jika kurang jelas kamu bisa bertanya kepada saya
WA :0838 4963 4416
FB : Harya Dwi Pamungkaz

Sekian dari saya semoga artikel ini bermanfaat :)




By : HDP









Komentar

Posting Komentar