Membuat Tabel pada Blog

Biasanya pada sebuah blog terdapat tabel yang berfungsi untuk memudahkan pembaca dalam memahami sebuah artikel blog. Kali ini Sang Penjelajah akan memberikan tutorial untuk membuat bermacam-macam tabel pada postingan blog.
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.

Berikut ini contoh kode HTML untuk membuat tabel sederhana:

<table border = "1">

<tr><td>kolom pengisian data</td>

<td>kolom pengisian data</td></tr>

<tr><td>kolom pengisian data</td>

<td>kolom pengisian data</td></tr>

</table>

 sampel:

kolom pengisian data	kolom pengisian data
kolom pengisian data	kolom pengisian data

Atribut border yang digunakan pada tabel di atas berfungsi sebagai pembatas, apabila atribut border tidak diikut sertakan maka border tidak akan di tampilkan. Adapun angka 1 yang menjadi nilai dari border tersebut berfungsi untuk menentukan ketebalan border/pembatas.

 

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.

<table border = "2">

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

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

<tr><td>kolom pengisian data</td>

<td>bkolom pengisian data</td></tr>

<tr><td>kolom pengisian data</td>

<td>kolom pengisian data</td></tr>

</table>

sampel:

Header 1	Header 2
kolom pengisian data	kolom pengisian data
kolom pengisian data	kolom pengisian data

 

Penggunaan span untuk baris dan kolom

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

<table border = "1">

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

<td>kolom pengisian data</td>

<td>kolom pengisian data</td></tr>

<tr><td>kolom pengisian data</td>

<td>kolom pengisian data</td></tr>

<tr><td colspan = "3"> kolom pengisian data</td></tr></table>

sampel:

ROWSPAN	kolom pengisian data	kolom pengisian data
	kolom pengisian data	kolom pengisian data
kolom pengisian data

begitulah tutorial yang bisa saya berikan untuk kalian semua. semoga bisa bermanfaat. sekian dan Assalamualaikum wr.wb.