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 2013403 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

    Renovasi Bongkar Pasang Rangka Atap Baja Ringan

    Renovasi Bongkar Pasang Rangka Atap Baja Ringan...


    Renovasi Bongkar Pasang Rangka Atap Baja Ringan, Ketika Anda merenovasi rumah atau membangun struktur baru, atap memainkan peran penting dalam m...

    21 Jun 2023
    Kemegahan Candi Borobudur

    Menyelami Kemegahan Candi Borobudur: Perjalanan...


    Candi Borobudur, Indonesia adalah negeri yang kaya akan warisan budaya, dan salah satu harta ikoniknya adalah Candi Borobudur, kompleks candi ku...

    30 Aug 2023
    Cara Membuka Blokiran di Instagram

    5 Cara Membuka Blokiran di Instagram (Yang Bena...


    Cara Membuka Blokiran di Instagram: Instagram telah menjadi salah satu platform media sosial paling populer di dunia. Meskipun Instagram memberi...

    28 Jul 2023
    Cara Cek Baterai Health iPhone

    Cara Cek Baterai Health iPhone (4 Langkah), Cep...


    Cara Cek Baterai Health iPhone: Baterai adalah salah satu komponen penting dalam sebuah iPhone. Tanpa baterai yang sehat dan berfungsi dengan ba...

    15 Jul 2023
    Cara Mereset HP Samsung J2 Prime

    Cara Reset HP Samsung J2 Prime: Solusi Sederhan...


    Cara Reset HP Samsung J2 Prime: Apakah Anda memiliki Samsung J2 Prime dan mengalami masalah dengan kinerjanya? Jika ya, mungkin mereset HP Anda ...

    16 May 2023
    back to top