Penulisan Kode HTML Tabel dalam Posting Blog

Tata Cara Penulisan Kode HTML Pembuatan Tabel dalam Posting Blog
Kita ingin menyajikan penulisan tabel dalam posting blog, akan tetapi tidak semudah membuat tabel pada lembar kerja Microsoft Word maupun Microsoft Excel.
Dalam Penulisan Posting blog kita diberikan pilihan dalam bahasa pemrograman XML yaitu dengan menggunakan HTML salah satunya dalam Pembuatan Tabel.

Silahkan perhatikan bagaimana Caranya Pembuatan Tabel dalam Posting Blog

Pertama pastinya buka Lembar baru pembuatan posting blog dan pilih mode HTML
Tuliskan kode pembuatan tabel berikut ini :

<table border="1" style="width: 475px;">
<tr><td>Judul 1</td><td>Judul 2</td><td>Judul 3</td></tr>
<tr><td>Baris 1</td><td>Baris 1</td><td>Baris 1</td></tr>
<tr><td>Baris 2</td><td>Baris 2</td><td>Baris 2</td></tr>
<tr><td>Baris 3</td><td>Baris 3</td><td>Baris 3</td></tr>
<tr><td>Baris 4</td><td>Baris 4</td><td>Baris 4</td></tr>
</table>

Akan jadi seperti ini :

Keterangan :
Table border : garis tepi tabel dalam satuan pixel (px) , anda bisa menambah atau mengurangi ketebalan garis tepi jika anda isikan 0 maka tidak akan nampak garis tepinya seperti dibawah

Width : Lebar tabel dalam satuan pixel (px) , anda bisa merubah sesuai keinginan anda. Jika ingin lebar posting sesuai dengan lebar postingan maka isi dengan auto, contoh penulisan style="width: auto;">

<tr> : Baris/Row suatu tabel atau garis vertikal pemisah antara element satu dengan yang lainnya, didalam Row pasti diikuti oleh Column <td> jadi penulisannya selalu seperti ini :
<tr><td></td><td></td><td></td></tr>
Ini berarti Satu Row yang memiliki tiga Column seperti gambar dibawah ini

Setiap kode HTML selalu ditutup/diakhiri dengan tanda / semisal <tr> mempunyai penutup </tr>, <td> mempunyai penutup </td>

Jika ingin menambah Row tinggal tambah kode <tr> sampai </tr> semisal :
<tr><td></td><td></td><td></td></tr> jika ingin ditambahkan maka menjadi

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

Begitu juga jika ingin menambah Column sisipkan kode <td></td> didalam kode Row semisal
<tr><td></td><td></td><td></td></tr>, jika ingin menambahkan Column maka menjadi

Untuk penulisan di dalam Column tuliskan diantara kode <td> dengan </td> atau supaya lebih mudah beralih saja ke penulisan posting mode compose nanti akan terlihat tabelnya dan anda tinggal memasukkan tulisan dan memilih font yang diinginkan

Penulisan Colspan dan Rowspan Tabel

Apa itu Colspan?
Colspan singkatan dari Column Span , merupakan atribute tabel dimana berguna untuk memperlebar tabel dengan menyatukan beberapa unit tabel
Berikut cara penulisan atribute Colspan pada Kode HTML Tabel

<table border="1" style="width: 475px;"
<tr><td>Judul 1</td><td>Judul 2</td><td>Judul 3</td></tr>
<tr><td colspan="3"></td></tr>
<tr><td>Baris 1</td><td>Baris 1</td><td>Baris 1</td></tr>
<tr><td>Baris 2</td><td>Baris 2</td><td>Baris 2</td></tr>
<tr><td>Baris 3</td><td>Baris 3</td><td>Baris 3</td></tr>
<tr><td>Baris 4</td><td>Baris 4</td><td>Baris 4</td></tr>
</table>

maka akan jadi seperti gambar di bawah ini :

Keterangan :
Angka 3 merupakan jumlah Column yang akan dijadikan satu

Rowspan
Merupakan penyatuan beberapa unit kolom-kolom ke bawah sehingga menjadi satu.
Penulisan Rowspan dalam Kode HTML Tabel ialah sebagai berikut

<table border="1" style="width: 475px;">
<tr>
<td rowspan="5">Kotak 1-5</td><td>Kotak 1</td></tr>
<tr><td>Kotak 2</td></tr>
<tr><td>Kotak 3</td></tr>
<tr><td>Kotak 4</td></tr>
<tr><td>Kotak 5</td></tr>
</table>
Maka menjadi tabel seperti berikut :

Membuat tabel dengan tampilan lebih variatif dan dinamis

Jika anda ingin membuat Tabel lebih tampak dinamis dan variatif, silahkan kunjungi postingan saya sebelumnya yaitu Membuat Tabel Variatif dan Dinamis Menggunakan CSS HTML

Sekian artikel sederhana dari saya yaitu Tata Cara Penulisan Kode HTML dalam pembuatan Tabel.
Semoga bisa berguna untuk sahabat semua agar lebih semangat dalam menggeluti dunia blogging

Terima Kasih ...

Penulisan Kode HTML Tabel dalam Posting Blog

Post a Comment