Cara Membuat Tabel di Blog dengan Kode HTML

Sebenarnya saya sudah lama ingin berbagi mengenai bagaimana cara membuat tabel di blog dengan menggunakan kode HTML, namun baru kali ini saya sempatkan untuk mempostingnya. Mengingat karena begitu luas cakupan dan bahasannya dan memerlukan bahasan yang lebih detail agar bisa lebih mudah untuk dipahaminya khususnya bagi para pemula, seperti waktu saya baru belajar mengenai kode html untuk membuat tabel.maka postingan ini akan disambung ke bagian -2,

Istilah tabel sendiri sepertinya sudah akrab di telinga dan terutama mata kita, Tabel dapat diartikan sebagai sederetan Elemen / cell yang terdiri dari baris dan kolom, setiap elemen mempunyai kedudukan pada baris dan kolom tertentu berikut ini tabel untuk menjelaskan elemen-elemen dalam tabel :

baris ke-1 kolom ke-1	baris ke-1 kolom ke-2	baris ke-1 kolom ke-3	baris ke-1 kolom ke-n
baris ke-2 kolom ke-1	baris ke-2 kolom ke-2	baris ke-2 kolom ke-3	baris ke-2 kolom ke-n
baris ke-3 kolom ke-1	baris ke-3 kolom ke-2	baris ke-3 kolom ke-3	baris ke-2 kolom ke-n
baris ke-n kolom ke-1	baris ke-n kolom ke-2	baris ke-n kolom ke-3	baris ke-n kolom ke-n

Adapun kode HTML dasar untuk membuat blog yaitu dengan kode:

Tabel selalu dimulai dengan tag pembuka <table><tbody>dan ditutup dengan tag </tbody></table>
Untuk membuat baris diawali dengan tag <tr> dan ditutup dengan tag </tr>
Untuk membuat kolom diawali dengan tag <td> dan ditutup dengan tag </td>

Agar penjelasan lebih mudah dipahami mari kita lihat contoh berikut:

Membuat Tabel (untuk membuat garis dengan ketebalan garis 1 px pada tabelpada tabel, maka tambahkan atribut border="1" pada tag pembuka ) yang terdiri dari 1 baris dan tiga kolom maka kode HTML nya adalah:
<table border="1">
<tr>
<td>baris ke-1 kolom ke-1</td>
<td>baris ke-1 kolom ke-2</td>
<td>baris ke-1 kolom ke-3</td>
</tr>
</table>
Hasilnya adalah:

baris ke-1 kolom ke-1 baris ke-1 kolom ke-2 baris ke-1 kolom ke-3
Membuat Tabel (untuk membuat garis dengan ketebalan garis 1 px pada tabel, maka tambahkan atribut border="1" pada tag pembuka ) yang terdiri dari 3 baris dan masing - masing baris terdiri dari 1 kolom maka kode HTML nya adalah:

<table border="1">
<tr>
<td>baris ke-1 kolom ke-1</td>
</tr>
<tr>
<td>baris ke-2 kolom ke-1</td>
</tr>
<tr>
<td>baris ke-3 kolom ke-1</td>
</tr>
</tbody></table>
Hasilnya adalah:

baris ke-1 kolom ke-1

baris ke-1 kolom ke-1

baris ke-3 kolom ke-1

Penggunaan Atribut Tag HTML pada Tabel
Setiap tag pembuka diatas <table> <tr> <td> dapat diikuti / ditambahkan atribut untuk menambahkan perintah yang diberikan kepada seluruh elemen yang terletak antara tag pembuka tersebut sampai dengan tag penutupnya Agar lebih jelas mari kita perhatikan contoh berikut ini:
Misal kita akan membuat tabel yang terdiri dari 3 baris dan 3 kolom dengan menggunakan garis batas (border) sebesar 1 px, dan khusus untuk baris ke - 2 menggunakan background warna biru, maka kode HTMLnya adalah sebagai berikut:

Untuk membuat tabel yang seluruh elemennya diberi garis pinggir dengan ketebalan 1 px, maka pada tag pembuka tabel kita beri atribut border="1", sehingga tag nya menjadi <table border="1">........... </table>
Agar seluruh elemen Tabel pada baris pertama (ke-1) di diberi background warna biru, maka tag pembuka pada baris pertama (ke-1) atau tag <tr> yang pertama diberi atribut bgcolor="blue" sehingga tagnya menjadi <tr bgcolor="blue"> .... </tr>
Sehingga Kode HTML nya menjadi:

<table border="1"><tbody>
<tr bgcolor="blue"><td>baris ke-1 kolom ke-1</td><td>baris ke-1 kolom ke-2</td><td>baris ke-1 kolom ke-3</td></tr>
<tr><td>baris ke-2 kolom ke-1</td><td>baris ke-2 kolom ke-2</td><td>baris ke-2 kolom ke-3</td></tr>
<tr><td>baris ke-3 kolom ke-1</td><td>baris ke-3 kolom ke-2</td><td>baris ke-3 kolom ke-3</td></tr>
</tbody></table>
Hasilnya akan nampak seperti ini:

baris ke-1 kolom ke-1 baris ke-1 kolom ke-2 baris ke-1 kolom ke-3

baris ke-2 kolom ke-1 baris ke-2 kolom ke-2 baris ke-2 kolom ke-3

baris ke-3 kolom ke-1 baris ke-3 kolom ke-2 baris ke-3 kolom ke-3

Adapun Atribut lain dari Tag HTML untuk Tabel akan dijelaskan pada postingan berikutnya.
Demikian Postingan kali ini mengenai cara Membuat Tabel di Blog dengan Kode HTML, semoga bermanfaat,

Produk Kami

Adapun tutorial Blogspot lainnya yang mungkin Anda cari:

HP/WA:	08561452465 / 085286352611

Alamat :	Perumahan Griya Asri Camar A - 18, Kp. Raden RT/RW: 03/07 Kel. Jati Raden, Kec. Jatisampurna ( masuk dari Jalan Raya Kranggan - Pondok Gede, Gang Camar) Kota Bekasi Jawa Barat

Jual Alat Marawis Rebana Qasidah, Hadrah, Drum Band dll