Cara Membuat Tabel di HTML dan CSS

Cara Membuat Tabel di HTML dan CSS – Dalam dunia web development, penggunaan tabel merupakan salah satu elemen yang umum digunakan untuk menyajikan data secara terstruktur. Dengan HTML dan CSS, Anda dapat membuat tabel yang menarik dan responsif sesuai kebutuhan Anda. Artikel ini akan memberikan panduan langkah demi langkah tentang bagaimana membuat tabel menggunakan kedua bahasa pemrograman tersebut, dengan penekanan pada kemudahan pemahaman bagi pemula. Mari kita mulai!

Alat yang di Butuhkan

Berikut ini beberapa alat yang dibutuhkan untuk dapat membuat tabel di html dan css:

  • Perangkat laptop,
  • Google chrome (Web browser),
  • Sublime text (Text editor code),
  • Niat yang kuat.

Cara Membuat Tabel di HTML dan CSS

1. Buat Folder Project Tabel

Pertama-tama, buatlah folder project baru di dalam direktori kerja Anda. Misalnya, beri nama folder tersebut “project-tabel“.

2. Buat Sebuah File tabel.html

Selanjutnya, buatlah file HTML baru dengan nama “tabel.html” di dalam folder “project-tabel“. Anda dapat menggunakan editor teks seperti Visual Studio Code atau Sublime Text untuk membuat file tersebut.

Berikut ini file html yang dapat Anda tambahkan untuk membuat tabel di html dan css:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Tabel HTML</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Data Mahasiswa</h1>
        <table>
            <thead>
                <tr>
                    <th>No</th>
                    <th>Nama</th>
                    <th>Alamat</th>
                    <th>Umur</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>John Doe</td>
                    <td>Jakarta</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Jane Doe</td>
                    <td>Bandung</td>
                    <td>23</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Alice Smith</td>
                    <td>Surabaya</td>
                    <td>22</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>Bob Johnson</td>
                    <td>Medan</td>
                    <td>24</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>Mary Brown</td>
                    <td>Yogyakarta</td>
                    <td>21</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>Michael Lee</td>
                    <td>Denpasar</td>
                    <td>20</td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>Sarah Taylor</td>
                    <td>Malang</td>
                    <td>22</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>
 

3. Buat File style.css

Setelah membuat file HTML, selanjutnya adalah membuat file CSS untuk mengatur tampilan tabel. Buatlah file baru dengan nama “style.css” di dalam folder “project-tabel“.

Artikel Terkait:   Cara Membuat Website Pariwisata dengan HTML dan CSS

Berikut ini file css yang dapat Anda tambahkan untuk membuat table di html dan css:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.container {
    width: 80%;
    margin: 50px auto;
}

h1 {
    text-align: center;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid #ddd;
}

th, td {
    padding: 8px;
    text-align: left;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

th {
    background-color: #4CAF50;
    color: white;
}
 

4. Mengubah Tampilan Tabel

Dalam file “tabel.html“, tambahkan kode HTML untuk membuat sebuah tabel sederhana. Kemudian, dalam file “style.css“, gunakan CSS untuk mengatur tampilan tabel sesuai dengan preferensi Anda. Misalnya, Anda dapat mengatur warna latar belakang, ukuran teks, dan jarak antar sel.

5. Simpan & Tampilkan Tampilan

Simpan semua perubahan yang telah Anda buat dalam file HTML dan CSS. Kemudian, buka file “tabel.html” menggunakan browser web untuk melihat tampilan dari tabel yang telah Anda buat.

Preview hasil

Berikut ini preview hasil tabel di html dan css jika Anda telah berhasil membuatnya:

Penutup

Setelah mengikuti langkah-langkah yang dijelaskan di atas, Anda sekarang memiliki pemahaman yang lebih baik tentang cara membuat tabel di HTML dan CSS. Dengan mempraktikkan langkah-langkah tersebut, Anda dapat merancang tabel-tabel yang sesuai dengan kebutuhan proyek web Anda. Jangan ragu untuk eksperimen dengan kode dan gaya desain untuk menciptakan tabel yang sesuai dengan preferensi dan kebutuhan Anda. Semoga artikel ini bermanfaat bagi Anda yang sedang memulai perjalanan dalam pembuatan tata letak web dengan HTML dan CSS. Selamat mencoba dan selamat belajar!