Contoh membuat table bag. 2

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>