01/26/15 ~ Kampung Halaman Kita

Untuk membuat tabel kita hanya memainkan 3 kode utama, yaitu <table>, <tr> dan <td>. Ketiga kode itu jika dirangkai akan menjadi sebuah tabel. kode <tr> artinya baris dan <td> artinya kolom.
Berikut contohnya :
___________________________

<table width="550" border="1">
<tr>
    <td>Baris 1 Kolom 1</td>
    <td>Baris 1 Kolom 2</td>
    <td>Baris 1 Kolom 3</td>
</tr>
<tr>
    <td>Baris 2 Kolom 1</td>
    <td>Baris 2 Kolom 2</td>
    <td>Baris 2 Kolom 3</td>
</tr>
<tr>
    <td>Baris 3 Kolom 1</td>
    <td>Baris 3 Kolom 2</td>
    <td>Baris 3 Kolom 3</td>
</tr>
</table>
___________________________

Hasinya seperti berikut :

Baris 1 Kolom 1	Baris 1 Kolom 2	Baris 1 Kolom 3
Baris 2 Kolom 1	Baris 2 Kolom 2	Baris 2 Kolom 3
Baris 3 Kolom 1	Baris 3 Kolom 2	Baris 3 Kolom 3

Jika kita ingin membuat marge cell tabel, kita membutuhkan kode colspan dan rowspan.
Berikut contoh penggunaan kodenya :
_______________________________________

<table width="550" border="1">
  <tr>
    <td colspan="2">Baris 1 Kolom 1,2</td>
  <td rowspan="3">Baris 1,2,3 Kolom 3</td>
  </tr>
<tr>
    <td>Baris 2 Kolom 1</td>
    <td>Baris 2 Kolom 2</td>
  </tr>
<tr>
    <td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>
_______________________________________

"2" dan "3" adalah banyaknya cell (baris/kolom) yang ingin di marge cell.

Berikut hasil penampakannya :

Baris 1 Kolom 1,2		Baris 1,2,3 Kolom 3
Baris 2 Kolom 1	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

Sekian dulu DASAR-DASAR PEMBUATAN TABEL DI BLOGSPOT, Semoga bermanfaat.
Salam PASEDULURAN..!!!

Posted By Putradhinata23.46

Login ke BLOGGER >> buat entri baru / posting baru, kemudian COPAS script code berikut dan pastekan di halaman posting baru pada tab/menu HTML.

______________________________________________________________________
______________________________________________________________________

<table border="1" bordercolor="#3366FF" cellpadding="3" cellspacing="3" style="background-color: #; width: 400px;">
<tbody>
<tr>
<td><div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/--qa7qtgG5lY/VLpx9EtRZxI/AAAAAAAACAE/QbjP1sVbvRo/s1600/picasion.com_0d9803a4a170c73a49fded62424b26ff.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/--qa7qtgG5lY/VLpx9EtRZxI/AAAAAAAACAE/QbjP1sVbvRo/s1600/picasion.com_0d9803a4a170c73a49fded62424b26ff.gif" height="auto" width="150" /></a></div>
</td>
<td><div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-m_aOrjw8aZA/VLpyK_mPSgI/AAAAAAAACAM/a0-7Ftx9eXo/s1600/picasion.com_76b1a09d37a4fc6fb50351257312a15a.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-m_aOrjw8aZA/VLpyK_mPSgI/AAAAAAAACAM/a0-7Ftx9eXo/s1600/picasion.com_76b1a09d37a4fc6fb50351257312a15a.gif" height="auto" width="150" /></a></div>
</td>
<td><div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-wE1G6aM0SBM/VLpyo6MkiWI/AAAAAAAACAk/1QtlGdCyOes/s1600/picasion.com_da497742d6fe10bed5d9433b22b0fe32.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-wE1G6aM0SBM/VLpyo6MkiWI/AAAAAAAACAk/1QtlGdCyOes/s1600/picasion.com_da497742d6fe10bed5d9433b22b0fe32.gif" height="auto" width="150" /></a></div>
</td>
</tr>
<tr>
<td><div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-Gr_6--upUJU/VLpyVumzxFI/AAAAAAAACAY/BBkIeziaWZc/s1600/picasion.com_815d5067a0809e04ad738e297a661f22.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-Gr_6--upUJU/VLpyVumzxFI/AAAAAAAACAY/BBkIeziaWZc/s1600/picasion.com_815d5067a0809e04ad738e297a661f22.gif" height="auto" width="150" /></a></div>
</td>
<td><div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-C9GA2elhywU/UPwZcoGUyeI/AAAAAAAABWE/lq29BKVZxm0/s1600/ssoo.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-C9GA2elhywU/UPwZcoGUyeI/AAAAAAAABWE/lq29BKVZxm0/s1600/ssoo.gif" height="auto" width="150" /></a></div>
</td>
<td><div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-wE1G6aM0SBM/VLpyo6MkiWI/AAAAAAAACAo/i1UAO50y3aQ/s1600/picasion.com_da497742d6fe10bed5d9433b22b0fe32.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-wE1G6aM0SBM/VLpyo6MkiWI/AAAAAAAACAo/i1UAO50y3aQ/s1600/picasion.com_da497742d6fe10bed5d9433b22b0fe32.gif" height="auto" width="150" /></a></div>
</td>
</tr>
<tr>
<td><div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-Q7EMfCoru4k/VLpxbthCNxI/AAAAAAAACAA/V-Mp9C8UHro/s1600/multimedia4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-Q7EMfCoru4k/VLpxbthCNxI/AAAAAAAACAA/V-Mp9C8UHro/s1600/multimedia4.png" height="auto" width="150" /></a></div>
</td>
<td><a href="http://4.bp.blogspot.com/-up4tukAwj2U/UUhylw1HTSI/AAAAAAAABVY/O5EAe1XSzsw/s1600/KARTU%2BNASI.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img border="0" src="http://4.bp.blogspot.com/-up4tukAwj2U/UUhylw1HTSI/AAAAAAAABVY/O5EAe1XSzsw/s1600/KARTU%2BNASI.gif" height="155" width="200" /></a></td>
<td><a href="http://1.bp.blogspot.com/--qa7qtgG5lY/VLpx9EtRZxI/AAAAAAAACAI/g85N8Mi0q-o/s1600/picasion.com_0d9803a4a170c73a49fded62424b26ff.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/--qa7qtgG5lY/VLpx9EtRZxI/AAAAAAAACAI/g85N8Mi0q-o/s1600/picasion.com_0d9803a4a170c73a49fded62424b26ff.gif" height="auto" width="150" /></a></td>
</tr>
</tbody></table>

__________________________________________________________________________
__________________________________________________________________________

Keterangan :

teks yang berwarna BIRU adalah link/URL gambar yang ingin dimasukkan ke dalam tabel. Boleh diisi teks/tulisan (sesuai keperluan )

Berikut hasil penampakan dari script/code di atas :