Belajar Dasar HTML #2

Cara Membuat Tabel Di HTML

Tabel adalah data yang berisi iktisar sejumlah data informasi, biasanya berupa kata-kata dan bilangan yang tersusun secara bersistem, urut ke bawah dalam lajur dan deret tertentu dengan garis pembatas sehingga mudah untuk disimak (menurut :Kamus Besar Bahasa Indonesia). Tabel terdiri atas kolom (memanjang ke kanan) dan baris(memanjang ke bawah). Kolom dan baris dihubungkan dengan data yang merupakan isi dari tabel tersebut.

Kali ini saya akan memperlihatkan cara membuat tabel di HTML. Bentuk formattingnya adalah seperti ini :

<html>
<head>
<title>Tabel</title>
</head>
<body>
<h1>Tabel 1</h1>
<table border=”1″ width=”80%” >
<tr><th>No</th><th>Nama</th><th>NIM</th><th>Kota Asal</th></tr>
<tr align=”center”><td>1</td><td>Muhamad Fikri</td><td>1600018044</td><td>Berau</td></tr>
<tr align=”center”><td>2</td><td>Fikri Muhamad</td><td>4408100061</td><td>Tg. Redeb</td></tr>
</table>
</body>
</html>

Setelah kode diatas sudah kalian tulis maka selanjutnya kalian tinggal menjalankan programnya dan yang akan tampil adalah seperti berikut :

Tabel 1

No Nama NIM Kota Asal
1 Muhamad Fikri 1600018044 Berau
2 Fikri Muhamad 4408100061 Tg. Redeb

<tr>  berfungsi untuk membuat baris. Sedangkan <th> berfungsi sebagai header pada tabel dan <td>berfungsi sebagai isi dari tabel.

dibagian <table border=”1″ width=”80%”> adalah untuk memberi dan mengatur ukuran border yang kita buat serta width itu sendiri untuk mengatur ukuran dari tabel itu sendiri. Kemudian di bagian <tr align=”center”> itu kita gunakan untuk mengatur format isi tabel menjadi rata tengah.

Penggunaan Colspan dan Rowspan

Pengunaan colspan dan rowspan adalah cara untuk menggabungkan beberapa cell dalam tabel atau biasa kita sebut sebagai margin.

<html>
<head>
<title>Tabel</title>
</head>

<body>
<h1>Tabel 3</h1><br>
<table border=”1″ width=”80%”>
<tr><th>No</th><th>Nama</th><th>harga</th></tr>
<tr><td align=”center” rowspan=”3″>1</td><td>Sabun</td><td>7,000</td></tr>
<tr><td>Tisu</td><td>3,000</td></tr>
<tr><td>Minyak</td><td>11,000</td></tr>
<tr><td colspan=”2″><u><b><i>Total</i></b></u></td><td>21,000</td></tr>
</table>
</body>
</html>

Maka tampilan yang akan kita lihat adalah seperti ini :
Tabel

Tabel 3

No Nama harga
1 Sabun 7,000
Tisu 3,000
Minyak 11,000
Total 21,000

Colspan berfungsi untuk menggabungkan kolom. <td colspan=”2″> kita gunakan karena cell yang akan kita gabungkan sebanyak 2 kolom seperti di tabel yang memuat tulisan “Total.

Rowspan berfungsi untuk menggabungkan baris. <td align=”center” rowspan=”3″> kita gunakan karena jumlah baris yang akan kita gabungkan sebanyak 3 baris seperti di tabel yang memuat angka “1”.

Cara Membuat Tabel Di Dalam Tabel

<html>
<head>
<title>Tabel</title>
</head>

<body>
<h1>Tabel 3</h1><br>
<table border=”1″ width=”80%”>
<tr><th>Tabel Dalam Tabel</th></tr>
<tr>
<td>
<table border=”1″ width=”95%”>

<tr><th>No</th><th>Nama</th><th>NIM</th></tr>
<tr><td>1</td><td>Andi</td><td>1600018001</td></tr>
<tr><td>2</td><td>Andy</td><td>1600018002</td></tr>
<tr><td>3</td><td>Andie</td><td>1600018003</td></tr>
<tr><td>4</td><td>Andhi</td><td>1600018004</td></tr>

</table>
</td>
</tr>
<tr><th>Mantab Jiwa</th></tr>
</table>
</body>
</html>

Intinya sama saja seperti tabel biasa hanya saja di dalam tag <table> akan kita gunakan lagi tag <table> yang lain untuk membuat tabel di dalam tabel. Tampilan yang akan kita lihat adalah seperti ini :

Tabel 3

Tabel Dalam Tabel
 

No Nama NIM
1 Andi 1600018001
2 Andy 1600018002
3 Andie 1600018003
4 Andhi 1600018004

 

 

Mantab Jiwa

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s