Home / HTML / Cara Membuat Tabel di HTML

Cara Membuat Tabel di HTML

By Aris Munandar

17 April 2016

in HTML

Berikut ini adalah tutorial cara membuat tabel di html dengan mudah, ada banyak fungsi dalam penggunaan tabel, misalnya jaman dahulu tabel di manfaatkan untuk pembuatan kolom pada website, hanya saja sekarang di era web modern hal itu tentu sangat jadul sekali. Sedangkan tabel bisa juga di manfaatkan untuk menampilkan data terstruktur yang di ambil langsung dari database, misalnya jika ingin menampilkan sebuah artikel di halaman backend, tentu tidak semua ditampilkan, biasanya hanya judul dan deskripsi singkat yang disusun di tabel tabel, sehingga mempermudah programmer dalam membentuk susunan yang rapih.

Daftar Isi:

Penulisan Tabel di HTML

Untuk dapat membuat tabel di HTML menggunakan tag <table> dimana tag ini salah satu tag yang ditulis secara berpasangan yakni membutuhkan tag pembuka <table> dan penutup </table>, sedangkan untuk membuat baris di dalam tabel menggunakan tag <tr></tr> atau table row, dan untuk pembuatan kolom yaitu menggunakan tag </td></td> atau table data. Di samping itu beberap hal yang perlu diketahui yakni apa saja atribut-atribut yang dapat di gunakan pada tag table, berikut ini daftarnya.

**Atribut Table HTML**
Atribut	Nilai	Keterangan
Align	left, right, center	Digunakan untuk perataan keseluruhan teks didalam tabel
bgcolor	rgb(x,x,x), #xxxxxx, namawarna	Digunakan untuk pemberian warna latar pada tabel
Border	1, 0	Untuk menampilkan garis tabel.
cellpading	Pixels	Digunakan untuk memberikan jarak antara sel.
cellspacing	Pixels	Digunakan untuk memberikan jarak antara sel dan tabel.
width	Pixels, %	Untuk menentukan lebar tabel.

Perlu pembaca ingat bahwa tabel di atas tidak sepenuhnya lengkap, pembaca dapat mencari referensi di website lain seperti w3schools dan lain-lain.

Contoh Membuat Tabel di HTML

Berikut ini adalah contoh untuk membuat tabel di html dengan sederhana, silahkan buka text editor kesukaan anda, lalu ketikan kode dibawah ini.

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Pembuatan Tabel Sederhana</title>
</head>
<body>
    <h1>Contoh Tabel Sederhana</h1>
    <table border="1">
        <tr>
            <td>Ini adalah contoh tabel sederhana</td>
            <td>Ini adalah contoh tabel sederhana</td>
        </tr>
        <tr>
            <td>Ini adalah contoh tabel sederhana</td>
            <td>Ini adalah contoh tabel sederhana</td>
        </tr>
    </table>
</body>
</html>

Dari kode tabel html diatas maka seharusnya akan muncul seperti gambar di bawah ini.

Cara Membuat Tabel di HTML

Menambahkan Atribut Cellspacing pada Tabel

Selain itu anda juga dapat mengatur jarak antara sel dengan tabel, dimana akan ada ruang yang dapat disesuaikan antara garis utama bagian luar dan garis antar sel dengan menggunakan atribut cellspacing, berikut ini contoh kode nya.

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Pembuatan Tabel Sederhana</title>
</head>
<body>
    <h1>Contoh Tabel Sederhana Dengan Cellspacing</h1>
    <table border="1" cellspacing="10px">
        <tr>
            <td>Ini adalah contoh tabel sederhana</td>
            <td>Ini adalah contoh tabel sederhana</td>
        </tr>
        <tr>
            <td>Ini adalah contoh tabel sederhana</td>
            <td>Ini adalah contoh tabel sederhana</td>
        </tr>
    </table>
</body>
</html>

Silahkan lihat hasilnya, seharusnya seperti gambar dibawah ini.

Cara Membuat Tabel di HTML

Menambahkan Atribut Cellpadding Pada Tabel

Selain cellspacing, ada juga atribut cellpadding untuk penjelasan silahkan lihat tabel diatas, contoh penulisan kode seperti dibawah ini.

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Pembuatan Tabel Sederhana</title>
</head>
<body>
    <h1>Contoh Tabel Sederhana Dengan Cellpadding</h1>
    <table border="1" cellpadding="10px">
        <tr>
            <td>Ini adalah contoh tabel sederhana</td>
            <td>Ini adalah contoh tabel sederhana</td>
        </tr>
        <tr>
            <td>Ini adalah contoh tabel sederhana</td>
            <td>Ini adalah contoh tabel sederhana</td>
        </tr>
    </table>
</body>
</html>

Maka akan tampil seperti gambar di bawah ini.

Cara Membuat Tabel di HTML
Dari kedua atribut di atas silahkan anda coba gabungkan antara cellspacing dan cellpading, berikanlah nilai-nilai sesuai ke inginan agar dapat melatih pembuatan tabel ini.

Membuat Judul Tabel Dengan HTML

Selain mengatur jarak tabel, biasanya dalam apapun tabel memiliki sebuah judul, judul dalam tabel ini sebenarnya sama saja seperti pada Ms. Word, caranya adalah dengan menambahkan tag <caption></caption> tepat dibawah tag <table></table> diluar dari table row, silahkan lihat kode dibawah ini.

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Pembuatan Tabel Sederhana</title>
</head>
<body>
    <h1>Contoh Tabel Sederhana Dengan Judul</h1>
    <table border="1">
        <caption>Contoh judul tabel</caption>
        <tr>
            <td>Ini adalah contoh tabel sederhana</td>
            <td>Ini adalah contoh tabel sederhana</td>
        </tr>
        <tr>
            <td>Ini adalah contoh tabel sederhana</td>
            <td>Ini adalah contoh tabel sederhana</td>
        </tr>
    </table>
</body>
</html>

Berikut ini adalah penampakan sebuah judul pada tabel dengan kode html diatas.

Menggabungkan Sel-sel pada Tabel

Jika anda pernah menggunakan Ms. Excel tentu tau tentang merge cell, dimana anda dapat menggabungkan dua atau lebih sel dalam satu sheet, begitupun pada html. Kali ini dalam menggabungkan sel-sel pada tabel kita tidak menggunakan tag table, melainkan memberikan atribut-atribut di tag td, yaitu dengan menambahkan atribut rowspan dan colspan, berikut ini contohnya.

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Pembuatan Tabel Sederhana</title>
</head>
<body>
    <h1>Contoh Tabel Sederhana Merge Cell</h1>
    <table border="1">
        <caption>Contoh judul tabel</caption>
        <tr>
            <td rowspan="2">No</td>
            <td rowspan="2">Nama</td>
            <td colspan="2" align="center">Data Lengkap</td>
        </tr>
        <tr>
            <td>Homepage</td>
            <td>Penulis</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Bahasaweb.com</td>
            <td>https://bahasaweb.com/</td>
            <td>Aris Munandar</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Bahasaweb.com</td>
            <td>https://bahasaweb.com/</td>
            <td>Budi Santoso</td>
        </tr>
    </table>
</body>
</html>

Dari contoh di atas seharusnya tampil seperti gambar dibawah ini.

Cara Membuat Tabel di HTML

Tutorial di atas adalah dasar, anda masih bisa berkreasi dalam pembuatan tabel di html, tetapi setidaknya ini adalah gambaran bagaimana cara pembuatan tabel pada html, semoga tulisan ini dapat berguna bagi saya dan pembaca.

Tags: HTML Tutorial Dasar HTML

15 Comments

aji nur cahyo
January 13, 2018, 10:50 pm
aji nur cahyo

sangat membantu bagi pemula
My blog
- January 13, 2018, 10:50 pm
- Reply
fifi maryanti
January 2, 2021, 9:30 pm
fifi maryanti

Terima kasih untuk artikelnya, perkenalkan saya FIFI MARYANTI (1922300007) dari http://www.atmaluhur.ac.id
- January 2, 2021, 9:30 pm
- Reply
Keyzia
January 2, 2021, 9:30 pm
Keyzia

Terima kasih untuk artikelnya, perkenalkan saya KEYZIA(1922500001) dari http://www.atmaluhur.ac.id
- January 2, 2021, 9:30 pm
- Reply
Firdaus Ar-rantisi
January 2, 2021, 9:30 pm
Firdaus Ar-rantisi

Terima kasih untuk artikelnya, perkenalkan saya FIRDAUS AR-RANTISI (1922300004) dari http://www.atmaluhur.ac.id
- January 2, 2021, 9:30 pm
- Reply
JEFFRY H SUFRYANTO SIMARMATA
January 2, 2021, 9:30 pm
JEFFRY H SUFRYANTO SIMARMATA

Selamat malam kak. Terima kasih kak artikel pembelajarannya kak. Dengan Artikel pembelajaran kakak, Saya Yang sebagai pemula bisa mengerti sedikit walaupun belum semua ya. Bisa menambah ilmu saya di kampus. tetap Berkarya terus kak 💪💪. Perkenalkan saya
Jeffry h SUFRYANTO SIMARMATA
NIM 1922500047
KELOMPOK S12J
Link kampus
https://www.atmaluhur.ac.id/
Terima kasih kak🙏🙏
- January 2, 2021, 9:30 pm
- Reply
Putri Zeta Nofarrani
January 2, 2021, 9:30 pm
Putri Zeta Nofarrani

Terima kasih untuk artikelnya, perkenalkan saya Putri Zeta Nofarrani(1922500051) dari http://www.atmaluhur.ac.id
- January 2, 2021, 9:30 pm
- Reply
CHIKA MAILANI
January 2, 2021, 9:30 pm
CHIKA MAILANI

Terima kasih untuk artikelnya, perkenalkan saya Chika Maylani (1922500155) dari http://www.atmaluhur.ac.id
- January 2, 2021, 9:30 pm
- Reply
Kurniawan Robiansah
January 2, 2021, 9:30 pm
Kurniawan Robiansah

Terima kasih untuk artikelnya,perkenalkan saya Kurniawan Robiansah (1922300005) dari http://www.atmaluhur.ac.id
- January 2, 2021, 9:30 pm
- Reply
Muhammad Irfan Syahputra
January 2, 2021, 9:30 pm
Muhammad Irfan Syahputra

Terima Kasih untuk artikelnya, perkenalkan saya Muhammad Irfan Syahputra (1922500087) dari http://www.atmaluhur.ac.id
- January 2, 2021, 9:30 pm
- Reply
Laurensia
January 2, 2021, 9:30 pm
Laurensia

thanks kak artikelnya.. kalo atribute untuk rowspan dan colspan serta atribute untuk mengatur tinggi dan lebar tabel bagaimana kak? sukses slalu dlm berkarya kak.. perkenalkan nama saya meren laurensia mahasiswi dari STMIK Atma Luhur pangklapinang.. ini website kampus saya https://www.atmaluhur.ac.id/
- January 2, 2021, 9:30 pm
- Reply
Laurensia
January 2, 2021, 9:30 pm
Laurensia

thanks kak artikelnya.. kalo atribute untuk rowspan dan colspan serta atribute untuk mengatur tinggi dan lebar tabel bagaimana kak? sukses slalu dlm berkarya kak.. perkenalkan nama saya meren laurensia mahasiswi dari STMIK Atma Luhur pangklapinang.. ini website kampus saya https://www.atmaluhur.ac.id/
- January 2, 2021, 9:30 pm
- Reply
Laurensia
January 2, 2021, 9:30 pm
Laurensia

thanks kak artikelnya.. kalo atribute untuk rowspan dan colspan serta atribute untuk mengatur tinggi dan lebar tabel bagaimana kak? sukses slalu dlm berkarya kak.. perkenalkan nama saya meren laurensia mahasiswi dari STMIK Atma Luhur pangklapinang.. ini website kampus saya https://www.atmaluhur.ac.id/
- January 2, 2021, 9:30 pm
- Reply
Laurensia
January 2, 2021, 9:30 pm
Laurensia

thanks kak artikelnya.. kalo atribute untuk rowspan dan colspan serta atribute untuk mengatur tinggi dan lebar tabel bagaimana kak? sukses slalu dlm berkarya kak.. perkenalkan nama saya meren laurensia mahasiswi dari STMIK Atma Luhur pangklapinang.. ini website kampus saya https://www.atmaluhur.ac.id/
- January 2, 2021, 9:30 pm
- Reply
Rama Erlangga
April 29, 2021, 8:25 am
Rama Erlangga

Artikel nya sangat bermanfaat, semangat kak untuk buat artikel artikel selanjutnya
- April 29, 2021, 8:25 am
- Reply
- Aris Munandar
  Author
  
  April 29, 2021, 9:27 pm
  Aris Munandar
  
  Author
  
  terima kasih atas atensinya.. semoga dapat membantu belajar pemrograman web.
  - April 29, 2021, 9:27 pm
  - Reply

Cara Membuat Tabel di HTML

Penulisan Tabel di HTML

Contoh Membuat Tabel di HTML

Menambahkan Atribut Cellspacing pada Tabel

Menambahkan Atribut Cellpadding Pada Tabel

Membuat Judul Tabel Dengan HTML

Menggabungkan Sel-sel pada Tabel

What are you looking for?