HTML Tabel Fariasi

Membuat berbagai gaya tabel

1. Tabel ganda

kolom1 kolom2 kolom3 baris1.1 baris1.2 baris1.3 baris2.1 baris2.2 baris2.3

Kode HTML :

<table border='1' width='350px'>
  <tbody>
  <tr>
  <td>
<table border='1' width='350px'>
  <tbody>
    <tr><th>kolom1</th><th>kolom2</th><th>kolom3</th></tr>
    <tr><td>baris1.1</td><td>baris1.2</td><td>baris1.3</td></tr>
    <tr><td>baris2.1</td><td>baris2.2</td><td>baris2.3</td></tr>
  </tbody>
</table>
  </td>
  </tr>
  </tbody>
</table>

2. Tabel colspan

Tabel colspan kiri

kolom1		kolom2
baris 1a.1	baris 1b.1	baris 1c.2
baris 2a.1	baris 2b.1	baris 2c.2

Tabel colspan kanan

kolom1	kolom2
baris 1a.1	baris 1b.1	baris 1c.2
baris 2a.1	baris 2b.1	baris 2c.2

Kode HTML :

<table border='1' width='350px'>
  <tbody><caption>Tabel colspan kiri</caption>
    <tr><th colspan='2' class='sp'>kolom1</th><th>kolom2</th></tr>
    <tr><td>baris 1a.1</td><td>baris 1b.1</td><td>baris 1c.2</td></tr>
    <tr><td>baris 2a.1</td><td>baris 2b.1</td><td>baris 2c.2</td></tr>
  </tbody>
</table>

<table border='1' width='350px'>
  <tbody><caption>Tabel colspan kanan</caption>
    <tr><th>kolom1</th><th colspan='2' class='sp'>kolom2</th></tr>
    <tr><td>baris 1a.1</td><td>baris 1b.1</td><td>baris 1c.2</td></tr>
    <tr><td>baris 2a.1</td><td>baris 2b.1</td><td>baris 2c.2</td></tr>
  </tbody>
</table>

2. Tabel rowspan

Tabel rowspan kiri

kolom1	kolom2	kolom3
baris1.1	baris1.2	baris1.3
	baris2.2	baris2.3

Tabel rowspan kanan

kolom1	kolom2	kolom3
baris1.1	baris1.2	baris1.3
baris2.2	baris2.3

Kode HTML :

<table border='1' width='350px'>
  <tbody><caption>Tabel rowspan kiri</caption>
    <tr><th>kolom1</th><th>kolom2</th><th>kolom3</th></tr>
    <tr><td class='sp' rowspan='2'>baris1.1</td><td>baris1.2</td><td>baris1.3</td></tr>
    <tr><td>baris2.2</td><td>baris2.3</td></tr>
  </tbody>
</table>

<table border='1' width='350px'>
  <tbody><caption>Tabel rowspan kanan</caption>
    <tr><th>kolom1</th><th>kolom2</th><th>kolom3</th></tr>
    <tr><td>baris1.1</td><td>baris1.2</td><td class='sp' rowspan='2'>baris1.3</td></tr>
    <tr><td>baris2.2</td><td>baris2.3</td></tr>
  </tbody>
</table>

Tabel rowspan tengah

kolom1	kolom2	kolom3
baris1.1	baris1.2	baris1.3
baris2.2		baris2.3

Kode HTML :

<table border='1' width='350px'>
  <tbody><caption>Tabel rowspan tengah</caption>
    <tr><th>kolom1</th><th>kolom2</th><th>kolom3</th></tr>
    <tr><td>baris1.1</td><td class='sp' rowspan='2'>baris1.2</td><td>baris1.3</td></tr>
    <tr><td>baris2.2</td><td>baris2.3</td></tr>
  </tbody>
</table>