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 (table) HTML

    Oct 25 2013389 Dilihat

    membuat tabel dalam HTML

    Permisi agan2 igin2, kali ini saya akan sedikit cerita tentang cara membuat tabel dalam HTML. Tabel dalam website banyak digunakan untuk menyajikan informasi yang terdiri dari baris dan kolom agar tampak lebih rapi dan mudah dipahami. Dengan kode HTML sederhana Kita dapat membuat tabel statis , Informasi yang muncul dari data yang ditulis dalam kode HTML sederhana. Dalam web desain, tabel juga bisa membuat penampilan lebih cantik dan rapi . Dalam html tabel diawali dengan tag <table> dan diakhiri tag </table> ,kemudian di ikuti dengan tag <tr> (table rows) adalah untuk membuat baris baru pada tabel kemudian tag <td> (table data) adalah sebagai tempat data yang ditampilkan. Tabel bersarang (nested table) juga dapat dibuat dalam HTML . Berikut adalah contoh kode membuat table sederhana dalam html :

    <table border=”1″>
    <tr>
    <td>Baris 1 Kolom 1</td>
    <td>Baris 1 Kolom 2</td>
    </tr>
    <tr>
    <td>Baris 2 Kolom 1</td>
    <td>Baris 2 Kolom 2</td>
    </tr>
    <tr>
    <td>Baris 3 Kolom 1</td>
    <td>Baris 3 Kolom 2</td>
    </tr>
    </table>

    Hasil kode html tabel di atas adalah:

    Baris 1 Kolom 1 Baris 1 Kolom 2
    Baris 2 Kolom 1 Baris 2 Kolom 2
    Baris 3 Kolom 1 Baris 3 Kolom 2

    Keterangan tag dalam membuat tabel dan atribut html:

    a . tag <table> ….. </table>
    tag awal dan akhir membuat tabel di html . tag tabel memiliki beberapa atribut seperti height, width, border lainnya untuk mengatur tinggi tabel, lebar tabel, dan tebal garis tepi, dan masih banyak lagi atribut table dalam html.

    b . tag <th> ….. </th>
    Tag <th> pengganti tag <td> digunakan untuk membuat header titel dari baris maupun kolom. Secara default teks pada tag <th> menggunakan teks tebal dan letaknya di tengah pada baris.

    c . tag <caption> ….. </caption>
    Tag caption digunakan untuk membentuk judul pada table . Judul dapat ditandai dengan apa pun . Posisi default di bagian atas table.

    d . tag <tr> ….. </tr>
    Mendefinisika baris dalam tabel. Kita dapat mengatur teks dalam satu baris banyak kolom menggunakan : atribut color (warna), letak teks,dll seperti rata kiri, rata kanan, warna teks merah, dll.

    e . tag <td> ….. </td >
    tag td digunakan untuk membuat kolom tabel yang berisi data. Tag td memiliki beberapa atribut di antaranya color, background. Pada table kita bisa membuat banyak kolom dengan tag td.

    f . atribut <colspan>
    Atribut colspan pada html tabel digunakan untuk menggabungkan dua atau lebih kolom agar lemih menarik. Nilai bisa variasi tergantung kebutuhan, misalnya <td colspan=”2″>…</td>. Yang artinya menggabungkan 2 kolom.

    h. atribut <rowspan>

    Dalam html sederhana atribut rowspan digunakan untuk menggabungkan dua atau lebih baris pada tabel html. contoh: <td rowspan=”2″> artinya menggabungkan 2 baris menjadi satu baris. yang lainnya titetap 2 baris.

    Mengatur lebar dan tinggi tabel (table) html

    Kita bisa mengatur lebar table dan tinggi tabel dalam html dengan menggunakan atribut width dan height. Kita juga bisa mengatur tabel menggunakan CSS agar lebih indah dan cantik. he….! Ingat satuan dalam mengatur tinggi dan lebar tabel menggunakan satuan pixel dan persen.

    Berikut  contoh tabel sederhana dalam html dengan lebar300px dan  tinggi baris 1 adalah 20px. Atau bisa menggunakan persentase, contohnya width=40% yang berarti mempunyai lebar 40% dari ukuran halaman web/html.

    <table border=”1″ width=”300″ height=”100″>
    <tr>
    <tdstyle="height:40px;">Baris 1 Kolom 1</td>
    <td>Baris 1 Kolom 2</td>
    </tr>
    <tr>
    <td>Baris 2 Kolom 1</td>
    <td>Baris 2 Kolom 2</td>
    </tr>
    </table>

    Output dari pengaturan ukuran tabel html:

    Baris 1 Kolom 1 Baris 1 Kolom 2
    Baris 2 Kolom 1 Baris 2 Kolom 2

    Menggabungkan kolom dan baris pada tabel html

    Perintah untuk menggabungkan dua atau lebih baris dan kolom adalah atribut rowspan dan colspan seperti penjelasan di atas. Kita sebaiknya menggunakan atribut ini tidak banyak2 gan gin. Oke…..

    <table border=”1″>
    <tbody>
    <tr>
    <td style=”width: 50%;” rowspan=”2″>Gabungan 2 baris</td>
    <td>Baris 1 Kolom 2</td>
    </tr>
    <tr>
    <td>Baris 2 Kolom 2</td>
    </tr>
    <tr>
    <td colspan=”2″>Gabungan 2 kolom</td>
    <tr>
    <tbody>
    </table>

    Hasilnya dari gabungan dua kolom html:

    Gabungan 2 baris Baris 1 Kolom 2
    Baris 2 Kolom 2
    Gabungan 2 kolom

    Membuat background pada tabel html

    Kali ini saya cerita membuat tabel background agar lebih menarik. Untuk membuat background pada tabel kita gunakan atribut style seperti css dengan atrbut background. Berikut contoh tabel dengan background warna abu2  dengan heading warna biru.

    <table style=”background: yellow;” width=”75%” border=”1″>
    <tr>
    <th style=”background: green; width: 50%;”>Header Kolom 1</th>
    <th style=”background: green;”>Header Kolom 2</th>
    </tr>
    <tr>
    <td>Baris 1 Kolom 1</td>
    <td>Baris 1 Kolom 2</td>
    </tr>
    </table>

    Output kode html membuat bakground pada tabel html:

    Header Kolom 1 Header Kolom 2
    Baris 1 Kolom 1 Baris 1 Kolom 2

    Mengatur letak Tabel HTML pada halaman, apakah diletakan di kiri, kanan, atau tengah. Berikut cara mengatu letak tabel html dengan atribut align:

    <table border=”1″ align=”center”>  //tengah

    <table border=”1″ align=”right”>  //kanan

    <table border=”1″ align=”left”>  //kiri

    Contoh Membuat Website Statis dengan Tabel (Table) HTML Bisa agan lihat dibawah ini kode dan hasilnya:

    <html>
    <head>
    <title>Halaman Hobby</title>
    </head>
    <body bgcolor=”green”>
    <center>
    <table width=”60%” border=”1″ bgcolor=”white”>
    <tr>
    <td colspan=”2″ bgcolor=”yellow”><h1>Website Ganang</h1></td>
    </tr>
    <tr>
    <td width=”26%” bgcolor=”B6FAF8″>
    <a href=”biodata.html”> Halaman Biodata</a><br>
    <a href=”galery.html”> Halaman Galery</a>
    </td>
    <td width=”74%”>
    <h3>Halaman Hobby Ganang</h3>
    <p>Halaman ini berisi hobby saya dan kegemaran saya baik yang sering lakukan maupun jarang. </p>
    <p>Berikut Hobby saya:</p>
    <ol>
    <li>Lari-lari</li>
    <li>Badminton</li>
    <li>Bersepeda</li>
    <li>Internetan</li>
    <li>Memancing</li>
    </ol>
    </td>
    </tr>
    <tr>
    <td colspan=”2″ bgcolor=”yellow”><center>© Copyright 2014</center></td>
    </tr>
    </table>
    </center>
    </body>
    </html>

    Hasil Membuat Tabel HTML untuk Website Statis sebagai berikut:

    Selain Membuat HTML untuk website, Tabel HTML juga digunaka untuk daftar no, nama dan kelas seperti tabel pada umumnya. Berikut cara membuat tabel HTML untuk daftar nama atau list.

    <table border=”1″>
    <tr bgcolor=”yellow”>
    <td>No</td>
    <td>Nama</td>
    <td>Kelas</td>
    </tr>
    <tr>
    <td>1</td>
    <td>Ganang Julianto</td>
    <td>XI-TM1</td>
    </tr>
    <tr>
    <td>2</td>
    <td>Arif Fudin</td>
    <td>XI-TM2</td>
    </tr>
    <tr>
    <td>3</td>
    <td>Bayu Muhammad</td>
    <td>XI-TM2</td>
    </tr>
    <tr>
    <td>4</td>
    <td>Dimas Subagyo</td>
    <td>XI-TM1</td>
    </tr>
    </table>

    Hasil Membuat daftar nama dengan tabel HTML sebagai berikut:

    Nah itulah sedikita sharing saya mengenai cara mudah membuat tabel dan pengaturannya.  Semoga bermanfaat ya. Mkasih, jgn komentar ya!! he

    Share to

    Related News

    Membuat Tabel Menjadi Menarik di HTML

    Membuat Tabel Menjadi Menarik di HTML

    by Nov 08 2013

    Tutorial HTML | Saya mencoba sharing tentang cara membuat tabel html di postingan sebelumnya. Nam...

    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 Jilbab Segi Empat Yang Bagus Untuk Kaum Wanita

    10 Merk Jilbab Segi Empat Yang Bagus Untuk Kaum...


    Merk Jilbab Segi Empat Yang Bagus Untuk Kaum Wanita: Jilbab segi empat adalah salah satu jenis jilbab yang populer di kalangan wanita muslim. De...

    05 Jun 2023
    Cara Mengatasi HP Xiaomi Tidak Bisa Disentuh

    Cara Mengatasi HP Xiaomi Tidak Bisa Disentuh (Y...


    Cara Mengatasi HP Xiaomi Tidak Bisa Disentuh: Apakah Anda mengalami masalah dengan layar sentuh pada HP Xiaomi Anda? Jika ya, Anda tidak sendiri...

    14 Jul 2023
    Cara Memperbarui GBWhatsApp

    Cara Memperbarui GBWhatsApp (Update) dengan Ben...


    Cara Memperbarui GBWhatsApp: GBWhatsApp adalah salah satu aplikasi pesan populer yang digunakan oleh banyak pengguna ponsel cerdas di seluruh du...

    05 Oct 2023
    Cara Mengembalikan Akun Facebook

    (Update) Cara Mengembalikan Akun Facebook: Tips...


    Cara Mengembalikan Akun Facebook: Selamat datang di artikel ini yang akan membahas cara mengembalikan akun Facebook yang hilang. Akun Facebook m...

    16 May 2023
    Cara Cek Saldo di ATM BRI

    Cara Cek Saldo di ATM BRI: Panduan Lengkap dan ...


    Cara Cek Saldo di ATM BRI: Dalam dunia perbankan modern, cek saldo rekening adalah hal penting untuk mengawasi keuangan Anda. ATM BRI (Bank Raky...

    26 Aug 2023
    back to top