Breaking News
Categories
  • Alat Berat
  • Anak
  • Android
  • Artikel
  • Atap Baja Ringan
  • Baja Ringan
  • Bootstrap
  • Cars
  • Codeigniter
  • Facebook
  • Fotografer
  • Fotografi
  • Gadgets
  • Health
  • HTML
  • Html Font
  • Html Table
  • informasi
  • Inspirations
  • jQuery
  • Kanopi
  • Lifestyle
  • Nintendo
  • Obat
  • Pariwisata
  • Php
  • Plafon
  • Reviews
  • Sistem Pakar
  • Technology
  • TikTok
  • Trends
  • Uncategorized
  • War
  • whatsapp
  • Windows
  • WordPress
  • Membuat Tabel Menjadi Menarik di HTML

    Nov 08 20132.009 Dilihat

    Membuat Tabel Menjadi Menarik di HTML


    Tutorial HTML
     | Saya mencoba sharing tentang cara membuat tabel html di postingan sebelumnya. Namun kali ini saya akan menambahkan beberapa triks untuk merubah tampilan tabel pada html menjadi lebih menarik dan cantik. custom tabel pada html sangat penting jika kita menginginkan suatu informasi dalam bentuk tabel agar lebih menarik untuk di baca. Tabel menarik bisa dibuat dengan mengatur warna background dan garis tepi, mengatur jenis dan ukuran garis tepi, dll. Oke langsung saja kita mulai sharing membuat tabel html menjadi menarik dan cantik:

    1. Custom Border atau style border atau jenis garis tepi pada html.

    Dalam membuat tabel (table) menjadi menarik di html, border mempunyai peranan yang cukup penting. Border style pada tabel html digunakan untuk memilih jenis garis tepi suatu tabel agar lebih menarik. Beberapa jenis border yang ada antara lain: dotted, dashed, solid, double, groove, ridge, inset, outset. Untuk lebih jelasnya kita liat code html dibawah ini merubah garis tepi pada tabel html:

    <table bordercolor=”#000000″>
    <tr><th width=”200″ style=”border: 5px dashed;”> jenis border dashed</th></tr>
    <tr><th width=”200″ style=”border: 5px dotted;”>jenis border dotted</th></tr>
    <tr><th width=”200″ style=”border: 5px double;”>jenis border double</th></tr>
    <tr><th width=”200″ style=”border: 5px groove;”>jenis border groove</th></tr>
    <tr><th width=”200″ style=”border: 5px ridge;”>jenis border ridge</th></tr>
    <tr><th width=”200″ style=”border: 5px inset;”> jenis border inset</th></tr>
    <tr><th width=”200″ style=”border: 5px outset;”>jenis border outset</th></tr>
    </table>

    Dan Hasil dari pengaturan jenis garis tepi tabel pada html di atas adalah:

    jenis border dashed
    jenis border dotted
    jenis border double
    jenis border groove
    jenis border ridge
    jenis border inset
    jenis border outset

    2. Memberikan warna tabel baik border atau pun background

    Setelah mengatur jenis garis tepi / border pada tabel (table) di html, maka untuk membuat tabel menjadi menarik selanjutnya kita juga perlu mengubah warna background tabel dan warna border di html. Nilai Warna background bisa berupa abjad atau angka yang didapat di photoshop. Langsung saja kita membuat warna background pada tabel html :

    <table>
    <tr><th width=”200″ style=”border: 5px dashed red;”> jenis border dashed</th></tr>
    <tr><th width=”200″ style=”border: 5px dotted yellow;”>jenis border dotted</th></tr>
    <tr><th width=”200″ style=”border: 5px double blue;”>jenis border double</th></tr>
    <tr><th width=”200″ style=”border: 5px groove gray;”>jenis border groove</th></tr>
    <tr><th width=”200″ style=”border: 5px ridge chocolate;”>jenis border ridge</th></tr>
    <tr><th width=”200″ style=”border: 5px inset gold;”> jenis border inset</th></tr>
    <tr><th width=”200″ style=”border: 5px outset green;”>jenis border outset</th></tr>
    </table>

    Hasil dari kode html merubah warna border pada html dalah berikut :

    jenis border dashed
    jenis border dotted
    jenis border double
    jenis border groove
    jenis border ridge
    jenis border inset
    jenis border outset

    3. Memberikan background pada tabel (table) html

    Oke selanjutnya kita memcoba untuk memberikan warna background pada tabel html atau background gambar pada tabel html. Pertama kita siapkan warna background berupa nama warna atau hex sesuai keinginan. jika menggunaka gambar, letakkan gambar satu folder pada file tabel yang kita buat. Berikut contoh kode membuat latar warna / background pada tabel html :

    <table bgcolor=”gray”>
    <tr><th width=”200″ style=”border: 5px dashed red;”> jenis border dashed</th></tr>
    <tr><th width=”200″ style=”border: 5px dotted yellow;”>jenis border dotted</th></tr>
    <tr><th width=”200″ style=”border: 5px double blue;”>jenis border double</th></tr>
    <tr><th width=”200″ style=”border: 5px groove gray;”>jenis border groove</th></tr>
    <tr><th width=”200″ style=”border: 5px ridge chocolate;”>jenis border ridge</th></tr>
    <tr><th width=”200″ style=”border: 5px inset gold;”> jenis border inset</th></tr>
    <tr><th width=”200″ style=”border: 5px outset green;”>jenis border outset</th></tr>
    </table>

    Dan hasil memberi warna latar / background di html adalah :

    jenis border dashed
    jenis border dotted
    jenis border double
    jenis border groove
    jenis border ridge
    jenis border inset
    jenis border outset

    Dan untuk background gambar pada tabel html cukup ganti code bgcolor dengan “background=nama_gambar.jpg” seperti itu saja. Contoh merubah background tabel dengan gambar:

    <table border="1" background="background.gif/jpg/png">

    Baiklah itu tadi sharing saya mengenai cara membuat tabel (table) html menjadi tampak lebih menarik dengan merubah jenis border dan memberi warna background pada html dengan mudah. Jika kurang puas komentarnya di tunggu ya. Makasih salam sejahtera…….semoga bermanfaat.

    Baca juga tutorial html Membuat Tabel HTML Menjadi Keren dengan jQuery.

    Updated: November 7, 2014 — 11:50 am

    Share to

    Related News

    membuat tabel dalam HTML

    Membuat Tabel (table) HTML

    by Oct 25 2013

    Permisi agan2 igin2, kali ini saya akan sedikit cerita tentang cara membuat tabel dalam HTML. Tabel...

    No comments yet.

    Please write your comment.

    Your email will not be published. Fields marked with an asterisk (*) must be filled.

    *

    *

    Youtube

    Other News

    Merk AC Terbaik

    10 Merk AC Terbaik Di Indonesia: Memilih Kualit...


    Merk AC Terbaik: Air conditioner atau AC adalah perangkat penting di rumah atau tempat kerja kita untuk menciptakan lingkungan yang nyaman dan s...

    16 May 2023
    Cara Menampilkan Lirik di Spotify

    Cara Menampilkan Lirik di Spotify dengan 5 Meto...


    Cara Menampilkan Lirik di Spotify: Spotify adalah platform streaming musik yang sangat populer di seluruh dunia. Meskipun banyak dari kita menik...

    07 Oct 2023
    Cara Cek Kartu Telkomsel 3G atau 4G

    Cara Cek Kartu Telkomsel 3G atau 4G yang Paling...


    Cara Cek Kartu Telkomsel 3G atau 4G: Kartu Telkomsel adalah salah satu penyedia layanan seluler terbesar di Indonesia. Saat ini, Telkomsel menaw...

    14 Jul 2023
    Cara Mengganti Tema WhatsApp Tanpa Aplikasi

    Cara Mengganti Tema WhatsApp Tanpa Aplikasi: Co...


    Cara Mengganti Tema WhatsApp Tanpa Aplikasi: WhatsApp adalah salah satu aplikasi perpesanan paling populer di dunia saat ini. Jutaan orang mengg...

    31 May 2023
    Cara Beli Kuota Telkomsel Lewat Telepon

    Cara Beli Kuota Telkomsel Lewat Telepon, Begini...


    Cara Beli Kuota Telkomsel Lewat Telepon: Telkomsel adalah salah satu penyedia layanan telekomunikasi terbesar di Indonesia. Jika Anda ingin memb...

    26 Jun 2023
    back to top