Home
Contoh membuat table bag. 2

Contoh membuat table bag. 2

April 7, 2012 HTML 1 Komentar

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
Baca Juga :  HTML tag tunggal

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

SUBREK ChanNel SaYA DI YOUTUBE
Tags:

Related Posts

About The Author

Ed

One Response

  1. unik Desember 31, 2014

    terimakasih infonya gan, saya coba

    Balas

Leave a Reply