Pada postingan html tutorial kali ini, saya akan mencoba memberikan metode memasukan / memposting tabel dengan menggunakan kode html, bmgn cara memformat tag-tag html agar browser internet dapat menampilkannya dalam bentuk tabel ?
sudalah, males cuap-cuap tau Baiklah, untuk menjawabnya lebih lanjut pahami penjelasan
berikut :
Perhatikan baik-baik bentuk -bentuk tabel di berikut ini dan pahami penjlasnnya, jika tidak demikian, maka siasialah anda yang sudah terlanjur nyasar di situs ini, ckckck..
- BENTUK PERTAMA (KOLOM VERTIKAL)
| baris pertama |
| baris kedua |
| baris ketiga |
Kodenya seperti ini :
<table border="1">
<tr><td>baris pertama</td></tr>
<tr><td>baris kedua</td></tr>
<tr><td>baris ketiga</td></tr>
</table>
- BENTUK KEDUA ( KOLOM HORIZONTAL)
| kolom pertama |
kolom kedua |
kolom ketiga |
kolom keempat |
kodenya seperti ini :
<table border="1">
<tr><td>kolom pertama</td>
<td>kolom kedua</td>
<td>kolom ketiga</td>
<td>kolom keempat</td>
</tr>
</table>
- MENGKOBINASIKAN KE-DUA BENTUK (VERTIKAL & HORIZONTAL)
| baris pertama, kolom 1 |
baris pertama, kolom 2 |
baris pertama, kolom 3 |
| baris kedua, kolom 1 |
baris kedua, kolom 2 |
baris ketiga, kolom 3 |
| baris ketiga, kolom 1 |
baris ketiga, kolom 2 |
baris ketiga, kolom 3 |
Kodenya seperti ini :
<table border="1">
<tr><td>baris pertama, kolom 1</td>
<td>baris pertama, kolom 2</td>
<td>baris pertama, kolom 3</td>
</tr>
<tr><td>baris kedua, kolom 1</td>
<td>baris kedua, kolom 2</td>
<td>baris ketiga, kolom 3</td>
</tr>
<tr><td>baris ketiga, kolom 1</td>
<td>baris ketiga, kolom 2</td>
<td>baris ketiga, kolom 3</td>
</tr>
</table>
Penjelasan :
Kode yang berupa angka "1" adalah nilai ketebalan tabel. Bisa di ganti dengan yang lebih besar tau..!! hehe..
Perhatikan dan pahami cara penempatan tag demi tag, saya rasa tidak perlu lagi untuk menjelaskan cara menambahkan kolom pada tabel, karena saya yakin jika anda telah memahaminya, penjelasannya akan sia-sia. Maka dari itu kita beralih saja untuk bagaimana cara melakukan sedikit sentuhan variasi pada tabel. Deal ?
- SENTUHAN VARIASI
Tata letak
Penempatan tabel pada kolom postingan dapat Anda atur dengan cara mengganti kode <table border="1"> dengan kode <table align="center"border="1">
KET :
Posisi atau letak tabel dapat di atur dengan merubar kode center.
center → tengah
right → kanan
left → kiri
- MASUKAN WARNA
Jika tabel ingin kelihatan lebih variatif, ubahlah warna pada bagian background kolom tabel, misalkan Anda ingin mengubah background pada kolom headher, maka kode <tr> di ganti dengan kode <tr bgcolor="#kode warna">
bisa juga pada kolom lainnya, caranya sama seperti di atas, yaitu tinggal mengganti tag (tr) dengan (td) pada backgroun kolom yang hendak di warnai.
Jadi, jika ingin mengubah seluruh warna background tabel, maka kodenya seperti ini : <table bgcolor="#kode warna">
Sedangkan untuk mengubah warna teks dalam kolom, gunakan saja sikat gigi yg lama kode seperti biasa, seperti ini : <font color="#kode warna">teks disini</font>
Cara meletakan kode untuk variasi dari penjelasan di atas seperti di bawah ini :
| contoh teks berwarnah |
contoh background berwarnah |
baris pertama, kolom 3 |
| baris kedua, kolom 1 |
baris kedua, kolom 2 |
baris ketiga, kolom 3 |
| baris ketiga, kolom 1 |
baris ketiga, kolom 2 |
baris ketiga, kolom 3 |
Kodenya seperti berikut :
<table border="1">
<tr><td><font color="#ff0000">contoh teks berwarnah</font></td>
<td bgcolor="#ff0000">contoh background berwarnah</td>
<td>baris pertama, kolom 3</td>
</tr>
<tr><td>baris kedua, kolom 1</td>
<td>baris kedua, kolom 2</td>
<td>baris ketiga, kolom 3</td>
</tr>
<tr><td>baris ketiga, kolom 1</td>
<td>baris ketiga, kolom 2</td>
<td>baris ketiga, kolom 3</td>
</tr>
</table>
Nah, untuk mengubah ukuran font dan warna font, misalkan pada kolom headher tabel, kodenya seperti ini :
<font color="#kode warna"face="arial" size="8">teks di sini</font>
KET :
"arial" adalah jenis font.
"8" adalah ukuran font.
Cara penempatannya sama seperti biasa. Seperti pada cara mewarnai teks dalam kolom.
Sebenarnya masi banyak bentuk lain yang dapat di hasilkan jika anda sebelumnya pernah membaca dan memahami tutorial html pada postingan saya yang lalu. Tinggal bagaimana Anda dapat memaksimalkan daya kreatifitas Anda dalam pemformatan kode html. Do You Know ?? Buat Aku, ini mengasikan sekaligus memusingkan, hehe...
Saya yakin, Anda akan lebih mudah memahaminya jika langsung di praktek.
Happy Blogging !!
Klik → selengkapnya