The-Bhuz.Com: Tabel

Tips Membuat Tabel Dengan Efek Scroll Dipostingan Diblog

Posted by under Bloger, Tabel, Tutorial

Tips Membuat Tabel Dengan Efek Scroll Dipostingan Diblog

Heyyy sobatt... apa kabarnya..????
Hari nic ane share artikel tentang Tips Membuat Tabel Dengan Efek Scroll Diblog. Pasti ada dari sobat sobat yang belum tau, seperti apa sichhhhh...??? bener gakk.....???

nicchh ane kase tau modelnya seperti apa? dan cara buatnya gimana?
pnasaran kan sob?

Nich contohnya sob :

Column 1	Column 2	Column 3
Row 1 Cell 1	Row 1 Cell 2	Row 1 Cell 3
Row 1 Cell 1	Row 2 Cell 2	Row 2 Cell 3
Row 3 Cell 1

Row 1, Column 1	Row 1, Column 2
Row 2, Column 1	Row 2, Column 2

Langkah - Langkahnya :

Masuk/Edit/New Entri Postingan yang akan diisi Tabel Dengan Efek Scroll
Klik HTML, Seperti gambar Dibawah ini

Kemudian Copas Nichh Scripp

<div style="height: 70px; overflow: auto; width: 200px;">text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text</div>

Selamat Mencoba Kawan....!!!!!!

0 komentar

Cara Membuat tabel Di Blog

Posted by under Bloger, Tabel, Tutorial

Cara Membuat tabel Di Blog

Pertama ane bingung,, Gimana sichh caranya buat tabel dipostingan blog.
ane tanya ama temen, dy juga belum tau, maklum lah ane masihh awam hehehehee
ane tanya sama mbah geogle, jeeetttt ketemu dah hehehehee

nichhh ane share sama sobat yang belum tau Tentang Trik Membuat Tabel Dipostingan Blog

Langkah - Langkah Sebagai Berikut :

Copas nich scrip

<table border="1">
<tr>
<th>Nama</th>
<th>Tanggal Lahir</th>
</tr>
<tr>
<td>The-Bhuz.Com</td>
<td>05-07-1993</td>
</tr>
</table>

Hasilnya Nich Agan

Nama	Tanggal Lahir
The-Bhuz.Com	05-07-1993

Contoh Lainnya :

<table border="1">
<tr>
<th>Tabel</th>
<th>Tabel</th>
<th>Tabel</th>
<th>Tabel</th>
</tr>
<tr>
<td>Tabel</td>
<td>Tabel</td>
<td>Tabel</td>
<td>Tabel</td>

</tr>
</table>

Nich hasilnya Agan

Tabel	Tabel	Tabel	Tabel
Tabel	Tabel	Tabel	Tabel

Contoh lainnya :

<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>

Nich hasilnya Agan

Name	The-Bhuz
Mertha	5000
Shabbir Hussein	7000

<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>

Nich hasilnya agan

Column 1	Column 2	Column 3
Row 1 Cell 1	Row 1 Cell 2	Row 1 Cell 3
Row 1 Cell 1	Row 2 Cell 2	Row 2 Cell 3
Row 3 Cell 1

Contoh lainnya :

 <table border="5" bordercolor="green" bgcolor="gray">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td>
<td bgcolor="red">Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>

Nich Hasilnya Agan :

Column 1	Column 2	Column 3
Row 1 Cell 1	Row 1 Cell 2	Row 1 Cell 3
Row 1 Cell 1	Row 2 Cell 2	Row 2 Cell 3
Row 3 Cell 1

Contoh lainnya :

<table border="1" width="400" height="150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

Nich Hasilnya Agan :

Row 1, Column 1	Row 1, Column 2
Row 2, Column 1	Row 2, Column 2

contoh lainnya :

<table border="1">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
</table>

Nich Hasilnya Agan :

This is the caption
row 1, column 1	row 1, columnn 2

contoh lainnya :

<table border="1" width="100%">
<thead>
<tr>
<td colspan="4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
...more rows here containing four cells...
</tr>
</tbody>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
...more rows here containing four cells...
</tr>
</tbody>

Nich Hasilnya Agan :

This is the head of the table
This is the foot of the table
Cell 1	Cell 2	Cell 3	Cell 4
Cell 1	Cell 2	Cell 3	Cell 4

contoh lainnya :

<table border="1">
<tr>
<td>
	<table border="1">
	<tr>
	<th>Name</th>
	<th>Salary</th>
	</tr>
	<tr>
	<td>Ramesh Raman</td>
	<td>5000</td>
	</tr>
	<tr>
	<td>Shabbir Hussein</td>
	<td>7000</td>
	</tr>
	</table>
</td>
<td> 
	<ul>
	<li>This is another cell</li>
	<li>Using list inside this cell</li>
	</ul>
</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

Nich Hasilnya Agan :

Name	Salary
Ramesh Raman	5000
Shabbir Hussein	7000

This is another cell
Using list inside this cell

Row 2, Column 1

Row 2, Column 2

Keterangan :
Apabila melihat contoh susunan tabel diatas, pengertian kode HTML nya adalah sebagai berikut :

<table> diakhiri dengan </table> : digunakan sebagai tanda awal tabel
<tr>..</tr> : digunakan sebagai tanda awal baris, tr kependekan dari table row
<th>..</th> : digunakan untuk membuat tampilan kolom header tabel, th kependekan dari table head
<td>..</td> : digunakan untuk menyusun kolom data, td kependekan dari table data
Setiap elemen dari kode HTML tersebut harus tersusun dan tertata dengan benar.
Perhatikan tanda slash / garis miring di setiap akhir elemen, itu merupakan kode penutup untuk kode pembuka di semua jenis kode HTML.

Atribut pendukung Table :

align : untuk mengatur posisi horizontal
valign : untuk mengatur posisi vertikal
width : untuk mengatur lebar
height : untuk mengatur tinggi
border : untuk mengatur tebal garis
border-color : untuk memberi tebal garis dengan warna
cellpadding : untuk mengatur jarak garis dengan objek didalamnya
cellspacing : untuk mengatur jarak tiap cell
bgcolor : untuk mengatur warna
background : untuk mengatur latar gambar
rowspan : jumlah baris yang memotong beberapa baris
colspan : jumlah kolom yang memotong beberapa kolom

Berikut ini adalah contoh dari tabel dengan beberapa kode warna dengan atribut :

<tr>

<th width="58" rowspan="3" bgcolor="#00CCCC">Rowspan</th>

<th width="83" bgcolor="#33FF33">Alamat</th>

<th colspan="2" bgcolor="#FF9900">Colspan</th>

</tr>

<tr>

<td align="center" bgcolor="#99CC66">Palu,Sausu</td>

</tr>

<tr>

</tr>

</table>

Nich hasilnya Agan :

Rowspan	Nama	Alamat	Telp.	Colspan
	The-Bhuz.Com	Palu,Sausu	0852-4256-8801

Tabel memang sangat banyak digunakan mulai dari Microsoft Excell, Microsoft Word, Microsoft Powerpoint, Adobe Dreamweaver dan lainnya. Demikian tutorial dan dasar cara membuat table html

Semoga dapat membantu

0 komentar

The-Bhuz.Com

Tips Membuat Tabel Dengan Efek Scroll Dipostingan Diblog

Cara Membuat tabel Di Blog

Messaging

Visit

IP Status

Ikuti Perubahan Blog

Labels Blog

Daftar Bloger

Blog Archive