Sebagai seorang blogger anda mungkin pernah mengalami kesusahan dikala anda ingin menampilkan sebuah tabel dalam artikel anda sebab sajian pada editor postingan tidak menyediakan fitur tersebut. Sebagai alternatif biasanya orang lebih menentukan untuk membuat tabel dalam format gambar dan menguploadnya ke postingan.
Sebagian blogger juga memakai microsoft word untuk membuat tabel dan menyimpannya sebagai web page. File yang disimpan dalam bentuk tersebut kemudian dibuka untuk melihat arahan tabel. Kode itulah yang kemudian dicopy paste ke postingan dalam mode HTML. Akan tetapi, pada peluang ini kita akan mengulas bagaimana cara membuat tabel memakai arahan HTML.
Sebagian blogger juga memakai microsoft word untuk membuat tabel dan menyimpannya sebagai web page. File yang disimpan dalam bentuk tersebut kemudian dibuka untuk melihat arahan tabel. Kode itulah yang kemudian dicopy paste ke postingan dalam mode HTML. Akan tetapi, pada peluang ini kita akan mengulas bagaimana cara membuat tabel memakai arahan HTML.
Kode HTML Untuk Membuat Tabel
Sebelum membuat tabel, ada baiknya jikalau anda memahami terlebih lampau dimensi suatu tabel. sepertiyang yang anda lihat, tabel terdiri dari sejumlah baris dan kolom. Untuk membuat tabel dengan HTML, diperlukan beberapa tag yang berfungsi sebagai pembentuk tabel. Berikut beberapa pola tabel dan arahan yang dipakai untuk menciptakannya.- Tabel 2 baris 2 kolom
Baris 1 kolom 1 Baris 1 kolom 2 Baris 2 kolom1 Baris 2 kolom 2
Tag :
<table border="1" cellpadding="8" style="width: 300px;">
<tbody>
<tr>
<td style="background: #e0ffff; text-align: center;">Baris 1 kolom 1</td>
<td style="background: #e0ffff; text-align: center;">Baris 1 kolom 2</td>
</tr>
<tr>
<td style="text-align: center;">Baris 2 kolom1</td>
<td style="text-align: center;">Baris 2 kolom 2</td>
</tr>
</tbody>
</table>
Keterangan :
⇒ Biru : tag untuk tabel baris pertama
⇒ Merah : tag untuk tabel baris kedua.
⇒ cellpadding : untuk mengatur jarak goresan pena terhadap sisi sisi sel.
⇒ Warna dan letak teks sanggup anda sesuaikan sesuai kebutuhan anda.
- Tabel 6 baris 3 kolom
No Variabel 1 Variabel 2 1 Nilai 1 skor 1 2 Nilai 2 skor 2 3 Nilai 3 skor 3 4 Nilai 4 skor 4 6 Nilai 5 skor 5
Tag :
<table border="1" cellpadding="8" style="font-size: 17px; width: 350px;">
<tbody>
<tr>
<td style="background: #e0ffff; text-align: center;">No</td>
<td style="background: #e0ffff; text-align: center;">Variabel 1</td>
<td style="background: #e0ffff; text-align: center;">Variabel 2</td>
</tr>
<tr>
<td style="text-align: center;">1</td>
<td style="text-align: center;">Nilai 1</td>
<td style="text-align: center;">skor 1</td>
</tr>
<tr>
<td style="text-align: center;">2</td>
<td style="text-align: center;">Nilai 2</td>
<td style="text-align: center;">skor 2</td>
</tr>
<tr>
<td style="text-align: center;">3</td>
<td style="text-align: center;">Nilai 3</td>
<td style="text-align: center;">skor 3</td>
</tr>
<tr>
<td style="text-align: center;">4</td>
<td style="text-align: center;">Nilai 4</td>
<td style="text-align: center;">skor 4</td>
</tr>
<tr>
<td style="text-align: center;">6</td>
<td style="text-align: center;">Nilai 5</td>
<td style="text-align: center;">skor 5</td>
</tr>
</tbody>
</table>
Kode HTML Untuk Merge Cell
Merge cell yakni fungsi untuk menggabungkan beberapa sel menjadi satu. Fungsi ini sanggup menggabungkan beberapa baris atau kolom menjadi satu. Untuk menggabungkan baris dipakai rowspan dan untuk menggabungkan kolom dipakai colspan. Agar lebih terang eksklusif saja pola praktiknya.- Menggabungkan beberapa baris
No Jenis Keterangan 1 Tebal Ketebalan tergantung merek. 2 Tipis
Tag :
<table border="1" cellpadding="8" style="font-size: 17px; width: 350px;">
<tbody>
<tr>
<td style="background: #f5f5f5; text-align: center;">No</td>
<td style="background: #f5f5f5; text-align: center;">Jenis</td>
<td style="background: #f5f5f5; text-align: center;">Keterangan</td>
</tr>
<tr>
<td style="text-align: center;">1</td>
<td style="text-align: left;">Tebal</td>
<td rowspan="2" style="text-align: left;">Ketebalan tergantung merek.</td>
</tr>
<tr>
<td style="text-align: center;">2</td>
<td style="text-align: left;">Tipis</td>
</tr>
</tbody>
</table>
Keterangan :
rowspan="2" : menggabungkan dua baris menjadi 1 sel.
Perhatikan bahwa letak rowspan berada pada tag untuk membuat tabel baris kedua. sebab sudah ditambah rowspan, maka pada tag tabel baris ketiga spesialuntuk ada 2 tag <td></td>. Maksudnya pada kolom ketiga spesialuntuk ada dua baris.
- Menggabungkan beberapa kolom
No Variabel 1 Ketebalan Bentuk 2 Kekuatan warna Tag :
<table border="1" cellpadding="8" style="font-size: 17px; width: 300px;">
<tbody>
<tr>
<td style="background: #f5f5f5; text-align: center;">No</td>
<td colspan="2" style="background: #f5f5f5; text-align: center;">Variabel</td>
</tr>
<tr>
<td style="text-align: center;">1</td>
<td style="text-align: left;">Ketebalan</td>
<td style="text-align: left;">Bentuk</td>
</tr>
<tr>
<td style="text-align: center;">2</td>
<td style="text-align: left;">Kekuatan</td>
<td style="text-align: left;">warna</td>
</tr>
</tbody>
</table>
Keterangan :
Colspan="2" : menggabungkan dua kolom menjadi satu sel.
Perhatikan bahwa letak colspan berada pada tag untuk tabel baris pertama. melaluiataubersamaini begitu, pada baris pertama spesialuntuk ada dua kolom.
Demikian cara membuat tabel dan merge cell dengan arahan HTML, agar bermanfaa. Jika berdasarkan anda artikel ini bermanfaa, bagikanlah kepada kawan-kawan anda di social media. Terimakasih.
Emoticon