Cara Menghasilkan Tabel Dan Merge Cell Dengan Arahan Html

Seba­gai seo­rang blog­ger anda mungkin per­nah men­gala­mi kesusa­han dikala anda ingin mem­per­li­hatkan suatu tabel dalam postin­gan anda alasan­nya yakni sajian pada edi­tor postin­gan tidak menawarkan fitur terse­but. Seba­gai alter­natif umum­nya orang lebih memu­tuskan untuk meng­hasilkan tabel dalam for­mat gam­bar dan men­gu­pload­nya ke postin­gan.

Seba­gian blog­ger juga meng­gu­nakan microsoft word untuk meng­hasilkan tabel dan meny­im­pan­nya selaku web page. File yang dis­im­pan dalam ben­tuk terse­but lalu dibu­ka untuk menyak­sikan ara­han tabel. Kode itu­lah yang lalu dicopy paste ke postin­gan dalam mode HTML. Akan tetapi , pada poten­si ini kita akan mem­ba­has bagaimana cara meng­hasilkan tabel meng­gu­nakan ara­han HTML.

Bacaan Lain­nya

Kode HTML Untuk Membuat Tabel

Sebelum meng­hasilkan tabel , ada baiknya apa­bi­la anda menger­ti apala­gi dulu dimen­si suatu tabel. Seba­gaimana yang anda lihat , tabel berisikan sejum­lah baris dan kolom. Untuk meng­hasilkan tabel den­gan HTML , dike­hen­da­ki beber­a­pa tag yang berfungsi selaku pem­ben­tuk tabel. Berikut beber­a­pa teladan tabel dan ara­han yang digu­nakan untuk mem­bu­at­nya.

  1. Tabel 2 baris 2 kolom
    Baris 1 kolom 1 Baris 1 kolom 2
    Baris 2 kolom1 Baris 2 kolom 2

    Tag :

                   

           

        


                

           

       


     

    Baris 1 kolom 1 Baris 1 kolom 2
    Baris 2 kolom1 Baris 2 kolom 2

    Keteran­gan :
    ⇒ Biru : tag untuk tabel baris per­ta­ma
    ⇒ Mer­ah : tag untuk tabel baris ked­ua.
    ⇒ cell­padding : untuk men­ert­ibkan jarak gore­san pena ter­hadap segi sisi sel.
    ⇒ War­na dan letak teks sang­gup anda sesuaikan sesuai keper­lu­an anda.
  2. Tabel 6 baris 3 kolom
    No Vari­abel 1 Vari­abel 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 :
             

        

        

               
      


           

        

        

      

      

        

        

        

      


      

        

       

       

     

     

       

       

       

     


     

       

       

       

      

     

    No Vari­abel 1 Vari­abel 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

Kode HTML Untuk Merge Cell

Merge cell ialah fungsi untuk memadukan beber­a­pa sel men­ja­di satu. Fungsi ini sang­gup memadukan beber­a­pa baris atau kolom men­ja­di satu. Untuk memadukan baris digu­nakan rows­pan dan untuk memadukan kolom digu­nakan colspan. Agar lebih ter­per­in­ci prib­a­di saja teladan prak­tiknya.

  1. Meng­gabungkan beber­a­pa baris
    No Jenis Keteran­gan
    1 Tebal Kete­bal­an ter­gan­tung merek.
    2 Tip­is

    Tag :

           

       

       

     

     

       

       

        <td rowspan=“2” style=“text-align: left;”>Ketebalan ter­gan­tung merek.

     

     

       

       

     

     

    No Jenis Keteran­gan
    1
    Tebal
    2
    Tip­is

    Keteran­gan :
    rowspan=“2” : memadukan dua baris men­ja­di 1 sel.
    Per­hatikan bah­wa letak rows­pan bera­da pada tag untuk meng­hasilkan tabel baris ked­ua. alasan­nya yakni telah dita­m­bah rows­pan , maka pada tag tabel baris keti­ga cuma ada 2 tag

    . Mak­sud­nya pada kolom keti­ga cuma ada dua baris.

  2. Meng­gabungkan beber­a­pa kolom
  3. No Vari­abel
    1 Kete­bal­an Ben­tuk
    2 Keku­atan war­na
    Tag :
           

        <td colspan=“2” style=“background: #f5f5f5; text-align: center;”>Variabel

      

     

       

       

       

     

     

       

       

       

     

     

    No
    1
    Kete­bal­an Ben­tuk
    2
    Keku­atan war­na

    Keteran­gan :
    Colspan=“2” : memadukan dua kolom men­ja­di satu sel.
    Per­hatikan bah­wa letak colspan bera­da pada tag untuk tabel baris per­ta­ma. Den­gan begi­tu , pada baris per­ta­ma cuma ada dua kolom.

Demikian cara meng­hasilkan tabel dan merge cell den­gan ara­han HTML , supaya berman­faat. Jika menu­rut anda postin­gan ini berhar­ga , bagikan­lah ter­hadap teman-teman anda di social media. Ter­i­makasih.

Share ke Face­book »Share ke Twit­ter »
Cafeberita.com yakni blog ihw­al materi bela­jar. Gunakan sajian atau pen­car­i­an untuk men­da­p­atkan materi men­car ilmu yang ingin dipela­jari.

Pos terkait