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>
Artikel di Update pada Februari 17, 2021 11:58 am
View Comments (1)
terimakasih infonya gan, saya coba