Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link
Beranda
basis css dasar
belajar css dasar

Design Table dengan CSS

  Setalah mempelajari tentang cara membuat tabel di HTML pada pembahasan yang lalu, pasti banyak di antara kita merasa tampilan dari tabel standar HTML tampilannya masih sangat kurang menarik. karena tampilan tabel standar dari HTML sendiri memiliki tampilan yang biasa saja. oleh karena itu Pada pembahasan belajar CSS design tabel ini akan di jelaskan tentang bagaimana cara design sebuah tabel HTML dengan menggunakan CSS.


 Di tutorial ini saya akan menjelaskan cara men-design table step by step. pertama kita buat kerangka table nya dulu.

index.html 
 
<!DOCTYPE html>
<html>
<head>
    <title>Cara Design Table Dengan CSS</title>
</head>
<body>
    <h1>Cara Design Table Dengan CSS</h1>
    <table border="1">
        <tr>
            <th>No</th>
            <th>Nama</th>
            <th>Alamat</th>
            <th>Usia</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Andi Saputra</td>
            <td>Magelang</td>
            <td>21</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Budi Budiman</td>
            <td>Jakarta</td>
            <td>24</td>
        </tr>
        <tr>
            <td>3</td>

            <td>Calvin Sanusi</td>

            <td>Malang</td>
            <td>29</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Diki</td>
            <td>Bandung</td>
            <td>24</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Mas Rendy</td>
            <td>Medan</td>
            <td>23</td>
        </tr>
    </table>
</body>
</html>

dan tampilan nya masih standar dan biasa saja.

Seperti yang tampak pada gambar di atas. tampilan dari table kita masih sangat standar. sekarang kita akan langsung memulai mendesign table nya. buat sebuah file css dan langsung hubungkan dengan file html nya. baca tutorial sebelumnya tentangbelajar html menghubungkan html dan css.

<link rel="stylesheet" type="text/css" href="style.css">

Sehingga file html nya menjadi seperti berikut

Index.html

<!DOCTYPE html>
<html>
<head>
    <title>Cara Design Table Dengan CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Cara Design Table Dengan CSS</h1>
    <table border="1">
        <tr>
            <th>No</th>
            <th>Nama</th>
            <th>Alamat</th>
            <th>Usia</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Andi Saputra</td>
            <td>Magelang</td>
            <td>21</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Budi Budiman</td>
            <td>Jakarta</td>
            <td>24</td>
        </tr>
        <tr>
            <td>3</td>

            <td>Calvin Sanusi</td>

            <td>Malang</td>
            <td>29</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Diki</td>
            <td>Bandung</td>
            <td>24</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Mas Rendy</td>
            <td>Medan</td>
            <td>23</td>
        </tr>
    </table>
</body>
</html>

Style.css

	
/*design table 1*/

.table1 {

    font-family: sans-serif;
    color: #232323;
    border-collapse: collapse;

}

.table1, th, td {
    border: 1px solid #999;
    padding: 8px 20px;
}

contoh di atas adalah membuat design table sederhana.hasilnya :

Perhatikan pada gambar di atas. table kita sudah agak kelihatan lebih bersih. hehe. saya jelaskan sedikit penggunaan css nya.


Pada element table kita menentukan font yang ingin kita gunakan. karena kita akan mengganti font nya. agar lebih terlihat menarik. cara mengganti font sudah saya jelaskan pada tutorial sebelumnya. silahkan teman-teman baca tutorial cara mengganti font dengan css. dan menetapkan warna font nya denga warna #232323. dan yang paling penting adalah border- collapse:collapse. ini berfungsi untuk membuat garis pada tabel menjadi sebaris.

    
.table1 {

    font-family: sans-serif;
    color: #232323;
    border-collapse: collapse;

}

kemudian lagi pada element table head dan table body nya kita tentukan warna table nya dengan kode warna #999. dan memberikan padding atas bawah sebesar 8px. dan kiri kanan 20px.

   
.table1, th, td {
    border: 1px solid #999;
    padding: 8px 20px;
}

Contoh source code design table lainnya

Index.html

<html>
<head>
    <title>Cara Design Table Dengan CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Cara Design Table Dengan CSS</h1>
    <h4>Design table 1</h4>
    <table class="table1">
        <tr>
            <th>No</th>
            <th>Nama</th>
            <th>Alamat</th>
            <th>Usia</th>
        </tr>
        <tr>

            <td>1</td>

            <td>Andi Saputra</td>
            <td>Magelang</td>
            <td>21</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Budi Budiman</td>
            <td>Jakarta</td>
            <td>24</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Calvin Sanusi</td>
            <td>Malang</td>
            <td>29</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Diki</td>
            <td>Bandung</td>
            <td>24</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Mas Rendy</td>
            <td>Medan</td>
            <td>200</td>
        </tr>
    </table>
</body>
</html>

Style.css 

.table1 {

    font-family: sans-serif;

    color: #444;
    border-collapse: collapse;
    width: 50%;
    border: 1px solid #f2f5f7;
}
.table1 tr th {
    background: #35A9DB;
    color: #fff;
    font-weight: normal;
}
.table1, th, td {
    padding: 8px 20px;
    text-align: center;
}
.table1 tr:hover {
    background-color: #f5f5f5;
}
.table1 tr:nth-child(even) {
    background-color: #f2f2f2;
}


Selesai.

Posting Komentar