Cara Buat Table Dengan CSS

Kod table html yang anda buat tampa mengunakan CSS tidak akan menjadi sempurna apabila di postingkan. Berikut adalah cara mudah membuat table dengan mengunakan Css dan HTML


Langkah pertama pergi ke edit HTML template.



Langkah kedua



Langkah 3

Masukan kod css dibawah diatas kod </hade>
buatlah id table dengan apa sahaja perkataan yang anda suka.
Kod id table mesti sama dengan kod pada kod table html yang akan kita buat nanti.

<style type="text/css">
table.contoh1 {
width: 500px;
background-color: #fafafa;
border: 5px #000000 solid;
margin-left: 15px;
font-size: small;
font-weight: bold;
border-style: inset;
}

td.hed {
background-color: #666;
border: 2px #000000 solid;
font-family: Trebuchet MS, Verdana;
font-size: small;
font-weight: bold;
text-align: center;
color: #fff;
padding: 5px;
border-style: inset;
}

td.date {
width: 20%;
background-color: #99CCCC;
border: 2px #000000 solid;
font-family: Trebuchet MS, Verdana;
font-size: small;
font-weight: bold;
text-align: center;
padding: 5px;
color: #404040;
border-style: inset;
}

td.team1 {
width: 35%;
background-color: #99CCCC;
border: 2px #000000 solid;
font-family: Trebuchet MS, Verdana;
font-size: small;
font-weight: bold;
text-align: right;
padding: 5px;
color: #404040;
border-style: inset;
}

td.score {
width: 10%;
background-color: #99CCCC;
border: 2px #000000 solid;
font-family: Trebuchet MS, Verdana;
font-size: small;
font-weight: bold;
text-align: center;
padding: 5px;
color: #404040;
border-style: inset;
}

td.team2 {
width: 35%;
background-color: #99CCCC;
border: 2px #000000 solid;
font-family: Trebuchet MS, Verdana;
font-size: small;
font-weight: bold;
text-align: left;
padding: 5px;
color: #404040;
border-style: inset;
}

.ID TABLE DISINI br {
display: none
}
</style>


Langkah 4

Masukan contoh kod table html dibawah ini pada posting anda.


<div class="ID TABLE DISINI">
<table id="thetable3" width="100%" cellspacing="0">

<tbody>

<tr>
<td> kotak 1 </td>
<td> kotak 2 </td>
<td> kotak 3 </td>
</tr>

<tr>
<td> kotak 1 </td>
<td> kotak 2 </td>
<td> kotak 3 </td>
</tr>

</table></div>


Table akan kelihatan seprti dibawah

Contoh





















kotak 1 kotak 2 kotak 3
kotak 1 kotak 2 kotak 3


Ini contoh table yang telah diubah suai



















Text atau Gambar Text atau Gambar Text atau Gambar
Text atau Gambar Text atau Gambarl Text atau Gambar
Text atau Gambar Text atau Gambar Text atau Gambar


Sekarang table anda sudah siap untuk dipostingkan. Anda hanya perlu mengubah kod table mengikut kesesuaian atau kehendak anda.