Mengubah Tampilan Tabel Pada HTML

Seperti pada postingan sebelumnya , saya akan menjelaskan cara mengubah tampilan pada tabel. Mengubah tampilan tabel dapat dilakukan dengan berbagai cara :

1. Mengubah Table langsung dari HTML
2. Mengubah Table dengan menggunakan CSS


Kali ini saya akan menjelaskan cara mengubah tabel dengan kedua metode tersebut.

Mengubah Table dari File HTML

 Pertama, buatlah sebuah tabel terlebih dahulu pada file HTML, Jika belum tahu cara membuat tabel bisa dilihat   disini . Kemudian pada skrip <td> kita sisipkan "width"utuk merubah ukuran lebar per kolom dan "height" untuk merubah ukuran tingginya. Misal kita akan membuat  tabel dengan ukuran per kolom 60px, maka pada skrip tabel kita buat seperti ini:

<table>
<tr>
<td width="60px" height="60px"></td>
</tr>
</table>

maka akan terlihat seperti ini :


Kita juga bisa mengkreasikan ukuran per kolom sesuai keinginan seperti ukuran lebar 70px dan tinggi 40px. Untuk merubah warna background tabel kita sisipkan skrip pada tabel seperti ini :
<table bgcolor="warna">
contoh membuat tabel dengan warna background hitam
"<table bgcolor="black">" atau bisa dengan menggunakan kode warna
"<table bgcolor="#0000">".
Untuk kode-kode warna bisa dilihat di Photoshop pada kolom warna.


Mengubah Table dengan CSS

Saya akan menjelaskan cara mengubah ukuran Tabel dengan cara inline style.Inline style adalah cara menyisipkan CSS langsung pada skrip yang dibuat.
 Pertama, seperti diatas buat dahulu tabelnya. Kemudian kita akan mengubah ukuran tabelnya menjadi 40px X 60px dengan warna tabel merah.

<table style="background-color:red;">
<tr>
<td style="width:40px; height:60px;"></td>
</tr>
</table>

Maka akan diperoleh hasil seperti ini :


Keterangan:
Style = Untuk mendefinisikan skrip CSS pada HTML

Terima kasih sekian untuk postingan kali ini. :)