Pembuatan tabel dalam bahasa HTML pada dasarnya akan tertulis seperti di bawah ini:
01.<table> <!-- awal tabel -->
02. <tr> <!-- awal baris 1 -->
03. <td>Cell 1</td> <!-- kolom 1 baris 1 -->
04. <td>Cell 2</td> <!-- kolom 2 baris 1 -->
05. <td>Cell 3</td> <!-- kolom 3 baris 1 -->
06. </tr> <!-- akhir baris 1 -->
07. <tr> <!-- awal baris 2 -->
08. <td>Cell 4</td> <!-- kolom 1 baris 2 -->
09. <td>Cell 5</td> <!-- kolom 2 baris 2 -->
10. <td>Cell 6</td> <!-- kolom 3 baris 2 -->
11. </tr> <!-- akhir baris 2 -->
12. <tr> <!-- awal baris 3 -->
13. <td>Cell 7</td> <!-- kolom 1 baris 3 -->
14. <td>Cell 8</td> <!-- kolom 2 baris 3 -->
15. <td>Cell 9</td> <!-- kolom 3 baris 3 -->
16. </tr> <!-- akhir baris 3 -->
17.</table> <!-- akhir tabel -->
Perintah pembuatan tabel diawali dengan <table> dan diakhiri dengan </table>, <tr> dan </tr> adalah fungsi perintah pembuatan baris, sedangkan <td> dan </td> itu sendiri perintah pembuatan kolom dalam baris.
Dari contoh tag html di atas akan menghasilkan tabel yang terdiri dari 3 baris dan 3 kolom dengan seperti ini:
| Cell 1 |
Cell 2 |
Cell 3 |
| Cell 4 |
Cell 5 |
Cell 6 |
| Cell 7 |
Cell 8 |
Cell 9 |
Tag script di atas adalah adalah tag dasar, untuk pengembangannya ada beberapa atribut yang bisa digunakan seperti lebar (width), spasi (spacing), huruf (font), warna dasar (background), dan lain sebagainya. Untuk lebih jelasnya bisa dilihat pada tag HTML berikut:
01.<table width="500" border="2" cellspacing="2" cellpadding="2" bgcolor="#ffffff" style="font:Times New Roman; font-size:12px; font-style:normal">
02. <tr>
03. <td width="250" align="left" bgcolor="#80FFFF" style="font:Verdana; font-weight:bold; font-size:12px">Cell 1</td>
04. <td width="150" align="center" bgcolor="#FFFF80" style="font:Verdana; font-style:italic; font-size:14px">Cell 2</td>
05. <td width="100" align="right" bgcolor="#80FF80" style="font:Verdana; font-style:normal; font-size:16px">Cell 3</td>
06. </tr>
07. <tr>
08. <td valign="top">Cell 4</td>
09. <td valign="middle">Cell 5</td>
10. <td valign="bottom">Cell 6 Cell 6 Cell 6 Cell 6 Cell 6 Cell 6 Cell 6 Cell 6 Cell 6</td>
11. </tr>
12. <tr>
13. <td valign="top">Cell 7</td>
14. <td valign="middle">Cell 8 Cell 8 Cell 8 Cell 8 Cell 8 Cell 8 Cell 8 Cell 8 Cell 8</td>
15. <td valign="bottom">Cell 9</td>
16. </tr>
17.</table>
Dari tag HTML di atas akan menghasilkan tabel seperti di bawah ini:
| Cell 1 |
Cell 2 |
Cell 3 |
| Cell 4 |
Cell 5 |
Cell 6 Cell 6 Cell 6 Cell 6 Cell 6 Cell 6 Cell 6 Cell 6 Cell 6 |
| Cell 7 |
Cell 8 Cell 8 Cell 8 Cell 8 Cell 8 Cell 8 Cell 8 Cell 8 Cell 8 |
Cell 9 |
Dalam tabel di atas saya gunakan tag berikut:
- width: lebar (lebar tabel 500 pixel)
- border: lebar garis tabel (2 pixel)
- cellspacing: jarak spasi antar cell (2 pixel)
- cellpadding: jarak tulisan/konten dengan garis cell (2 pixel)
- bgcolor: warna dasar (#ffffff = putih)
- style font: jenis huruf (Times New Roman)
- style font-size: ukuran font (12 pixel)
- style font-style: gaya penulisan (normal)
Untuk kolom sendiri saya buat lebar (width) yang berbeda untuk masing-masing kolomnya, yaitu kolom 1: 250 pixel, kolom 2: 150 pixel, dan kolom 3: 100 pixel (jumlah total 500 pixel), untuk tag lebar kolom (width), kita cukup memasang pada kolom yang ada pada baris pertama saja, karena otomatis kolom-kolom dalam baris selanjutnya akan mengikuti lebar dari kolom pada baris pertama.
Atribut lain dalam tabel di atas adalah:
- align: perintah justifikasi tulisan (left: rata kiri, center: rata tengah, dan right: rata kanan).
- valign: perintah justifikasi tulisan (top: rata atas, middle: rata tengah, dan bottom: rata bawah)
- bgcolor: warna dasar cell
- style font: jenis font
- style font-size: ukuran font
- style font-style: gaya penulisan font (italic, normal)
- style font-weight: gaya penulisan font (bold)
Berikutnya adalah cara menggabungan baris atau kolom, sebagai contoh bisa dilihat pada tabel berikut:
| Cell 1 |
Cell 2 gabung dengan Cell 3 |
| Cell 4 gabung dengan Cell 7 |
Cell 5 |
Cell 6 |
| Cell 8 |
Cell 9 |
Dalam tabel di atas saya melakukan penggabungan Cell 2 dan Cell 3 pada baris pertama, dan penggabungan Cell 4 dan Cell 7 pada kolom pertama. Tag HTML yang digunakan di sini adalah tag collspan (menggabungkan kolom) dan rowspan (menggabungkan baris), untuk lebih jelasnya silakan lihat tag HTML berikut:
01.<table width="500" border="2" cellspacing="0" cellpadding="2" bgcolor="#ffffff" style="font:Times New Roman; font-size:12px; font-style:normal">
02. <tr>
03. <td width="250">Cell 1</td>
04. <td colspan="2">Cell 2 gabung dengan Cell 3</td>
05. </tr>
06. <tr>
07. <td rowspan="2">Cell 4 gabung dengan Cell 7</td>
08. <td width="150">Cell 5</td>
09. <td width="100">Cell 6</td>
10. </tr>
11. <tr>
12. <td>Cell 8</td>
13. <td>Cell 9</td>
14. </tr>
15.</table>
Demikian sekilas informasi tentang pembuatan tabel dengan tag HTML, semoga bermanfaat.
.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
