sisfob: Cara Mudah Membuat Tabel Dengan HTML

Hai sahabat blogger, kali ini kami akan membagi sedikit tentang cara mudah membuat tabel HTML. Sebelum mempraktikkannya lebih jauh alangkah baiknya kalau kita terlebih dahulu membahas tentang apa itu yang dinamakan dengan HTML.

Jadi, HTML (Hyper Text Markup Languange) adalah sebuah bahasa markup yang digunakan untuk membuat halaman web,bisa dibilang HTML adalah komposisi dasar pembuatan halaman web.

HTML terdiri dari kumpulan file ASCII yang berisi perintah untuk menampilkan tampilan grafis pada web browser. Saat ini pun anda sedang melihat kode html yang dibaca menjadi tampilan grafis oleh web browser.

File HTML dapat dibuat dengan text editor biasa disetiap sistem operasi seperti pada text editor windows yaitu notepad. Selain menggunakan notepad kita juga bisa membuatnya menggunakan Notepad ++ atau Dreamweaver. Untuk pemula mari kita sama-sama mempelajarinya bersama-sama.

Pada HTML ada yang disebut dengan tag,tag digunakan untuk menandai text pada HTML sehingga akan menampilkan grafis sesuai dengan fungsi tag yang dipakai. Tag didefinisikan dengan tanda”<>” dan mempunyai dua jenis. Jenis yang pertama yaitu tag mempunyai pembuka dan penutup,sedangkan Jenis yang kedua tag tidak mempunyai penutup melainkan berdiri sendiri.

Pada artikel ini kami akan menjelaskan cara Membuat Tabel Dengan HTML yang merupakan jenis tag yang mempunyai pembuka dan penutup.Untuk membuat tabel ada tag-tag yang diperlukan yaitu “<table></table>”,”<tr></tr>”,dan “<td></td>”.

Tag “<table>” mendeskripsikan pembuatan sebuah table, sedangkan tag “<tr>” mendiskripsikan untuk membuat baris pada tabel tersebut. Tag “<td>” digunakan untuk menampilkan kolom pada barisnya, jadi bisa digambarkan bahwa tag “<td>” berada didalam tag “<tr>” dan tag “<tr>” berada didalam tag “<table>”. Inilah contoh pembuatan tabel sederhana :

<html>
<head>
<title>Membuat Tabel Sederhana</title>
</head>
<body>

<table border="1">
<tr>
<td>Kolom 1 baris 1</td>
<td>Kolom 2 baris 1</td>
<td>Kolom 3 baris 1</td>
</tr>
<tr>
<td>Kolom 1 baris 2</td>
<td>Kolom 2 baris 2</td>
<td>Kolom 3 baris 2</td>
</tr>
</table>

</body>
</html>

Pada kode diatas border berfungsi memberi ketebalan pada tabel,untuk anda yang menginginkan 2 kolom digabung menjadi 1 bisa menggunakan kode “colspan” atau 2 baris menjadi 1 menggunakan kode “rowspan”. Pada Tag <table> anda juga bisa menambahkan tag <th> yang berfungsi sebagai bagian judul pada tabel .Contohnya seperti ini :

<html>
<head>
<title>Membuat Tabel Sederhana</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="4">Judul Tabel :) </th>
</tr>
<tr>
<td colspan="2">Contoh Colspan</td>
<td>Kolom 3 baris 1</td>
<td>Kolom 4 baris 1</td>
</tr>
<tr>
<td rowspan="2">Contoh Rowspan</td>
<td>Kolom 2 baris 2</td>
<td>Kolom 3 baris 2</td>
<td>Kolom 4 baris 2</td>
</tr>
<tr>
<td>Kolom 2 baris 3</td>
<td>Kolom 3 baris 3</td>
<td>Kolom 4 baris 3</td>
</tr>
</table>
</body>
</html>

Pada kode diatas kami menggunakan colspan yang bernilai 2 artinya saya menggabungkan 2 kolom menjadi satu dari kolom yang kami beri colspan. Untuk itu kami mengisi 2 kolom saja pada baris ke 1 karena pada kolom 1 sudah mewakili kolom ke 2, Sama halnya dengan rowspan yang hanya diberi 2 kolom pada baris sesudah rowspan.

Berikut ini kami berikan contoh tabel Pengurus SI B Team

<html>
<head>
<title>Pengurus SI B Team</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="3">Pengurus SI B Team </th>
</tr>
<tr>
<td> Ketua</td>
<td>Irvan</td>
</tr>
<tr>
<td> Wakil Ketua</td>
<td>Kiki</td>
</tr>
<tr>
<td> Sekretaris</td>
<td>April</td>
</tr>
<tr>
<td rowspan="2">Bendahara</td>
<td>Fitri Lena</td>
</tr>
<tr>
<td>Fitroh Mawardani</td>
</tr>
<tr>
<td rowspan="2">Humas</td>
<td>Imam Musholeh</td>
</tr>
<tr>
<td>Rina Yuliana</td>
</tr>
</table>
</body>
</html>

Dari kode HTML diatas, hasilnya seperti yang dibawah ini :)

Pengurus SI B Team
Ketua	Irvan
Wakil Ketua	Kiki
Sekretaris	April
Bendahara	Fitri Lena
Bendahara	Fitroh Mawardani
Humas	Imam Musholeh
Humas	Rina Yuliana

Mungkin cukup sekian dari kami tentang cara mudah membuat tabel dengan HTML, semoga artikel ini bermanfaat bagi pembaca. Aamiin :)

sisfob

Laman

Jumat, 03 April 2015

Cara Mudah Membuat Tabel Dengan HTML

3 komentar: