Cara Menciptakan Tabel Dan Merge Cell Dengan Isyarat Html

Posted on
Sebagai seorang blogger anda cukup pernah mengalami kesulitan saat anda ingin menampilkan sebuah tabel dalam artikel anda alasannya yaitu hidangan pada editor postingan tak 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 lalu dibuka untuk melihat arahan tabel. Kode itulah yang lalu dicopy paste ke postingan dalam mode HTML. Akan tenamun, pada hari ini ini kita akan membahas bagaimana cara membuat tabel memakai arahan HTML.

Kode HTML Untuk Membuat Tabel

Sebelum membuat tabel, ada baiknya apabila anda memahami terlebih dahulu dimensi suatu tabel. Sebagaimana yang anda lihat, tabel terdiri dari sejumlah baris dan kolom. Untuk membuat tabel dengan HTML, diharapkan sedikit tag yang berfungsi sebagai pembentuk tabel. Berikut sedikit rujukan tabel dan arahan yang dipakai untuk menciptakannya.

  1. 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.
  2. 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 merupakan fungsi untuk menggabungkan sedikit sel menjadi satu. Fungsi ini sanggup menggabungkan sedikit baris atau kolom menjadi satu. Untuk menggabungkan baris dipakai rowspan dan untuk menggabungkan kolom dipakai colspan. Agar lebih terperinci eksklusif saja rujukan praktiknya.

  1. Menggabungkan sedikit 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. dikarenakan telah ditambah rowspan, maka pada tag tabel baris ketiga hanya ada 2 tag <td></td>. Maksudnya pada kolom ketiga hanya ada dua baris.

  2. Menggabungkan sedikit 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. Dengan begitu, pada baris pertama hanya ada dua kolom.

Demikian cara membuat tabel dan merge cell dengan arahan HTML, supaya bermanfaat. Jika berdasarkan anda artikel ini bermanfaat, bagikanlah kepada teman-teman anda di social media. Terimakasih.

Baca Juga:   Css Border-Style Property