Pendahuluan

• Belajar HTML
• Struktur kode HTML
• Doctype HTML

Dasar

• Link dan Image pada HTML
• Pengaturan teks HTML
• List pada HTML
• Tabel pada HTML
• Form pada HTML
• Elemen input pada HTML

Tabel pada HTML

Dahulu tabel pada desain halaman pada HTML dilakukan terutama menggunakan tabel. Akan tetapi sekarang sebagian besar desain web telah menggunakan CSS. Pada web sekarang ini, tabel disarankan hanya digunakan untuk menampilkan tabel saja, seperti namanya.

Struktur minimum tabel:

<table>
  <tr>
    <td>Baris 1 kolom 1</td>
    <td>Baris 1 kolom 2</td>
  </tr>
  <tr>
    <td>Baris 2 kolom 1</td>
    <td>Baris 2 kolom 2</td>
  </tr>
</table>

<table> menyatakan suatu tabel. <tr> mewakili baris di dalam tabel. Dan <td> mewakili kolom alias sel di dalam baris.

Terkadang di dalam <tr> pertama digunakan <th> sebagai ganti dari <td>. <th> menyatakan kolom judul. Secara default teks di dalam <th> tampil cetak tebal.

thead tbody dan tfoot pada table

Untuk lebih jelas dalam menyatakan suatu tabel di dalam HTML, sering digunakan thead dan tbody dan terkadang tfoot:

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Harga</th>
      <th>Qty</th>
      <th>Sub Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mie Goreng</td>
      <td>Rp. 5.000</td>
      <td>10</td>
      <td>Rp. 50.000</td>
    </tr>
    <tr>
      <td>Aqua 600ml</td>
      <td>Rp. 2.000</td>
      <td>10</td>
      <td>Rp. 20.000</td>
    </tr>
    <tr>
      <td>Kacang goreng</td>
      <td>Rp. 20.000</td>
      <td>2</td>
      <td>Rp. 40.000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Total</td>
      <td>Rp. 110.000</td>
    </tr>
  </tfoot>
</table>

Output:

Pada contoh di atas, digunakan juga atribut colspan pada kolom total pada tfoot. Colspan digunakan untuk memperlebar kolom sehingga misalnya bila colspan="3", maka kolom tersebut akan diperlebar sampai seukuran 3 kolom.

caption pada table

Untuk memberi judul pada sebuah tabel, kita dapat menggunakan elemen <h1>, <h2>, <h3>, <p>, <b> atau <div> atau <span>. Tetapi bisa juga menggunakan elemen caption yang ditempatkan di dalam elemen table. Misalkan pada contoh di atas kita tambahkan <caption>

<table>
  <caption>Invoice No: 0025</caption>
  <thead>
    <tr>
      <th>Item</th>
      <th>Harga</th>
      <th>Qty</th>
      <th>Sub Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mie Goreng</td>
      <td>Rp. 5.000</td>
      <td>10</td>
      <td>Rp. 50.000</td>
    </tr>
    <tr>
      <td>Aqua 600ml</td>
      <td>Rp. 2.000</td>
      <td>10</td>
      <td>Rp. 20.000</td>
    </tr>
    <tr>
      <td>Kacang goreng</td>
      <td>Rp. 20.000</td>
      <td>2</td>
      <td>Rp. 40.000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Total</td>
      <td>Rp. 110.000</td>
    </tr>
  </tfoot>
</table>

Output:

 

---