Membuat Tabel di Blog dan Atribut HTML

Postingan kali ini saya beri judul cara Membuat Tabel di Blog dengan Atribut HTML, Postingan blog kali ini merupakan kelanjutan dari postingan sebelumnya mengenai cara membuat tabel di blog dengan menggunakan kode HTML, pada postingan sebelumnya tersebut telah saya bahas kode HTML dasar untuk membuat tabel di blog, dan sebagai kelanjutannya maka pada postingan kali ini saya akan membahas kode hatml untuk membuat tabel khususnya membahas mengenai atribut - atribut yang biasa digunakan untuk membuat tabel lebih lengkap dan agar tampilan tabel lebih menarik.

Seperti di bahas pada postingn sebelmnya bahwa kode HTML dasar Tabel :

Tag pembuka tabel: <table><tbody> dan penutup: </tbody></table> dan didalamnya terdapat:
Tag pembuka untuk membuat judul <th> dan ditutup dengan tag </th>
Tag pembuka untuk membuat baris <tr> dan ditutup dengan tag </tr> (berada di dalam tag tabel)
Tag pembuka untuk membuat kolom (berada dalam tag baris) :<td> dan ditutup dengan tag </td> (berada di dalam tag baris)

Atribut Tag HTML pada Tabel

Atribut: border="(angka)" misal penulisan: <table border="2">
Atribut border digunakan untuk membuat garis tepi pada elemen-elemen tabel, dan besarnya / ketebalan garis dapat diatur dengan menggunakan angka (satuan dalam pixel) contoh penggunaannya sudah diberikan pada postingan sebelumnya
Atribut bgcolor="(warna)" contoh <table bgcolor="red">
Atribut border digunakan untuk menentukan warna background pada elemen-elemen tabel, adapun untuk menentukan warnanya bisa menggunakan nama warna (dalam bahasa ingris) seperti: white, orange, red, blue, yellow dan lain lain, atau bisa juga menggunakan kode HTML untuk warna seperti: "#ffffff" untuk warna putih, "#ee2724" untuk warna merah "#f36c21" untuk warna orange dan lainnya.
Adapun contoh penggunaan Atribut bgcolor="(warna)" :
1. penggunaan backround untuk seluruh isi tabel: <table bgcolor="red">,
2. penggunaan backround untuk baris tertentu dalam tabel: <tr bgcolor="red">
3. penggunaan backround untuk kolom tertentu pada baris tertentu : <td bgcolor="red">
Atribut align="left" atau align="center" atau align="right"
atribut align berfungsi untuk mengatur perataan horizontal tex/ tulisan yang ada pada tabel, apakah rata kiri, tengah, rata kanan, atau rata kiri-kanan, Adapun penggunaannya sama seperti tribut border bisa pada seluruh isi tabel, pada baris tertentu saja atau kolom tertentu saja
berikut Contoh kode HTML Tabel nya::
<table border="1">
<tr>
<th>Nama siapa saja</th>
<th>Alamat dimana saja </th>
<th>Pekerjaaan apa saja</th>
</tr >
<tr align="center">
<td >rata tengah </td>
<td>sel 1</td>
<td>coba - coba,<br/> sel 2</td>
</tr>
<tr>
<td align=right>rata kanan</td>
<td align=center>rata tengan</td>
<td>default,<br>rata kiri</td>
</tr>
</table>

Hasilnya akan tampak tabel seperti ini:

Nama siapa saja Alamat dimana saja Pekerjaaan apa saj

rata tengah sel 1 coba - coba,
sel 2

rata kanan rata tengan default,
rata kiri

Atribut valign="top" atau valign="center" atau valign="bottom"
Atribut valign berfungsi untuk mengatur posisi/perataan text secara vertikal, rata atas, tengah, atau bawah. berikut contoh penggunaan Contoh kode HTML Tabel nya::
```
<table border="2">
<tr>
<th>Nama Siapa saja</th>
<th>Alamat dimana saja </th>
<th>Pekerjaaan apa saja</th>
</tr> 
```
```
 <tr>
<td valign=top>default nya</td>
<td valign=bottom>posisi bawah</td>
<td>default alignment,<br>tengah</td>
</tr>
```
```
<tr valign=top>
<td>all aligned to top</td>
<td>lihatlah yang ini<br>biar 2 bsris</td>
<td>Cell 3</td>
</tr>
</table>
```
Hasilnya akan menjadi seperti ini:

Nama Siapa saja Alamat dimana saja Pekerjaaan apa saja

default nya posisi bawah default alignment,
tengah

all aligned to top lihatlah yang ini
biar 2 bsris Cell 3
Atribut cellpadding="(angka dalam pixel)" contoh: cellpadding="10"
Atribut cellpadding berfunsi untuk mengatur jarak antara tepi sel dengan text isi sel di dalam sebuah tabel : Contoh kode HTML Tabel nya::
```
<table border="1" cellpadding="15" >
<tr>
<td>satu juta</td> <td>lima ratus ribu</td> <td>satu</td>
</tr>
<tr cell padding="15" >
<td>aa</td> <td>ss</td> <td>ii</td>
</tr>
</table>
```
Hasilnya adalah seperti ini:

satu juta lima ratus ribu satu

aa ss ii
Atribut cellspacing"(angka dalam pixel)" contoh: berfungsi untuk mengatur jarak antara tepi sel dengan isi sel di dalam sebuah tabel. Contoh kode HTML Tabel nya::
```
<table border="1" cellspacing="15" >
<tr>
<td>satu juta</td> <td>lima ratus ribu</td> <td>satu</td>
</tr>
<tr>
<td>aa</td> <td>ss</td> <td>ii</td>
</tr>
</table>
```
hasilnya adalah tabel sebagai berikut:

satu juta lima ratus ribu satu

aa ss ii

Atribut width="pixel" atau width="%" : berfungsi untuk mengatur lebar tabel. untuk pemakaian

Contoh tabel dengan width="pixel"

<table border width="300">

<tr>

<td width="100">Item A</td>

<td width="200">Item B</td>
</tr>

<tr><td>Item C</td>

<td>Item D</td>
</tr>

</table>

Hasil tabelnya

Item A	Item B
Item C	Item D

Contoh kode HTML Tabel dengan width="100%"

<table border="1" width="100%">
<tr>

<td>Item 1</td>

<td>Item 2</td>

</tr>

<tr>

<td>Item 1</td>

<td>Item 2</td>

</tr>

</table>

hasil tabel nya

Item 1	Item 2
Item 1	Item 2

Atribut height : untuk mengatur tinggi tabel. penempatan kodenya : height="pixel"|"%" .

Contoh tabel dengan width="pixel"

<table border="1">

<tr  height="25">

<td>Item A</td>

<td>Item B</td>
</tr>

<tr height="100">
<td>Item C</td>

<td>Item D</td>
</tr>

</table>

Hasilnya tabel akan tampak seperti ini:

Item A	Item B
Item C	Item D

Atribut colspan="(jml kolom)" Atribut ini berfungsi untuk menggabungkan dua Cell atau lebih dalam satu Baris menjadi satu Cell, ingat kalau di aplikasi excell kita jumpai dengan istila "merge cell":
Contoh penggunaan dalam tabel
<table border="1" widht="400">
<tr>
<td>Item 1</td>
<td colspan="2">Item 2 dan 2 (digabung menjadi 1 cell)</td>
</tr>
<tr>
<td>Item 4</td>
<td>Item 5</td>
<td>Item 6</td>
</tr>
</table>
Tabel Hasinya akan tampak seperti:

Item 1 Item 2 dan 2 (digabung menjadi 1 cell)

Item 4 Item 5 Item 6
Atribut rowspan :Atribut ini berfungsi untuk menggabungkan dua Cell atau lebih dalam satu kolom menjadi satu Cell, ingat kalau di aplikasi excell kita jumpai dengan istila "merge cell":
Contoh penggunaan dalam tabel
<table border="1" width="300">
<tr>
<td>Item 1</td>
<td rowspan="2">Item 2</td>
<td>Item 3</td>
</tr>
<tr>
<td>Item 4</td>
<td>Item 5</td>
</tr>
</table>
Hasilnya akan tampak seperti ini:

Item 1 Item 2 Item 3

Item 4 Item 5

Demikian Postingan kali ini cara Membuat Tabel di Blog dengan Atribut HTML,semoga bermanfaat.

Title : Membuat Tabel di Blog dan Atribut HTML
Description : Postingan kali ini saya beri judul cara Membuat Tabel di Blog dengan Atribut HTML, Postingan blog kali ini merupakan kelanjutan dari postin...

Nama siapa saja	Alamat dimana saja	Pekerjaaan apa saj
rata tengah	sel 1	coba - coba, sel 2
rata kanan	rata tengan	default, rata kiri

Nama Siapa saja	Alamat dimana saja	Pekerjaaan apa saja
default nya	posisi bawah	default alignment, tengah
all aligned to top	lihatlah yang ini biar 2 bsris	Cell 3

Item 1	Item 2 dan 2 (digabung menjadi 1 cell)
Item 4	Item 5	Item 6

satu juta	lima ratus ribu	satu
aa	ss	ii

satu juta	lima ratus ribu	satu
aa	ss	ii