Cara Membuat Tabel di HTML

Salah satu cara untuk menampilkan sebuat data secara terstruktur adalah dengan menyajikannya dalam bentuk tabel. Nah tabel tidak hanya dapat dibuat dengan menggunakan media ketik seperti Microsoft Word, Excel dan lain sebagainya. Tetapi, tabel juga dapat dibuat dengan menggunakan bahasa markup standar seperti HTML yang caranya juga tidak terlalu sulit.

Seperti apa cara membuat tabel di HTML?

Nah buat sobat yang ingin menyajikan data dalam bentuk tabel tidak usah khawatir, karena soabt telah membaca artikel yang tepat. Disini akan dijelaskan bagimana cara mudah membuat tabel di HTML. Berikut ini pembahasannya.

1. Tag HTML yang digunakan untuk membuat table
2. Contoh struktur kode tabel HTML
3. Penjelasan contoh
4. Penutupan

Tag yang Digunakan Untuk Membuat Tabel HTML

Sebelum memulai membuat tabel, hal pertama yang perlu diketahui adalah tag-tag apa saja yang digunakan untuk membuat sebuah tabel dengan utuh. Oleh karena itu, untuk membuat sebuah tabel HTML yang utuh setidaknya dibutuhkan 3 macam tag, yaitu <table>, <tr> dan <td>. Berikut ini penjelasannya:

• Tag <table>
  
  Tag tabel adalah tag yang paling penting dalam membuat sebuat tabel HTML. Karena, dalam bahasa pemrograman, tabel didefinisikan dengan tag awal, yaitu <table> ini.
• Tag <tr>
  
  Tag <tr>, dalam pembuatan tabel tag ini digunakan untuk mendefinisikan atau membuat baris baru dalam tabel.
• Tag <td>
  
  Tag <td> digunakan untuk mendefinisikan atau membuat kolom dalam tabel HTML

Contoh Pembuatan Tabel di HTML

Setelah mengetahu tag-tag yang digunakan untuk membuat tabel HTML. Selanjutnya agar lebih jelas, berikut ini contoh struktur kode HTML dan penggunaan tag <table>, <tr> dan <td> untuk membuat tabel sebuah yang utuh.

<table border="1">
    <tr>
        <td>No</td>
        <td>Nama</td>
        <td>Usia (tahun)</td>
    </tr>
    <tr>
        <td>1.</td>
        <td>Feri Irawan</td>
        <td>19</td>
    </tr>
    <tr>
        <td>2.</td>
        <td>Muhammad Ali</td>
        <td>20</td>
    </tr>
</table>

Untuk hasilnya kurang lebih seperti berikut ini.

No	Nama	Usia (tahun)
1.	Feri Irawan	19
2.	Muhammad Ali	20

Penjelasan Contoh

• Tag untuk membuat tabel HTML sama dengan tag lainnya, yaitu memliki tag pembuka dan penutup.
• Atribut border dideklarasikan untuk memenentukan tebal garis tepi tabel. Dengan kata lain, semakin tinggi nilainya maka akan semakin tebal pula garis tepi tabel.
• Tag <tr> diletakkan diantara tag <table>, gunanya untuk membuat baris baru dalam tabel. Semakin banyak tag <tr> maka semakin banyak juga bari dalam tabel.
• Tag <td> dideklarasikan untuk menentukan banyaknya jumlah kolom dalam satu baris. Tag ini diletakkan diantara tag <tr>. Dengan kata lain, semakin banyak tag <td> dalam satu tag <tr>, maka semakin banyak pula kolom dalam satu baris.
  

  Pada contoh diatas terdapat 3 tag <td> dalan satu tag <tr>, artinya 1 baris terdapat 3 kolom.

• Tag <td> pertama yang ada di dalam tag <tr> merupakan kolom pertama.
• Tag <td> kedua yang ada di dalam tag <tr> merupakan kolom kedua.
• Tag <td> ketiga yang ada di dalam tag <tr> merupakan kolom ketiga. Begitu pun dengan tag <td> berikutnya.

Nah, jadi itulah penjelasan singkat dari contoh kode HTML untuk membuat tabel yang utuh.

Dalam membuat tabel sebenarnya memerluka 6 macam tag HTML, seperti <table>, <thead>, <tbody>, <th>, <tr>, <td>. Namun, cara diatas ini juga sering digunakan karena tampilannya juga tidak jauh berbeda jika menggunakan 6 tag tersebut dan untuk membuanya juga cukup cepat.

Penutupan

Nah, kira-kira seperti itu cara pembuatan tabel di HTML yang sempat saya bagikan kali ini. Bagaimana, caranya sangat mudah, bukan?

Sekian artikel kali ini, semoga artikel yang saya bagikan kali ini dapat bermanfaat untuk menambah pengetahuan sobat dalam belajar pemrograman markup standar HTML dan memudahkan sobat dalam menyajikan data di dokumen HTML. Serta terima kasih telah berkunjung ke artikel ini dan nantikan artikel coding berikutnya dari Bang Feri Blog.

Salam Coding!