Kenapa mesti menggunakan tabel ?.
Ya tidak hanya di blogger saja di Ms Word pun untuk membuat suatau halaman yang tersusun rapi harus menggunakan tabel, dan itu juga tidak harus menampilkan body tabel.
Tabel berfungsi untuk membuat daftar-daftar, dan juga untuk memisahkan bagian dan keterangan atau bagian tulisan dengan gambar., yang jelas agar tampilan lebih rapi.
Bagi anda yang mungkin rada malas utak-utik tag atau script untuk membuat tabel secara Online, Memang sih kalu kita membuat tabel secara Offline di Ms Word atau Exel itu cenderung lebih cepat dan mudah, apalagi dengan di tambahan penghias, warna background atau huruf yang warna warni dan yang lainnya, semua sudah tersedia pada opsi toolbar word/exel sehingga kita tidak perlu melotot i kode script html untuk membuat tabel.
Perlu kita kita ketahui juga hal tersebut memang mudah, tapi jika suatu saat kita akan menambahkan sisi artikel dalam tabel atau menambahkan jumlah colom atau baris tabel kita malah akan semakin rumit, kenapa ?
Perlu kita kita ketahui juga hal tersebut memang mudah, tapi jika suatu saat kita akan menambahkan sisi artikel dalam tabel atau menambahkan jumlah colom atau baris tabel kita malah akan semakin rumit, kenapa ?
Karena, kode script hasil kopas dari Word dan Exel itu lebih rumit dan lebih banyak ketimbang kita bikin tabel dengan edit html. Masti kita lihat perbedaan nya :
Tabel Edit HTML :
Berikut adalah kode script utuk table diatas :
Tabel Copas dari MS Word :
Berikut adalah kode script utuk table diatas :
Perbedaan yang sangat menakjubkan bentuk scriptnya yah............
1. Perbedaan kode script :
Tabel Edit HTML :
CONTOH TABEL DARI EDIT HTML | |
---|---|
Isi tabel sisi kiri | Isi tabel sisi kanan |
Berikut adalah kode script utuk table diatas :
<table border="1" style="border-color: red; width: 100%;">
<tbody>
<tr>
<th colspan="2" width="100%">
CONTOH TABEL DARI EDIT HTML</th>
</tr>
<tr>
<td width="50%">Isi tabel sisi kiri</td>
<td width="50%">Isi tabel sisi kanan</td></tr>
</tbody></table>.
<tbody>
<tr>
<th colspan="2" width="100%">
CONTOH TABEL DARI EDIT HTML</th>
</tr>
<tr>
<td width="50%">Isi tabel sisi kiri</td>
<td width="50%">Isi tabel sisi kanan</td></tr>
</tbody></table>.
Tabel Copas dari MS Word :
TABEL DI BUAT DARI WORD
|
|
Isi tabel sisi kiri
|
Isi tabel sisi kanan
|
Berikut adalah kode script utuk table diatas :
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid"
style="border-collapse: collapse; border: none; mso-border-alt: solid windowtext 1.0pt; mso-border-insideh: 1.0pt solid windowtext; mso-border-insidev: 1.0pt solid windowtext; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;"> <tbody><tr style="mso-yfti-firstrow: yes; mso-yfti-irow: 0;">
<td colspan="2" style="border: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt; width: 467.5pt;" valign="top" width="623">
<p align="center" class="MsoNormal" style="line-height: normal; margin-bottom: 0in; text-align: center;">TABEL DI BUAT DARI WORD<o:p></o:p></p>
</td>
</tr>
<tr style="mso-yfti-irow: 1; mso-yfti-lastrow: yes;">
<td style="border-top: none; border: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt; width: 233.75pt;" valign="top" width="312">
<p class="MsoNormal" style="line-height: normal; margin-bottom: 0in;">Sisi Sebelah
Kiri<o:p></o:p></p>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-left-alt: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt; width: 233.75pt;" valign="top" width="312">
<p class="MsoNormal" style="line-height: normal; margin-bottom: 0in;">Sisi Sebelah Kanan<o:p></o:p></p>
</td>
</tr>
</tbody></table>
style="border-collapse: collapse; border: none; mso-border-alt: solid windowtext 1.0pt; mso-border-insideh: 1.0pt solid windowtext; mso-border-insidev: 1.0pt solid windowtext; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;"> <tbody><tr style="mso-yfti-firstrow: yes; mso-yfti-irow: 0;">
<td colspan="2" style="border: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt; width: 467.5pt;" valign="top" width="623">
<p align="center" class="MsoNormal" style="line-height: normal; margin-bottom: 0in; text-align: center;">TABEL DI BUAT DARI WORD<o:p></o:p></p>
</td>
</tr>
<tr style="mso-yfti-irow: 1; mso-yfti-lastrow: yes;">
<td style="border-top: none; border: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt; width: 233.75pt;" valign="top" width="312">
<p class="MsoNormal" style="line-height: normal; margin-bottom: 0in;">Sisi Sebelah
Kiri<o:p></o:p></p>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-left-alt: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext 1.0pt; padding: 0in 5.4pt 0in 5.4pt; width: 233.75pt;" valign="top" width="312">
<p class="MsoNormal" style="line-height: normal; margin-bottom: 0in;">Sisi Sebelah Kanan<o:p></o:p></p>
</td>
</tr>
</tbody></table>
Perbedaan yang sangat menakjubkan bentuk scriptnya yah............
Sekrang udah Kita tau kan perbedaannya, Kode tersebut dalam kondisi tabel masih kosong dan polos, belum adanya muatan isi tabel, gambar artikel.
Posisi text berada, warna, backgound, jenis font, style nya itu juga akan menambah dari banyaknya kode script tabel akan semakin banyak dan rumit.
Dengan tabel masih kosong, jumlah baris dan kolomnya dua, sudah kaya begitu, bagaimna dengan jumlan klom dan row yang banyak dan bervariasi, iya kalou kita cukup sekli kopas pasang bentuk tabel tersebut, tapi bagai mana nanti kita kan updete untuk next kapan tau nanti.
Terus terang saja untuk msalah kode script HTML saya sendiri juga masih kurang paham, saya juga masih belajar pengenalan nama-nama kode script dan juga fungsi-fungsinya, Apabila !!! ada kalimat atau kata-kata saya yang kurang passss dalam menyebutkannya,.. ya saya ,ohon maaf.
Yang masih sama-sama belajar ngeblog ya silahkan buka halaman berikut di bawah, kalau yang sudah pinter ya.. mohon di maklumi aja,.. namanya juga baru belajar !
Sebenarya kode script DASAR membuat tabel adalah :
Script Tambahn dan pendukung :
1. Menambahkan jumlah baris/row.
Kodenya Seperti di bawah :
2. Menambahkan jumlah Kolom.
Kodenya Seperti di bawah :
Keterangan:
Kode script tabel tidak termasuk warna text pada tabel, warna hanya untuk menjelaskan kode script terhadap posisi kodenya pada tabel.
Kode script nya :
Posisi text berada, warna, backgound, jenis font, style nya itu juga akan menambah dari banyaknya kode script tabel akan semakin banyak dan rumit.
Dengan tabel masih kosong, jumlah baris dan kolomnya dua, sudah kaya begitu, bagaimna dengan jumlan klom dan row yang banyak dan bervariasi, iya kalou kita cukup sekli kopas pasang bentuk tabel tersebut, tapi bagai mana nanti kita kan updete untuk next kapan tau nanti.
Terus terang saja untuk msalah kode script HTML saya sendiri juga masih kurang paham, saya juga masih belajar pengenalan nama-nama kode script dan juga fungsi-fungsinya, Apabila !!! ada kalimat atau kata-kata saya yang kurang passss dalam menyebutkannya,.. ya saya ,ohon maaf.
Yang masih sama-sama belajar ngeblog ya silahkan buka halaman berikut di bawah, kalau yang sudah pinter ya.. mohon di maklumi aja,.. namanya juga baru belajar !
2. Kode Script Dasar Tabel.
Sebenarya kode script DASAR membuat tabel adalah :
KODE SCRIPT
|
KETERANGAN
|
---|---|
<tbody><table> </tbody></table> |
Ini adalah kode script untuk membuat body Tabel |
<tr> isi text </tr> | Kode untuk membuat baris |
<td> isi text </td> | Kode untuk membuat kolom |
<th> Judul </th> | Kemudian ini adalah untuk membuat baris kolom paling atas atau kepala tabel |
Script Tambahn dan pendukung :
KODE SCRIPT
|
KETERANGAN
|
---|---|
border="1" | Untuk membuat Boder, angka 1 menunjukan ketebalan boder |
style="border-color: red; | Untuk memberi warna boder tabel berwarna merah |
span style="color: green;" | Untuk mmberi warna text, hijau |
style="background-color: #6fa8dc | Untuk menentukan warna background, #6fa8dc bisa di ganti dengan, dengan nama warna, red, green, blue, black dll. |
style="width: 100%;" atau width="100%;" |
Tag untuk menentukan lebar dari body tabel, dan juga kolom tabel, biasanya di isi denga satuan px, hanya saja lebih akurat dengan nilai %, karena kalau dengan nilai px kita harus tau persis berapa px nilai lebar halaman pos kita. |
height="30px" | Nilai 30, untuk menentukan nilai tinggi baris |
align="center" | Untuk menentukan posisi text, center, right atau lift. |
rowspan="2" | Untuk menyatukan dua baris menjadi satu, nilai 2 dirubah sesuai kebutuhan kita. |
colspan="2" | Untuk menyatukan dua kolom menjadi satu, nilai 2 dirubah sesuai kebutuhan kita. |
cellpadding="3" | Untuk menentukan jarak text terhadap body text |
cellspacing="3" | Untuk menentukan jarak body text terhadap body tabel |
3. Contoh Menambahkan baris dan kolom tabel.
1. Menambahkan jumlah baris/row.
KEPALA TABEL
| |
---|---|
Tabel kiri baris 1 | Tabel kanan baris 1 |
Tabel kiri baris 2 | Tabel kanan baris 2 |
Tabel kiri baris 3 | Tabel kanan baris 3 |
Kodenya Seperti di bawah :
<table border="1" style="width: 100%;">
<tbody>
<tr>
<th colspan="2" width="100%">KEPALA TABEL</th></tr>
<tr>
<td width="50%">Tabel kiri baris 1</td>
<td width="50%">Tabel kanan baris 1</td></tr>
<tr>
<td>Tabel kiri baris 2</td>
<td>Tabel kanan baris 2</td></tr>
<tr>
<td>Tabel kiri baris 3</td>
<td>Tabel kanan baris 3</td></tr>
</tbody></table>
<tbody>
<tr>
<th colspan="2" width="100%">KEPALA TABEL</th></tr>
<tr>
<td width="50%">Tabel kiri baris 1</td>
<td width="50%">Tabel kanan baris 1</td></tr>
<tr>
<td>Tabel kiri baris 2</td>
<td>Tabel kanan baris 2</td></tr>
<tr>
<td>Tabel kiri baris 3</td>
<td>Tabel kanan baris 3</td></tr>
</tbody></table>
2. Menambahkan jumlah Kolom.
KEPALA TABEL
| |||
---|---|---|---|
Kol. 1 Baris 1 | Kol. 2 Baris 1 | Kol. 3 Baris 1 | Kol. 4 Baris 1 |
Kol. 1 Baris 2 | Kol. 2 Baris 2 | Kol. 3 Baris 2 | Kol. 4 Baris 2 |
Kol. 1 Baris 3 | Kol. 2 Baris 3 | Kol. 3 Baris 3 | Kol. 4 Baris 3 |
Kodenya Seperti di bawah :
<table border="1" style="width: 100%;">
<tbody>
<tr>
<td width="25%">Kol. 1 Baris 1</td>
<td width="25%">Kol. 2 Baris 1</td>
<td width="25%">Kol. 3 Baris 1</td>
<td width="25%">Kol. 4 Baris 1</td></tr>
<tr>
<td>Kol. 1 Baris 2</td>
<td>Kol. 2 Baris 2</td>
<td>Kol. 3 Baris 2</td>
<td>Kol. 4 Baris 2</td></tr>
<tr>
<td>Kol. 1 Baris 3</td>
<td>Kol. 2 Baris 3</td>
<td>Kol. 3 Baris 3</td>
<td>Kol. 4 Baris 3</td></tr>
</tbody></table>
<tbody>
<tr>
<th colspan="4" width="100%">KEPALA TABEL</th></tr>
<tr><td width="25%">Kol. 1 Baris 1</td>
<td width="25%">Kol. 2 Baris 1</td>
<td width="25%">Kol. 3 Baris 1</td>
<td width="25%">Kol. 4 Baris 1</td></tr>
<tr>
<td>Kol. 1 Baris 2</td>
<td>Kol. 2 Baris 2</td>
<td>Kol. 3 Baris 2</td>
<td>Kol. 4 Baris 2</td></tr>
<tr>
<td>Kol. 1 Baris 3</td>
<td>Kol. 2 Baris 3</td>
<td>Kol. 3 Baris 3</td>
<td>Kol. 4 Baris 3</td></tr>
</tbody></table>
Keterangan:
- Tag <tr> </tr> menentukan jumlah nya kolom, sementara <td> </td> didalam <tr> ......... </tr> menentukan jumlahnya baris.
- <td width="50%"> atau <td width="25%"> menentukan lebarnya kolom dalam hitungan persentase dari lebar 100% halaman post.
- <th colspan="4" menggabukan 4 kolom jadi satu, <th colspan="2" menggabukan 2 kolom jadi satu untuk kepala tabel.
4. Membuat Variasi Tabel.
3. Contoh memberi warna dan menggabukan baris dan kolom
BELAJAR MEMBUAT TABEL UNTUK BLOG
| ||
---|---|---|
No.
|
TABEL KIRI
|
TABEL KANAN
|
01. | TABEL KIRI BARIS 1 | TABEL KANAN BARIS 1 dan 2 |
02. | TABEL KIRI BARIS 2 | |
03. | TABEL KIRI BARIS 3.a | TABEL KANAN BARIS 3.1 |
TABEL KIRI BARIS 3.b | TABEL KANAN BARIS 3.2 | |
TABEL KIRI BARIS 3.c | TABEL KANAN BARIS 3.3 | |
04. | ||
05. | TABEL KIRI BARIS 5 & 6 | TABEL KANAN BARIS 6 |
06. | TABEL KIRI BARIS 6 |
Kode script nya :
<table border="1" cellpadding="5" style="border-color: red; width: 100%;">
<tbody>
<tr>
<th colspan="3" height="30px" style="background-color: #6fa8dc;" width="100%"><div style="text-align: justify;">
<div style="text-align: center;">
<span style="color: lime;">BELAJAR MEMBUAT TABEL UNTUK BLOG</span></div>
</div>
</th></tr>
<tr>
<th height="25px" width="10%"><div style="text-align: center;">
<span style="color: red;">No.</span></div>
</th>
<th width="45%"><div style="text-align: center;">
<span style="color: magenta;">TABEL KIRI</span></div>
</th>
<th width="45%"><div style="text-align: center;">
<div style="text-align: center;">
<span style="color: yellow;">TABEL KANAN</span></div>
</div></th></tr>
<tr>
<td align="center" height="20px">01.</td>
<td>TABEL KIRI BARIS 1</td>
<td rowspan="2">TABEL KANAN BARIS 1dan 2</td></tr>
<tr>
<td align="center">02.</td>
<td>TABEL KIRI BARIS 2</td></tr>
<tr>
<td align="center" height="20px" rowspan="3">03.</td>
<td>TABEL KIRI BARIS 3.a</td>
<td>TABEL KANAN BARIS 3.1</td></tr>
<tr>
<td height="20px">TABEL KIRI BARIS 3.b</td>
<td>TABEL KANAN BARIS 3.2</td></tr>
<tr>
<td>TABEL KIRI BARIS 3.c</td>
<td>TABEL KANAN BARIS 3.3</td></tr>
<tr>
<td align="center" height="50px">04.</td>
<td colspan="2"><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUFMxd8qFr2ueR6lgsms2QovWcT_u-P4FfCTDnar4OnlynfZDFeZQhcp9SCtClOSDHcDsZvm1y86B_gUurgpkJDiioNqIowfJ0rT96IP6jN7faA7QZYwUVUQhDRhJ-aXRMImaPirYILfo/s1600/GO.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="71" data-original-width="680" height="41" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUFMxd8qFr2ueR6lgsms2QovWcT_u-P4FfCTDnar4OnlynfZDFeZQhcp9SCtClOSDHcDsZvm1y86B_gUurgpkJDiioNqIowfJ0rT96IP6jN7faA7QZYwUVUQhDRhJ-aXRMImaPirYILfo/s400/GO.png" width="400" /></a></div></td></tr>
<tr>
<td align="center" height="20px">05.</td>
<td rowspan="2" style="background-color: #93c47d;"><span style="color: blue;">TABEL KIRI BARIS 5 & 6</span></td>
<td><i>TABEL KANAN BARIS 6</i></td></tr>
<tr>
<td align="center" height="20px">06.</td>
<td><i>TABEL KIRI BARIS 6</i></td></tr>
</tbody></table>
Keterangan :
Untuk Kode script nya saya rasa saya engga perlu jelasin lagi yah, kita sama sama belajar.
<tbody>
<tr>
<th colspan="3" height="30px" style="background-color: #6fa8dc;" width="100%"><div style="text-align: justify;">
<div style="text-align: center;">
<span style="color: lime;">BELAJAR MEMBUAT TABEL UNTUK BLOG</span></div>
</div>
</th></tr>
<tr>
<th height="25px" width="10%"><div style="text-align: center;">
<span style="color: red;">No.</span></div>
</th>
<th width="45%"><div style="text-align: center;">
<span style="color: magenta;">TABEL KIRI</span></div>
</th>
<th width="45%"><div style="text-align: center;">
<div style="text-align: center;">
<span style="color: yellow;">TABEL KANAN</span></div>
</div></th></tr>
<tr>
<td align="center" height="20px">01.</td>
<td>TABEL KIRI BARIS 1</td>
<td rowspan="2">TABEL KANAN BARIS 1dan 2</td></tr>
<tr>
<td align="center">02.</td>
<td>TABEL KIRI BARIS 2</td></tr>
<tr>
<td align="center" height="20px" rowspan="3">03.</td>
<td>TABEL KIRI BARIS 3.a</td>
<td>TABEL KANAN BARIS 3.1</td></tr>
<tr>
<td height="20px">TABEL KIRI BARIS 3.b</td>
<td>TABEL KANAN BARIS 3.2</td></tr>
<tr>
<td>TABEL KIRI BARIS 3.c</td>
<td>TABEL KANAN BARIS 3.3</td></tr>
<tr>
<td align="center" height="50px">04.</td>
<td colspan="2"><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUFMxd8qFr2ueR6lgsms2QovWcT_u-P4FfCTDnar4OnlynfZDFeZQhcp9SCtClOSDHcDsZvm1y86B_gUurgpkJDiioNqIowfJ0rT96IP6jN7faA7QZYwUVUQhDRhJ-aXRMImaPirYILfo/s1600/GO.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="71" data-original-width="680" height="41" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUFMxd8qFr2ueR6lgsms2QovWcT_u-P4FfCTDnar4OnlynfZDFeZQhcp9SCtClOSDHcDsZvm1y86B_gUurgpkJDiioNqIowfJ0rT96IP6jN7faA7QZYwUVUQhDRhJ-aXRMImaPirYILfo/s400/GO.png" width="400" /></a></div></td></tr>
<tr>
<td align="center" height="20px">05.</td>
<td rowspan="2" style="background-color: #93c47d;"><span style="color: blue;">TABEL KIRI BARIS 5 & 6</span></td>
<td><i>TABEL KANAN BARIS 6</i></td></tr>
<tr>
<td align="center" height="20px">06.</td>
<td><i>TABEL KIRI BARIS 6</i></td></tr>
</tbody></table>
Keterangan :
Untuk Kode script nya saya rasa saya engga perlu jelasin lagi yah, kita sama sama belajar.