Table HTML |
Berikut Cara Membuat Table Menggunakan HTML Seperti Gambar Di Atas Cekidot...
<style>
.demo {
width:100%;
height:100%;
border:1px ridge #778899;
border-collapse:separate;
border-spacing:2px;
padding:10px;
}
.demo caption {
caption-side:Atas;
text-align:left;
}
.demo th {
border:1px ridge #778899;
padding:10px;
background:#FFA500;
}
.demo td {
border:1px ridge #778899;
text-align:center;
padding:10px;
background:#D3D3D3;
}
</style>
<table class="demo">
<caption>Judul Table Disini</caption>
<thead>
<tr>
<th style="text-align: center;">Judul 1</th>
<th style="text-align: center;">Judul 2</th>
<th style="text-align: center;">Judul 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Teks 1</td>
<td>Teks 2</td>
<td>Teks 3</td>
</tr>
<tr>
<td>Teks 4</td>
<td>Teks 5</td>
<td>Teks 6</td>
</tr>
<tr>
<td>Teks 7</td>
<td>Teks 8</td>
<td>Teks 9</td>
</tr>
<tr>
<td>Teks 10</td>
<td>Teks 11</td>
<td>Teks 12</td>
</tr>
</tbody>
</table>
<br />
.demo {
width:100%;
height:100%;
border:1px ridge #778899;
border-collapse:separate;
border-spacing:2px;
padding:10px;
}
.demo caption {
caption-side:Atas;
text-align:left;
}
.demo th {
border:1px ridge #778899;
padding:10px;
background:#FFA500;
}
.demo td {
border:1px ridge #778899;
text-align:center;
padding:10px;
background:#D3D3D3;
}
</style>
<table class="demo">
<caption>Judul Table Disini</caption>
<thead>
<tr>
<th style="text-align: center;">Judul 1</th>
<th style="text-align: center;">Judul 2</th>
<th style="text-align: center;">Judul 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Teks 1</td>
<td>Teks 2</td>
<td>Teks 3</td>
</tr>
<tr>
<td>Teks 4</td>
<td>Teks 5</td>
<td>Teks 6</td>
</tr>
<tr>
<td>Teks 7</td>
<td>Teks 8</td>
<td>Teks 9</td>
</tr>
<tr>
<td>Teks 10</td>
<td>Teks 11</td>
<td>Teks 12</td>
</tr>
</tbody>
</table>
<br />
Nah Itulah Cara Membuat Table Dengan HTML Keren Di Postingan Silahkan Kalian Modif Sesuai Selera Kalian..
Warning!
Jika Ingin Hasilnya Sesuai Harapan Jangan Lupa Jika Ingin Membuat Table Keren Ini Di Postingn Gunakan Mode HTML Jangan COMPOSE..
Selamat Mencoba Semoga Sukses
0 komentar:
Post a Comment