Monday , December 2 2024

Desain Tabel Dengan CSS

Desain Tabel Dengan CSS

lebakcyber.net – Desain tabel dengan CSS. Biasanya kalau kita membuat sebuah tabel hanya dengan menggunakan HTML saja tampilannya seperti kurang menarik dan terlihat biasa saja. Oleh sebab itu pada kesempatan kali ini kita akan mempelajari tentang bagaimana cara mendesain sebuah tabel pada halaman HTML dengan menggunakan tambahan CSS.

Pada kesempatan kali ini kita akan mendesain sebuah tabel pada halaman HTML dengan menambahkan perintah CSS agar tabel tersebut bisa terlihat lebih menarik.

Pertama kita buat dulu sebuah file dengan nama index.html lalu masukan perintah dibawah ini :

<!DOCTYPE html>
<html>
<head>
    <title>Desain Tabel Menggunakan CSS</title>
</head>
<body>
    <h1>lebakcyber.net</h1>
    <table border="1">
        <tr>
            <th>No</th>
            <th>Nama</th>
            <th>Kelas</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Firdan Ardiansyah</td>
            <td>3A</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Ratna Karenina</td>
            <td>3B</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Axl Ardiansyah</td>
            <td>3C</td>
        </tr>
    </table>
</body>
</html>

Kalau kita jalankan nanti kita akan melihat sebuah tabel yang tampilannya masih sangat sederhana dan belum begitu menarik seperti gambar dibawah ini :

Sekarang kita akan mencoba mendesain tabel yang sudah kita buat tersebut dengan menambahkan CSS didalamnya agar terlihat menjadi lebih menarik. Pertama kita buat dulu sebuah file CSS dan berinama style.css lalu hubungkan file css tersebut kedalam file htmlnya. Contohnya seperti perintah dibawah ini :

style.css

/*design table 1*/
.tabel1 {
    font-family: sans-serif;
    color: #232323;
    border-collapse: collapse;
}
 
.tabel1, th, td {
    border: 1px solid #666;
    padding: 10px 20px;
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Desain Tabel Menggunakan CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>lebakcyber.net</h1>
    <table class="tabel1">
        <tr>
            <th>No</th>
            <th>Nama</th>
            <th>Kelas</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Firdan Ardiansyah</td>
            <td>3A</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Ratna Karenina</td>
            <td>3B</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Axl Ardiansyah</td>
            <td>3C</td>
        </tr>
    </table>
</body>
</html>

Silahkan buka file index.html di browser, nanti tampilannya akan seperti gambar dibawah ini :

Oke sekarang tabel yang kita buat sudah sedikit lebih rapih jika dibandingkan dengan tabel yang sebelumnya. Sekarang kita coba membuat tabel yang memiliki tampilan yang lebih menarik lagi masih dengan menggunakan CSS, perintahnya seperti dibawah ini :

style.css

.tabel1 {
    font-family: sans-serif;
    color: #444;
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #f2f5f7;
}
 
.tabel1 tr th{
    background: #35A9DB;
    color: #fff;
    font-weight: normal;
}
 
.tabel1, th, td {
    padding: 10px 20px;
    text-align: left;
}
 
.tabel1 tr:hover {
    background-color: #f5f5f5;
}
 
.tabel1 tr:nth-child(even) {
    background-color: #f2f2f2;
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Desain Tabel Menggunakan CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>lebakcyber.net</h1>
    <table class="tabel1">
        <tr>
            <th>No</th>
            <th>Nama</th>
            <th>Kelas</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Firdan Ardiansyah</td>
            <td>3A</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Ratna Karenina</td>
            <td>3B</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Axl Ardiansyah</td>
            <td>3C</td>
        </tr>
    </table>
</body>
</html>

Sekarang kita coba buka file index.html melalui browser, nanti tampilannya akan seperti gambar dibawah ini :

Oke sekarang kita sudah memiliki desain sebuah tabel dengan menggunakan CSS agar tabel yang kita tampilkan menjadi lebih menarik untuk dilihat.

Semoga tutorial sederhana ini dapat bermanfaat dan jangan lupa untuk selalu berkunjung ke lebakcyber.net untuk mendapatkan tutorial mengenai belajar CSS selanjutnya ya.

About Firdan Ardiansyah

Admin di lebakcyber.net Untuk berhubungan dengan saya, silahkan kirim email ke : firdan@lebakcyber.net

Leave a Reply

Your email address will not be published. Required fields are marked *