Badoy Studio

Lengkap! Cara Membuat Tabel di HTML dengan Mudah

Halo semuanya, pada artikel ini badoystudio akan membahas tutorial bagaimana cara membuat tabel di HTML dengan mudah dan lengkap. Ingin tahu seperti apa? Simak ulasannya sekarang juga.



Layout Website Sebelum Adanya CSS dibuat Menggunakan Table HTML

Sebelum teknologi CSS muncul dan digunakan dalam pengembangan website, para designer web atau web developer menggunakan tabel untuk mengatur layout halaman website.

Sekarang setelah adanya teknologi CSS penggunaan tabel HTML untuk membuat layout sudah tidak berlaku lagi. Karena dengan menggunakan CSS membuat layout website menjadi lebih mudah, indah, dan juga bisa kita atur responsivenya agar tampilannya tetap bagus saat dibuka pada perangkat mobile.

Memahami Baris, Kolom, dan Sel Pada Tabel

Tabel sebetulnya terdiri dari baris, kolom dan sel. Biasanya tabel sendiri digunakan untuk mengelompokkan data secara yang menjelaskan suatu informasi baik itu berupa data ataupun fakta.

  • Baris adalah susunan bentuk horizontal dari kanan ke kiri.
  • Kolom yaitu susunan bentuk vertikal dari atas ke bawah
  • Sel yaitu gabungan antara baris dan kolom

Supaya lebih jelas silahkan pahami gambar di bawah ini.

Sumber : https://www.saidalfaruq.net/

Cara Membuat Tabel di HTML dengan Mudah

Ada beberapa hal yang harus dipahami sebelum membuat tabel di HTML, di antaranya sebagai berikut.

Penggunaan Element atau Tag HTML untuk Membuat Tabel

Pertama, kamu harus memahami element atau tag HTML yang digunakan untuk membuat tabel. Ada 3 tag utama yang digunakan untuk membuat tabel, yaitu :

  • Tag <table> digunakan untuk tag awal pembuatan tabel
  • Tag <tr> digunakan untuk membuat baris
  • Tag < td> dgunakan untuk membuat kolom atau sel

Dengan 3 tag HTML di atas saja kita sudah bisa membuat tabel.

Tapi seiring perkembangan teknologi web yang begitu maju, maka muncul tag-tag baru yang melengkapi tag HTML untuk membuat tabel, yaitu :

  • Tag <th> diguankan untuk membuat header pada tabel
  • Tag <thead> digunakan untuk membuat kepala tabel
  • Tag <tbody> digunakan untuk membuat tubuh tabel
  • Tag <tfoot> digunakan untuk membuat bagian footer tabel

Supaya lebih jelas, mari kita praktekan tag-tag di atas.

  • Buka text editor yang biasa kamu gunakan untuk membuat website
  • Lalu silahkan ketikan tag html di bawah ini
<!DOCTYPE html>
<html>
<head>
    <title>Tutorial Membuat Tabel HTML</title>
</head>
<body>
    <table>
        <tr>
            <td>Ini adalah Baris 1 kolom 1</td>
            <td>Ini adalah baris 1 kolom 2</td>
        </tr>
        <tr>
            <td>Ini adalah Baris 2 kolom 1</td>
            <td>Ini adalah baris 2 kolom 2</td>
        </tr>
    </table>
</body>
</html>
  • Silahkan save file HTML tersebut, misalnya dengan nama table.html
  • Maka hasilnya yaitu seperti gambar berikut ketika dijalankan di browser
Sumber : dok. pribadi

Menambahkan Garis pada Tabel

Kalau kita lihat pada hasil dari kode HTML di atas, nampak tidak terlihat seperti tabel ya, karena garisnya tidak ada. Maka agar ada garisnya, kita perlu menambahkan atribut border pada tag <table>.

Silahkan tambahkan kode berikut pada tag table yang paling atas :

<table border="1">

Lihat hasilnya sekarang sudah ada garisnya.

Sumber : dok. pribadi

Mungkin teman-teman ada yang belum paham angka 1 dalam atribut border itu apa? Simpel saja itu adalah ukuran dari garis. Semakin besar maka semakin tebal. Misal  kita ubah dari 1 menjadi 3. Maka hasilnya akan lebih tebal garisnya.

Memberikan Warna Agar Tabel Terlihat Bagus

Selanjutnya agar tabel terlihat lebih menarik kita juga bisa menambahkan warna pada baris dan kolomnya, yaitu menggunakan atribut bgcolor pada tag baris <tr> dan tag kolom/ sel <td>. Contohnya pada tabel yang sudah kita buat di atas kita menambahkan atribut tersebut seperti di bawah :

 <table border="3">
        <tr bgcolor="red">
            <td>Ini adalah Baris 1 kolom 1</td>
            <td>Ini adalah baris 1 kolom 2</td>
        </tr>
        <tr>
            <td bgcolor="blue">Ini adalah Baris 2 kolom 1</td>
            <td>Ini adalah baris 2 kolom 2</td>
        </tr>
    </table>

Maka hasilnya seperti di bawah ini :

Sumber : dok. pribadi

Untuk nilai dari warnanya bisa menggunakan seperti contoh di atas atau bisa juga memakai kode warna html.

Mengatur Jarak Teks dengan Garis Sel (Padding Cells)

Supaya jarak sel pada tabel tidak terlalu sempit seperti contoh di atas, kita bisa mengatur paddingnya atau jarak antara teks dengan garis. Dengan cara menambahkan atribut cellpadding.  Contohnya, silahkan tambahkan atribut cellpadding dengan nilai misalkan 20 :

 <table border="3" cellpadding="20">

Maka hasilnya adalah sebagai berikut :

Sumber : dok. pribadi

Agar Tabel Posisinya di Tengah

Supaya tabel berada di posisi center atau tengah kita bisa menambahkan atribut center pada tag table. Contohnya seperti berikut.

<table border="3" cellpadding="20" align="center">

Dan hasilnya yaitu perataan tabel di browser sudah berubah jadi center alias tengah.

Sumber : dok. pribadi


Menggabungkan Sel dengan Contoh Tabel daftar Nilai

Pada saat kita membuat tabel contohnya tabel daftar nilai seperti di bawah ini, kita harus menggabungkan 3 sel menjadi 1 saja.

Bagaimana cara menggabungkannya? Yaitu menggunakan atribut :

  • Rowspan yang berguna untuk menggabungkan baris
  • Colspan yang berguna untuk menggabungkan kolom

Nantinya atribut tersebut harus ditempatkan pada tag <tr> dan juga <th>. Supaya tidak pusing dan bingung, berikut adalah contoh penggunannya pada tag html.

<!DOCTYPE html>
<html>
<head>
    <title>Tutorial Membuat Tabel HTML</title>
</head>
<body>
        <table border="1">
            <tr>
                <th rowspan="2">Nama Mahasiswa</th>
                <th colspan="3">Nilai Mata Kuliah</th>
            </tr>
            <tr>
                <th>Kuliah</th>
                <th>Pemrograman</th>
                <th>Pancasila</th>
            </tr>
            <tr>
                <td>Ayu</td>
                <td>7</td>
                <td>7</td>
                <td>7</td>
            </tr>
            <tr>
                <td>Deni</td>
                <td>8</td>
                <td>8</td>
                <td>8</td>
            </tr>
            <tr>
                <td>Caca</td>
                <td>9</td>
                <td>9</td>
                <td>9</td>
            </tr>
            <tr>
                <td>Farah</td>
                <td>6</td>
                <td>6</td>
                <td>6</td>
            </tr>
        </table>

    </body>
    </html>

Maka hasilnya seperti pada gambar berikut ini :

cara membuat tabel di html (Small)
Sumber : dok. pribadi

Di atas kita bisa lihat nilai yang dimasukan pada bagian rowspan dan colspan yaitu menggabungkan 2 baris (Nama Mahasiswa) dan menggabungkan 3 kolom (Nilai Mata Kuliah).



Menambahkan Gambar pada Tabel

Selanjutnya bagaimana jika ingin menambahkan gambar pada tabel? Caranya sangat mudah yaitu dengan memasukan tag <img> lalu lengkapi dengan atribut src yang berarti sumber gambar. Jangan lupa tambahkan juga atribut untuk kelebaran gambar yaitu width. Contohnya seperti di bawah ini :

<!DOCTYPE html>
<html>
<head>
    <title>Tutorial Membuat Tabel HTML</title>
</head>
<body>
    <table border="1">
        <tr>
            <th colspan="3" bgcolor="yellow">Profil Penulis</th>
        </tr>
        <tr>
            <td rowspan="3">
                <img src="https://badoystudio.com/wp-content/uploads/2021/02/grup-diskusi-icon.png" width="200" />
            </td>
        </tr>
        <tr>
            <td>Nama</td>
            <td>Ayu Diana </td>
        </tr>
        <tr>
            <td>Domisili</td>
            <td>Jakarta Timur</td>
        </tr>
    </tr>
     </table>

</body>
</html>

Maka hasilnya :

cara membuat tabel di html (Small)
Sumber : dok. pribadi

Memasukkan Kode CSS Agar Desain Tabel Lebih Epik

Cara paling mudah mendesain website yang dibuat dengan menggunakan HTML yaitu dengan menambahkan kode-kode CSS. Begitu juga dengan tabel yang kita buat di HTML ini bisa kita tambahkan kode CSS agar lebih bagus.

Di sini kita tidak akan membahas lebih jauh mengenai penggunaan kode CSS ya, melainkan hanya mencontohkan saja jika tabel di HTML ini bisa juga di modifikasi desainnya dengan CSS. Oiya, untuk menghubungkan HTML dengan CSS ada dua cara, yaitu :

  • Menggunakan link ke file CSS
  • Atau langsung menuliskan file CSS di file HTML dengan tag <style>

Contohnya seperti berikut ini :

<!DOCTYPE html>
<html>
<head>
    <title>Tutorial Membuat Tabel HTML</title>
    <style>
        table {
            border-collapse: collapse;
        }
        table, th, td {
            border: 2px solid black;
        }
        th, td {
            padding: 20px;
        }
        th {
            background-color: #430774;
           color: white;
        }

    </style>
</head>
<body>
        <table border="1">
            <tr>
                <th rowspan="2">Nama Mahasiswa</th>
                <th colspan="3">Nilai Mata Kuliah</th>
            </tr>
            <tr>
                <th>Kuliah</th>
                <th>Pemrograman</th>
                <th>Pancasila</th>
            </tr>
            <tr>
                <td>Ayu</td>
                <td>7</td>
                <td>7</td>
                <td>7</td>
            </tr>
            <tr>
                <td>Deni</td>
                <td>8</td>
                <td>8</td>
                <td>8</td>
            </tr>
            <tr>
                <td>Caca</td>
                <td>9</td>
                <td>9</td>
                <td>9</td>
            </tr>
            <tr>
                <td>Farah</td>
                <td>6</td>
                <td>6</td>
                <td>6</td>
            </tr>
        </table>

    </body>
    </html>

Hasilnya tabel akan menjadi seperti gambar di bawah ini :

cara membuat tabel di html (Small)
Sumber : dok. pribadi

Dari kode HTML di atas kita bisa melihat kode CSS yang diawali dengan tag <style> ditempatkan pada tag <head> setelah tag <title>.

Sedikit penjelasan mengenai properti yang digunakan pada CSS di atas yaitu :

  • border-collapse: collapse;berguna untuk mengubah garis tabel menjadi satu saja
  • border: 2px solid black;mengatur ketebalan garis
  • padding: 20px;mengatur jarak antara teks dengan garis yang ada di dalam tabel
  • background-color: #430774;mengatur background warna biru
  • color: white;mengatur agar teks menjadi warna putih

Layanan kami : 


Penutup

Sampai di sini kalau kamu sudah mempraktekan semua tutorial di atas, itu artinya kamu sudah berhasil memahami dan menguasai cara membuat tabel di HTML. Supaya lebih lancar kamu bisa mengulangi latihan beberapa kali. Semoga bermanfaat dan jangan lupa share ke temanmu yang lainnya juga.

Sumber gambar utama :

 

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.