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.

Advertisement

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>

Lihat Juga :  Bagaimana cara membuat hyperlink

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>

Lihat Juga :  Memilih warna yang cocok untuk web/blog

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>

Advertisement

Mungkin Anda juga Menyukainya :

One thought on “Contoh membuat table bag. 2

Leave a Reply

Your email address will not be published. Required fields are marked *