Pada kali ini saya akan membagikan Tutorial membuat tabel pada HTML,,kita langsung saja..
Cara
membuat tabel
Untuk membuat
sebuah tabel yang simpel ada 3 elemen utama yaitu table, tr dan td. Tag <table> berfungsi untuk
membuat tabel kemudian di ikuti dengan tag <tr> (table rows) adalah untuk
membuat baris pada tabel kemudian tag <td> (table data) adalah untuk
membuat kolom pada tabel, kolom-kolom hasil dari tr dan td ini disebut dengan table Cell yaitu sebagai lokasi dimana kita
memasukkan data-data yang akan di tampilkan.
Berikut contoh table yang saya buat, saya gunakan format HTML
<html>
<head>
<link rel="stylesheet"
type="text/css" href="Daftarpemerann.css">
<title>table</title>
</head>
<body>
<font face="mv
boli"><b> <href= "#"
class="rifcy"><h1>Data Pemain
Sinetron</h1></b></font>
<table border="1">
<th
class="a">No.</th>
<th class="b">Nama
Aktor</th>
<th
class="c">Tempat/Tanggal Lahir</th>
<th
class="d">Umur</th>
<th
class="e">Alamat</th>
<tr class="ab">
<td>1.</td>
<td>Rifcy Rizaldy</td>
<td>Bandung,28-09-2995</td>
<td>20</td>
<td>Jalan.Pangeran</td>
</tr>
<tr class="cc">
<td>2.</td>
<td>Rusmi</td>
<td>Jakarta,12-05-2988</td>
<td>28</td>
<td>Jalan.Antasari
2</td>
</tr>
<tr class="ff">
<td>3.</td>
<td>Surya Agung</td>
<td>Makassar,09-01-2970</td>
<td>29</td>
<td>Jalan.Bayangkaraya</td>
</tr>
<tr class="ii">
<td>4.</td>
<td>Sulis</td>
<td>Surabaya,03-31-2980</td>
<td>26</td>
<td>Jalan.Setapak</td>
</tr>
<tr class="ll">
<td>5.</td>
<td>Ibrahim Nur</td>
<td>Bontang,23-06-2999</td>
<td>17</td>
<td>Jalan.Berbas</td>
</tr>
</table>
</body>
</html>
|
Dan jangan lupa untuk format CSS
table{
border-style: none;
color: black;
}
th{
border-style: none;
background-color: gray;
border-radius: 10px 10px;
}
th.a{
padding: 10px 10px
}
th.b{
padding: 10px 30px
}
th.c{
padding: 10px 25px
}
th.d{
padding: 10px 10px
}
th.e{
padding: 10px 30px
}
tr.ab{
background-color: silver;
}
tr.cc{
background-color: palegoldenrod;
}
tr.ff{
background-color: silver;
}
tr.ii{
background-color: palegoldenrod;
}
td{
border-radius: 10px 30px 30px 10px;
border-style: none;
text-align: center;
padding: 10px 10px
}
tr.ll{
background-color: silver;
}
tr.ab:hover{
background-color: maroon;
color: white;
}
tr.ab:active{
background-color: red;
}
tr.cc:hover{
background-color: maroon;
color: white;
}
tr.cc:active{
background-color: red;
}
tr.ff:hover{
background-color: maroon;
color: white;
}
tr.ff:active{
background-color: red;
}
tr.ii:hover{
background-color: maroon;
color: white;
}
tr.ii:active{
background-color: red;
}
tr.ll:hover{
background-color: maroon;
color: white;
}
tr.ll:active{
background-color: red;
}
|
Berikut
hasil Output nya:
Sekian Tutorial dari saya,semoga bermanfaat buat sahabat web sekalian.
Tidak ada komentar:
Posting Komentar