wiblogger

HTML <table> : Cara membuat tabel di postingan blog

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:
tableTag 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 3 Pada 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 4 Pada 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).

Bagikan ke:

Tambahkan komentar untuk:

HTML <table> : Cara membuat tabel di postingan blog
Berlangganan Artikel
Kami akan mengirimkan berbagai referensi blogging pilihan langsung ke alamat email anda. Pastikan juga anda melakukan konfirmasi pada email yang bersangkutan untuk mengaktifkan layanan. Panduan bagaimana cara berlangganan artikel bisa anda baca disini.
×
Jangan tampilkan lagi