Cara Membuat Tabel di Blog Dengan Menggunakan HTML

Cara Membuat Tabel di Blog Dengan Menggunakan HTML

Pernahkah sobat melihat  tabel pada sebuah website atau blog seperti gambar di atas dan ingin membuatnya? Mungkin buat para newbie ini merupakan sesuatu yang sulit untuk dilakukan. Untuk itu pada postingan saya kali ini saya akan mencoba untuk menyampaikan pengetahuan saya tentang Cara Membuat Tabel di Blog Dengan Menggunakan HTML. Langsung saja kita mulai ulasannya.

Tabel dalam HTML didefinisikan dengan tag <table> . Setiap tabel terdiri dari baris-baris yang didefinisikan dengan tag <tr> dan setiap baris dalam tabel terdiri dari kolom-kolom data yang didefinisikan dengan tag <td>. <td> merupakan singkatan dari "tabel data" yang menentukan isi dari  data kolom. Tag <td> dapat berisikan teks, link, gambar, list. form, dan lain.lain.

Contoh kode HTML untuk membuat sebuah tabel sederhana:

<table border = "3">

<tr><td>baris 1, kolom 1</td>

<td>baris 1, kolom 2</td></tr>

<tr><td>baris 2, kolom 1</td>

<td>baris 2, kolom 2</td></tr>

</table>

maka tampilan dari kode diatas seperti tabel di bawah ini

baris 1, kolom 1	baris 1, kolom 2
baris 2, kolom 1	baris 2, kolom 2

Atribut border yang digunakan pada tabel di atas adalah sebagai pembatas, apabila sobat tidak menggunakan atribut border maka tabel akan ditampilkan seperti pada tabel di bawah ini. Adapun angka 3 yang menjadi nilai dari border tersebut berfungsi untuk menentukan ketebalan border/pembatas.

baris 1, kolom 1	baris 1, kolom 2
baris 2, kolom 1	baris 2, kolom 2

Pada kondisi tertentu terkadang tabel seperti ini diperlukan, akan tetapi pada kebanyakan proses pembuat tabel harus menggunkan atribut border.

Pembuatan tabel dengan Header (kepala)

Header  pada tabel HTML didefinisikan dengan tag <th>. Browser pada umumnya akan menampilkan teks pada elemen Header dengan teks yang tercetak tebal (bold) dan berada di tengah. 

Berikut adalah contoh kode HTML untuk tabel dengan Header:

<table border = "2">

<tr><th>Header 1</th>

<th>Header 2</th></tr>

<tr><td>baris 1, kolom 1</td>

<td>baris 1, kolom 2</td></tr>

<tr><td>baris 2, kolom 1</td>

<td>baris 2, kolom 2</td></tr>

</table>

Maka tampilan dari kode diatas seperti pada tabel di bawah ini

Header 1	Header 2
baris 1, kolom 1	baris 1, kolom 2
baris 2, kolom 1	baris 2, kolom 2

Penggunaan span untuk baris dan kolom

Untuk membuat tampilan baris yang bervariasi gunakan atribut rowspan dan atribut colspan untuk membuat tampilan kolom yang bervariasi.

Berikut contoh Penggunaan rowspan dalam sebuah tabel HTML:

<table border = "1">

<tr><td rowspan = "2">ROWSPAN</td>

<td>my</td>

<td>style</td></tr>

<tr><td>my</td>

<td>life</td></tr>

<tr><td colspan = "3"> it's my table</td></tr></table>

Maka tampilan dari kode di atas seperti pada tabel di bawah ini 

ROWSPAN	my	style
	my	life
my table

Mudah

Posted in: Knowledge