CARA MEMBUAT TABEL DAN MERGE CELL DENGAN KODE HTML

Posted by on 18 January 2015 - 1:39 PM

Sebagai seorang blogger anda mungkin pernah mengalami kesulitan ketika anda ingin menampilkan sebuah tabel dalam artikel anda karena menu pada editor postingan tidak menyediakan fitur tersebut. Sebagai alternatif biasanya orang lebih memilih untuk membuat tabel dalam format gambar dan menguploadnya ke postingan.

Sebagian blogger juga menggunakan microsoft word untuk membuat tabel dan menyimpannya sebagai web page. File yang disimpan dalam bentuk tersebut kemudian dibuka untuk melihat kode tabel. Kode itulah yang kemudian dicopy paste ke postingan dalam mode HTML. Akan tetapi, pada kesempatan ini kita akan membahas bagaimana cara membuat tabel menggunakan kode HTML.

Kode HTML Untuk Membuat Tabel

Sebelum membuat tabel, ada baiknya jika anda memahami terlebih dahulu dimensi suatu tabel. Sebagaimana yang anda lihat, tabel terdiri dari sejumlah baris dan kolom. Untuk membuat tabel dengan HTML, dibutuhkan beberapa tag yang berfungsi sebagai pembentuk tabel. Berikut beberapa contoh tabel dan kode yang digunakan untuk membuatnya.

  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 tulisan terhadap sisi sisi sel.
    ⇒ Warna dan letak teks dapat 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 beberapa sel menjadi satu. Fungsi ini dapat menggabungkan beberapa baris atau kolom menjadi satu. Untuk menggabungkan baris digunakan rowspan dan untuk menggabungkan kolom digunakan colspan. Agar lebih jelas langsung saja contoh praktiknya.
  1. 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. karena sudah ditambah rowspan, maka pada tag tabel baris ketiga hanya ada 2 tag <td></td>. Maksudnya pada kolom ketiga hanya ada dua baris.


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

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

Edutafsi.com adalah blog tentang bahan belajar. Gunakan menu atau penelusuran untuk menemukan bahan belajar yang ingin dipelajari.

0 comments :

Post a Comment