Monitor Teknologi
Banner
  • PC & MOBILE
    • Apps
    • Games
    • Hardware
    • Internet
    • Security
    • Tips & Trick
  • Networking
    • Cisco
    • MikroTik
    • SysAdmin
  • Programming
Home » Bagaimana Cara Membuat Tabel Di HTML?

Bagaimana Cara Membuat Tabel Di HTML?

Mei 18, 2019
Cara Membuat Tabel Di HTML
3.9K

Halo Sob! setelah kalian mempelajari Macam-Macam Lists Di HTML Dan Cara Membuatnya dalam postingan sebelumnya. Artikel yang admin buat kali ini akan menjelaskan Bagaimana Cara Membuat Tabel Di HTML. Oke langsung saja kita ke pembahasannya Cekidot!

Element table atau biasa kita sebut tabel merupakan Element html yang digunakan untuk membuat sebuah tabel di halaman html. dalam membuat sebuah tabel kita harus memperhatikan beberapa unsur diantaranya:

  1. Baris atau susunan horizontal dari kanan ke kiri
  2. Kolom atau susunan vertical dari atas ke bawah
  3. Sel atau tempat untuk menginput dan menampung data
  4. Garis

Nah itu adalah unsur utama dalam sebuah tabel jika kita ingin membuat sebuah tabel di HTML kita membutuhkan sebuah tag-tag html yang dikhususkan untuk membuat tabel.

DAFTAR ISI

  • Tag-Tag HTML Untuk Membuat Table
  • Atribut Table
  • Kesimpulan

Tag-Tag HTML Untuk Membuat Table

1. <table> – untuk mengawali dalam membuat tabel

2. <tr> atau table row – digunakan untuk membuat sebuah baris di dalam tabel

3. <th> atau table header – digunakan sebagai header di dalam tabel

4. <td> atau table data – digunakan sebagai kolom dan cell atau tempat untuk menginput dan menampung data

5. <tbody> atau table body – digunakan untuk membungkus bagian badan tabel

6. <thead> atau table header – digunakan untuk membungkus bagian kepala tabel

7. <tfoot> atau table footer – digunakan untuk membungkus bagian bawah dari tabel

Tetapi tag yang umum atau sering digunakan dalam membuat sebuah tabel ada 3 yaitu:

1. <table>
2. <tr>
3. <td>

Contoh:

<!DOCTYPE html> 
<html>
  <head>
    <title>Cara Membuat Tabel Di HTML</title>
  </head>
  <body>
    <table style="width: 50%;">
      <tr>
        <th>Nama</th>
        <th>Jurusan</th>
        <th>No Absen</th>
      </tr>
      <tr>
        <td>Doni</td>
        <td>TKJ</td>
        <td>15</td>
      </tr>
      <tr>
        <td>Dono</td>
        <td>TKJ</td>
        <td>16</td>
      </tr>
      <tr>
        <td>Dini</td>
        <td>TKJ</td>
        <td>17</td>
      </tr>
    </table>
    <br><br>
    <hr>
    <table style="width: 50%;">
      <tr>
        <td>Nama</td>
        <td>Jurusan</td>
        <td>No Absen</td>
      </tr>
      <tr>
        <td>Doni</td>
        <td>TKJ</td>
        <td>15</td>
      </tr>
      <tr>
        <td>Dono</td>
        <td>TKJ</td>
        <td>16</td>
      </tr>
      <tr>
        <td>Dini</td>
        <td>TKJ</td>
        <td>17</td>
      </tr>
    </table>
  </body>
</html>

Hasilnya:

Bagaimana Cara Membuat Tabel Di HTML? 1

Bisa dilihat di gambar tersebut kita memiliki 2 tabel dengan berjumlah 4 baris atau <tr> (table row) dan setiap barisnya kita memiliki 3 kolom <td> (table data). Kalau kita lihat tabel pertama menggunakan <th> sedangkan tabel kedua tanpa menggunakan <th>. Bisa dilihat perbedaanya jika kita menggunakan <th>  (table heading), text yang berada di dalam table heading tersebut tidak akan bersatu dengan tag <td>.

Atribut Table

Element table juga memiliki attribut yang sangat berguna untuk memaksimalkan tampilan tabel diantarnya yaitu:

1. Border atau garis tabel
2. Cellspacing atau jarak antara cell
3. Cellpadding atau jarak didalam sebuah cell

Contoh:

<!DOCTYPE html> 
<html>
  <head>
    <title>Cara Membuat Tabel Di HTML</title>
  </head>
  <body>
    <table border="3" cellspacing="10" cellpadding="5">
      <tr>
        <td>HTML</td>
        <td>PHP</td>
      </tr>
      <tr>
        <td>CSS</td>
        <td>JavaScript</td>
      </tr>
    </table>
  </body>
</html>

Hasilnya:

Bagaimana Cara Membuat Tabel Di HTML? 2

Bisa dilihat pada gambar tersebut bahwa garis-garis adalah bordernya, pemberi jarak anatara <td> adalah cellspacing, dan pemberi jarak didalam sebuah <td> adalah cellpadding.

Jika kita ingin menggabungkan 2 buah cell, biasa disebut dengan merging atau jika kalian sering menggunakan excel pasti kalian tidak asing dengan fitur merge cells. Nah untuk membuatnya di Tabel HTML kita bisa menggunakan 2 attribut ini:

1. colspan – digunakan untuk menggabungkan 2 tabel yang horizontal
2. rowspan – digunakan untuk menggabungkan 2 tabel yang vertical

Contoh:

<!DOCTYPE html> 
<html>
  <head>
    <title>Cara Membuat Tabel Di HTML</title>
  </head>
  <body>
    <table style="width: 50%;" border="3" cellspacing="0" cellpadding="4">
      <tr>
        <th rowspan="3">Rowspan</th>
        <th colspan="4">Colspan</th>
      </tr>
      <tr>
        <td>Kolom 1 Baris 1</td>
        <td>Kolom 1 Baris 2</td>
        <td>Kolom 1 Baris 3</td>
      </tr>
      <tr>
        <td>Kolom 2 Baris 1</td>
        <td>kolom 2 Baris 2</td>
        <td>kolom 2 Baris 3</td>
      </tr>
    </table>
  </body>
</html>

Hasilnya:

Bagaimana Cara Membuat Tabel Di HTML? 3

Bisa di gambar tersebut jika kita memberikan rowspan sebanyak 3 maka tiga kolom ke bawah atau vertical akan digabungkan sedangkan jika kita memberikan colspan sebanyak 3 maka tiga kolom ke samping atau horizontal akan di gabungkan

Kesimpulan

Jadi Tabel itu terdiri dari baris, kolom, sel, dan garis. untuk membuat tabel di HTML dibutuhkan minimal 3 tag utama yaitu <table>,<tr>, dan <td>. untuk membuat tampilan tabel agar lebih menarik gunakan attribut table.


Sekian artikel Cara Membuat Tabel Di HTML. Nantikan artikel menarik lainnya dan jangan lupa share artikel ini ke teman-teman kalian. Terimakasih…

HTML
Share FacebookTwitterTumblrWhatsappTelegram
Resa Risyan

Hanya orang biasa yang ingin membagikan sedikit pengetahuannya mudah-mudahan ilmu yang saya berikan dapat bermanfaat bagi kita semua. Ingatlah! ilmu yang bermanfaat adalah investasi dunia akhirat.

Subscribe
Notify of
8 Comments
Newest
Oldest
Inline Feedbacks
View all comments
Reza Pahlevi
3 years ago

perkenalkan nama saya reza pahlevi dari kampus stmik atma luhur pangkalpinang, web tentang cara membuat tabel html yang kakak buat sangat mudah dipahami dan bermanfaat bagi saya yang baru belajar tentang cara pembuatan web. semoga web yang kaka buat ini semakin berkembang kedepanya terimakasih kak.

Reply
admin
Reply to  Reza Pahlevi
3 years ago

Ok sama-sama gan

Reply
PEGI ANGGRAINI
3 years ago

terima kasih kak atas artikelnya yang sangat bermanfaat bagi saya yang baru belajar dalam HTMLnya,artikelnyua sangat bermanfaat dan sangat membantu dalam perkuliahan saya,semoga kedepannya kakak makin sukses dan dapat membagikan ilmunya lagi ke saya dan saya ucapkan terima kasih.perkenalkan nama saya Pegi Anggraini dari kampus STMIK ATMA LUHUR.

Reply
admin
Reply to  PEGI ANGGRAINI
3 years ago

Sama-sama Sis, semoga bermanfaat artikelnya

Reply
Rellyta agustine
3 years ago

waahhh artikel nya sangat membantu banggat apa lagi disertai dengan gambar jadi memudahkan saya,mudah dimengarti jadi gak pusing-pusing karna da contonya makasih banget min…!! into dulu NAMA RELLYTA AGUSTINE.

Reply
admin
Reply to  Rellyta agustine
3 years ago

Ok! Sis sama-sama, semoga bermanfaat

Reply
MEIREZA SITI ASSYIFA
3 years ago

ihh saya suka banget sama artikelnya, karena dijelaskan secara rincii dan langsung di contohkan.. saya ga nyesel deh buka artikel ini, karna saya jadi bisa membuat tabel di html. terimakasih ya sudah membuat artikel dan nge share ilmu ini ke kita semua, sangat bermanfaat untuk saya dan temen temen semua pastinya. semoga kedepannya dapat menulis artikel lainnya ya.. perkenalkan nama saya MEIREZA SITI ASSYIFA.

Reply
admin
Reply to  MEIREZA SITI ASSYIFA
3 years ago

Ok Sis, semoga bermanfaat

Reply

ARTIKEL TERBARU

  • Cheat The Sims 2 Lengkap Untuk PC Dan PS2 Bahasa Indonesia

    Juni 10, 2023
  • 7 Manfaat IoT Untuk Mengoptimalkan Kinerja Bisnis

    Juni 2, 2023
  • Kumpulan Cheat The Sims 4 Lengkap Bahasa Indonesia

    Mei 26, 2023
  • Kumpulan Kode Cheat Winning Eleven PS2 Terbaru 2023

    Mei 17, 2023
  • 7 AI Voice Generator Terbaik Yang Dapat Meningkatkan Produktivitas

    Mei 9, 2023
  • Facebook
  • Twitter
  • Linkedin
  • Tumblr
  • Telegram
  • About
  • Contact US
  • Privacy Policy
  • Terms of Service

Copyright © 2022 www.monitorteknologi.com

  • PC & MOBILE
    • Apps
    • Games
    • Hardware
    • Internet
    • Security
    • Tips & Trick
  • Networking
    • Cisco
    • MikroTik
    • SysAdmin
  • Programming
wpDiscuz