Cara Membuat Tabel Berwarna dengan HTML dan CSS

Posted on

Cara Membuat Tabel Berwana dengan HTML dan CSS – Tabel adalah salah satu elemen penting dalam desain web untuk menampilkan data secara terstruktur. Dalam era digital yang semakin berkembang, keterampilan membuat tabel yang menarik dan mudah dibaca menjadi sangat bernilai. Dalam artikel ini, kelashtml telah membahas dengan rinci bagaimana Anda dapat membuat tabel berwarna yang menarik menggunakan HTML dan CSS. Tutorial ini dirancang khusus untuk pemula, sehingga Anda dapat dengan mudah memahami setiap langkahnya.

Alat yang Harus Disiapkan

Berikut ini beberapa alat yang harus disiapkan untuk dapat membuat tabel berwarna dengan html dan css:

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

Cara Membuat Tabel Berwarna dengan HTML dan CSS

1. Membuat Folder Project

Pertama, buatlah sebuah folder untuk proyek tabel berwarna Anda di dalam sistem file komputer Anda. Beri nama folder tersebut sesuai dengan preferensi Anda, misalnya “Tabel_Berwarna_Project“.

2.  Membuat File HTML

Buka teks editor atau IDE (Integrated Development Environment) favorit Anda, kemudian buatlah sebuah file HTML baru di dalam folder proyek yang telah Anda buat sebelumnya. Beri nama file tersebut “tabel_berwarna.html“.

Baca Juga:  Cara Membuat Background Color di HTML

Berikut ini file html yang dapat Anda tambahkan untuk membuat tabel berwana dengan 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 Berwarna</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Tabel Berwarna</h1>
    <table>
        <tr>
            <th>Nama</th>
            <th>Usia</th>
            <th>Kota</th>
        </tr>
        <tr>
            <td>John</td>
            <td>25</td>
            <td>New York</td>
        </tr>
        <tr>
            <td>Jane</td>
            <td>30</td>
            <td>Los Angeles</td>
        </tr>
        <tr>
            <td>Smith</td>
            <td>28</td>
            <td>Chicago</td>
        </tr>
    </table>
</body>
</html>
 

3.  Membuat File CSS

Sekarang, buatlah file CSS baru di dalam folder proyek yang sama. Beri nama file tersebut “style.css“.

Baca Juga:  Cara Membuat Search Engine di HTML

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

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f2f2f2;
}

h1 {
    text-align: center;
}

table {
    width: 50%;
    margin: 20px auto;
    border-collapse: collapse;
    border: 2px solid #ddd;
}

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

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

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

tr:hover {
    background-color: #ddd;
}
 

4. Mengubah Tampilan Tabel Berwarna

File HTML yang kita buat sebelumnya menggunakan file CSS untuk mengatur tampilan tabelnya. Dalam file CSS, kita menentukan lebar tabel, pengaturan padding untuk sel, dan warna latar belakang untuk baris genap.

5. Menyimpan dan Melihat Tampilan

Setelah Anda menyimpan kedua file, buka file HTML di browser web Anda. Anda akan melihat tabel sederhana dengan baris yang memiliki latar belakang warna yang berbeda. Ini menunjukkan bahwa Anda telah berhasil membuat tabel berwarna menggunakan HTML dan CSS.

Preview hasil

Berikut ini preview hasil tabel berwarna dengan html dan css jika Anda berhasil membuatnya:

Baca Juga:  Cara Membuat Button Radio di HTML

Penutup

Membuat tabel berwarna dengan HTML dan CSS bukanlah tugas yang sulit, terutama dengan panduan langkah demi langkah yang telah kita bahas di atas. Dengan sedikit latihan dan eksperimen, Anda dapat membuat berbagai jenis tabel yang sesuai dengan kebutuhan desain web Anda. Jangan ragu untuk terus menjelajahi kemungkinan dan mengembangkan kreativitas Anda dalam merancang tabel yang menarik dan informatif. Semoga tutorial ini bermanfaat bagi Anda dalam perjalanan pengembangan web Anda!