Membuat tabel dengan css dan php

Assalamualaikum Wr. Wb.

Kembali bersama Webhozz Blog. Alhamdulillah pada postingan ini, saya ingin membagikan ilmu lagi. Oke langsung saja, pada pertemuan kali ini kita akan membuat desain tabel yang menarik. Karena mungkin bisa saja kita bosan dengan tampilan tabel default bawaan html. Jadi untuk menambah keindahannya kita menggunakan CSS.

Pertama buat file baru, bebas mau kasih nama apa untuk filenya. Kemudian buat struktur HTML seperti di bawah ini. Kita tambahkan tag <title></title> dengan kata “Tabel CSS”. Maka akan seperti ini.

Kedua, Buat struktur tabel pada tag <body></body> seperti ini.

Jadi, hasilnya akan tampak seperti ini pada umumnya.

Oke, kode HTMLnya sudah kita buat. Selanjutnya adalah membuat file CSSnya.

Ketiga, kita buat script cssnya dan sisipkan pada tag <head></head>. Berikut adalah kodenya.

Berikut ini adalah source code lengkapnya.

<!DOCTYPE html><html>

<head>

<title>Tabel CSS</title>

table

{

border:1px solid black;

font-family: arial;

font-size: 20px;

}

{

background-color: #00FF66;

}

tr:hover

{

background-color: yellow;

}

</style>

</head>

<body>

<tr>

<th align=”center”>No.</th> <th>Nama</th> <th>Alamat</th> <th>Pekerjaan</th>

</tr>

<tr>

<td>Danny Julian Pratama</td>

<td>Jln. Sukanegla, Cicaheum</td>

<td>Trainer</td>

</tr>

<tr>

<td>Fahra Natasya</td>

<td>Youtuber</td>

</tr>

<tr>

<td>Iko Uwais</td>

<td>Jln. Sukanegla, Cicaheum</td>

<td>Aktor Laga</td>

</tr>

</table>

</body>

</html>

Setelah itu, saat dijalankan pada browser akan terlihat seperti ini di saat normal.

Akan tetapi jika kita arahkan mouse pada salah satu baris, maka baris tersebut akan berubah warna. Begitu pula dengan dengan baris yang lainnya.

Dan begitulah akhirnya, tabel css kita yang atraktif sudah jadi. Dengan koding sederhana ini, silahkan kembangkan sesuai kreatifitasmu masing-masing.

Alhamdulillah, demikianlah tutorial pada postingan kali ini. Silahkan mencoba dimanapun dan kapanpun ada berada. Maaf jika ada kesalahan pada tutorial ini. Insya Allah akan posting tutorial lagi. Demikian dari saya, Walaikumsalam Wr. Wb.

Membuat tabel dengan css dan php

Pos Terkait

Periklanan

BERITA TERKINI

Toplist Popular

Periklanan

Terpopuler

Token Data

Periklanan

Tentang Kami

Legal

Dukungan

Social