Cara membuat tabel di postingan blog Anda

Daftar isi:

1. Cara membuat tabel di postingan blogger
2. HTML table sederhana
3. Menggabungkan cell antar baris dan kolom

1. Cara membuat tabel dipostingan blog

Kita tahu bahwa salah satu keterbatasan yang terdapat pada post editor blogger adalah tidak tersedianya toolbar untuk membuat tabel. Untuk membuat tabel, kita harus membuat dan memasukkan kode HTML secara manual dengan cara: Masuk ke antarmuka post editor, pada mode penulisan post, pilih mode HTML. Paste kode html tabel pada posisi yang anda kehendaki.

2. HTML Tabel sederhana

HTML1: HTML Tabel sederhana

<table>
    <tbody>
        <tr>
            <td>Cell baris 1, kolom 1</td>
            <td>Cell baris 1, kolom 2</td>
        </tr>
        <tr>
            <td>Cell baris 2, kolom 1</td>
            <td>Cell baris 2, kolom 2</td>
        </tr>
    </tbody>
</table>

Hasil HTML 1

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

Keterangan HTML 1:

table	Tag untuk membuat tabel
tbody	Tag yang mendefinisikan tubuh tabel. Khususnya pada antarmuka post editor blogger, tag ini bersifat optional (tidak harus digunakan). Dengan kata lain, tanpa tag tbody sekalipun, tabel tetap dapat ditampilkan dengan benar. Jika tag ini tidak didefinisikan, sistem blogger akan secara otomatis melengkapi tag tbody ini ketika post diterbitkan
tr	Tag untuk membuat baris baru pada tabel. Sebuah tabel setidaknya terdiri dari satu baris
td	Tag untuk membuat Cell baru pada tabel. Sebuah baris tabel setidaknya terdiri dari satu cell. Tag ini selalu digunakan didalam tag tr. Jumlah kolom pada tabel sama dengan jumlah cell per baris.

Pada HTML 1, semua cell didefinisikan dengan menggunakan tag td. Terdapat dua jenis cell pada tabel, yaitu Standard cell dan Header cell. Standard cell didefinisikan dengan tag td, dan Header cell didefinisikan dengan tag th. Header cell digunakan untuk memberikan label pada baris atau kolom tertentu. Berikut adalah contoh penggunaan header cell.

HTML2: Penggunaan Tag TH

<table>
    <tbody>
        <tr>
            <th>Nama</th>
            <th>Umur</th>
        </tr>
        <tr>
            <td>Mawar</td>
            <td>17</td>
        </tr>
        <tr>
            <td>Melati</td>
            <td>19</td>
        </tr>
    </tbody>
</table>

Hasil HTML 2

Nama	Umur
Mawar	17
Melati	19

3. Menggabungkan cell antar baris dan kolom

Kita bisa menggabungkan (Marge) cell antar baris atau kolom dengan menggunakan atribut rowspan dan colspan.

rowspan	Menggabungkan cell antar baris. Atribut ini digunakan pada tag td atau th
colspan	Menggabungkan cell antar kolom. Atribut ini digunakan pada tag td atau th.

HTML 3: Penggunaan rowspan

<table>
    <tbody>
        <tr>
            <td rowspan='2'>Baris 1-2, kolom 1</td>
            <td>Baris 1, kolom 2</td>
        </tr>
        <tr>
            <td>Baris 2, kolom 2</td>
        </tr>
        <tr>
            <td>Baris 3, kolom 1</td>
            <td>Baris 3, kolom 2</td>
        </tr>
    </tbody>
</table>

Hasil HTML 3

Baris 1-2, kolom 1	Baris 1, kolom 2
	Baris 2, kolom 2
Baris 3, kolom 1	Baris 3, kolom 2

Keterangan HTML 3Pada HTML 3 diatas, cell pertama baris 1 memiliki atribut rowspan dengan value 2. Ini artinya, cell tersebut akan mengambil Space sebanyak 2 baris. Oleh karena itu, hanya satu cell didefinisikan pada baris 2 (satu space cell lagi telah diambil oleh cell dengan rowspan yang bersangkutan).

HTML 3: Penggunaan colspan

<table>
    <tbody>
        <tr>
            <th>Baris 1, kolom 1</th>
            <th colspan='2'>Baris 1, kolom 2-3</th>
        </tr>
        <tr>
            <td>Baris 2, kolom 1</td>
            <td>Baris 2, kolom 2</td>
            <td>Baris 2, kolom 3</td>
        </tr>
        <tr>
            <td>Baris 3, kolom 1</td>
            <td>Baris 3, kolom 2</td>
            <td>Baris 2, kolom 3</td>
        </tr>
    </tbody>
</table>

Hasil HTML 4

Baris 1, kolom 1	Baris 1, kolom 2-3
Baris 2, kolom 1	Baris 2, kolom 2	Baris 2, kolom 3
Baris 3, kolom 1	Baris 3, kolom 2	Baris 2, kolom 3

Keterangan HTML 4Pada HTML 4 diatas, cell ke-2 baris pertama memiliki atribut colspan dengan value 2. Ini artinya, cell tersebut akan mengambil Space sebanyak 2 kolom. Oleh karena itu, cell ke-3 pada baris 1 tidak didefinisikan (space ke-3 telah diambil oleh cell dengan colspan yang bersangkutan).

Sumber : wiblogger.com

Berbagi :