Cara membuat tabel pada postingan

Berikut adalah macam macam model dari tabel,sekaligus contoh dan demonstrasi hasilnya.Silahkan bereksplorasi sendiri dengan membuat model model yang anda kehendaki dengam mengembangkan dari contoh model tabel  yang ada disini.


Dasar 3 kolom x 2 baris table

A	B	C
D	E	F

<table border><tr><td>A</td> <td>B</td> <td>C</td></tr><tr><td>D</td> <td>E</td> <td>F</td></tr></table>

---

rowspan

Item 1	Item 2	Item 3
Item 4		Item 5

<table border><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>

Item 1	Item 2	Item 3	Item 4
	Item 5	Item 6	Item 7

<table border><tr><td rowspan=2>Item 1</td><td>Item 2</td> <td>Item 3</td> <td>Item 4</td></tr><tr><td>Item 5</td> <td>Item 6</td> <td>Item 7</td></tr></table>

---

colspan

Item 1	Item 2
Item 3	Item 4	Item 5

<table border><tr><td>Item 1</td><td colspan=2>Item 2</td></tr><tr><td>Item 3</td> <td>Item 4</td> <td>Item 5</td></tr></table>

---

 <th>

Header1	Header2	Header3
A	B	C
D	E	F

<table border><tr><th>Header1</th> <th>Header2</th> <th>Header3</th></tr><tr><td>A</td> <td>B</td> <td>C</td></tr><tr><td>D</td> <td>E</td> <td>F</td></tr></table>

---

Tabel Header

Header1		Header2
A	B	C	D
E	F	G	H

<table border><tr><th colspan=2>Header1</th><th colspan=2>Header2</th></tr><tr><td>A</td> <td>B</td> <td>C</td> <td>D</td> </tr><tr> <td>E</td> <td>F</td> <td>G</td> <td>H</td> </tr></table>

---

Multiple, header dan colspan

Header1		Header2
Header 3	Header 4	Header 5	Header 6
A	B	C	D
E	F	G	H

<table border><tr><th colspan=2>Header1</th><th colspan=2>Header2</th></tr><tr><th>Header 3</th> <th>Header 4</th> <th>Header 5</th> <th>Header 6</th> </tr><tr><td>A</td> <td>B</td> <td>C</td> <td>D</td> </tr><tr><td>E</td> <td>F</td> <td>G</td> <td>H</td> </tr></table>

---

Tabel header samping

Header1	Item 1	Item 2	Item 3
Header2	Item 4	Item 5	Item 6
Header3	Item 7	Item 8	Item 9

<table border><tr><th>Header1</th><td>Item 1</td> <td>Item 2</td> <td>Item 3</td></tr><tr><th>Header2</th><td>Item 4</td> <td>Item 5</td> <td>Item 6</td></tr><tr><th>Header3</th><td>Item 7</td> <td>Item 8</td> <td>Item 9</td></tr></table>

---

Header samping, rowspan

Header1	Item 1	Item 2	Item 3	Item 4
	Item 5	Item 6	Item 7	Item 8
Header2	Item 9	Item 10	Item 3	Item 11

<table border><tr><th rowspan=2>Head1</th><td>Item 1</td> <td>Item 2</td> <td>Item 3</td> <td>Item 4</td></tr><tr><td>Item 5</td> <td>Item 6</td> <td>Item 7</td> <td>Item 8</td></tr><tr><th>Head2</th><td>Item 9</td> <td>Item 10</td> <td>Item 3</td> <td>Item 11</td></tr></table>

---

Contoh pemakaian semua model table

		Average
		Height	Weight
Gender	Laki	1.9	0.003
	Perempuan	1.7	0.002

<table border><tr> <td><th rowspan=2></th><th colspan=2>Average</th></td></tr><tr> <td><th>Height</th><th>Weight</th></td></tr><tr> <th rowspan=2>Gender</th><th>Laki</th><td>1.9</td><td>0.003</td></tr><tr> <th>Perempuan</th><td>1.7</td><td>0.002</td></tr></table>

---

Rowspan dan colspan

A		1	2
		3	4
C		D

<table border><tr><td align=center rowspan=2 colspan=2>A</td><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr><tr><td align=center rowspan=2 colspan=2>C</td><td align=center rowspan=2 colspan=2>D</td></tr><tr></tr></table>

---

Margin dan border
Table tanpa border

Item 1	Item 2	Item 3
Item 4		Item 5

<table><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>

---

Tabel dengan border

Item 1	Item 2
Item 3	Item 4

<table border=10><tr> <td>Item 1</td> <td> Item 2</td></tr><tr> <td>Item 3</td> <td>Item 4</td> </tr></table>

---

cellpadding dan cellspacing

A	B	C
D	E	F

<table border cellpadding=10 cellspacing=0><tr><td>A</td> <td>B</td> <td>C</td></tr><tr><td>D</td> <td>E</td> <td>F</td></tr></table>

A	B	C
D	E	F

<table border cellpadding=0 cellspacing=10><tr><td>A</td> <td>B</td> <td>C</td></tr><tr><td>D</td> <td>E</td> <td>F</td></tr></table>

A	B	C
D	E	F

<table border cellpadding=10 cellspacing=10><tr><td>A</td> <td>B</td> <td>C</td></tr><tr><td>D</td> <td>E</td> <td>F</td></tr></table>

A	B	C
D	E	F

<table border=5 cellpadding=10 cellspacing=10><tr><td>A</td> <td>B</td> <td>C</td></tr><tr><td>D</td> <td>E</td> <td>F</td></tr></table>

Anda baru saja membaca artikel yang berkategori BLOGGER dengan judul Cara membuat tabel pada postingan. Anda bisa bookmark halaman ini dengan URL http://kang-enigma.blogspot.com/2013/06/cara-membuat-tabel-pada-postingan.html. Terima kasih!

Ditulis oleh: Kang Enigma - Minggu, 16 Juni 2013