- Chapter 1: Cara Membuat Tulisan Bold, Italic, Larger, smaller, dan Struktur Dokumen Pada HTML.
- Chapter 2: Cara Membuat Headings (h1,h2,h3) dan Horizontal Ruled Lines Pada HTML.
- Chapter 3: Cara Membuat paragraph, Align Attribute, Line Break, dan Preformatted Text Pada HTML.
- Chapter 4: Cara Membuat Center Tag dan Body Attributes Pada HTML
- Chapter 5: Penulisan Font dan Text color di HTML
- Chapter 6: Cara Membuat Tag Links dan Images Pada HTML
- Chapter 7: Cara Membuat List Tulisan Pada HTML
- Chapter 8: Penulisan kode HTML (Clean code), Escape Code, dan Comment Tag Pada HTML
- Chapter 9: Cara Membuat Link Navigasi Dalam 1 Halaman (Navigation Within A Document)
 |
| Chapter 10: Cara Membuat Tables di HTML |
Tables...
Contoh Pembuatan Table di HTML...
| Apa guna Tabel? |
|---|
| Tabel digunakan untuk membuat data lebih mudah dilihat untuk menginterpretasikan atau hanya memberikan dokumen Anda terlihat rapi dan terstruktur. |
<table border=4> <tr> <th>Apa guna Tabel?</th> </tr> <tr> <td>Tabel digunakan untuk membuat data lebih mudah dilihat untuk menginterpretasikan atau hanya memberikan dokumen Anda terlihat rapi dan terstruktur.</td> </tr> </table>
Tag Tabel adalah salah satu pembuatan tag yang cukup menantang pada kode HTML. Namun, hal ini tidak terlalu sulit, karena Anda hanya membutuhkan beberapa saat untuk dapat menguasainya. Tag Tabel dimulai dengan <table>, dan biasanya diberi tambahan atribut border=n diantara tag pembuka. Jika border=0, Maka border table tersebut bersifat invinsible. Hal ini berguna ketika Anda ingin menyelaraskan teks dalam baris dan kolom, tetapi tidak ingin ada border di sekitarnya. border=1 adalah border dengan ketebalan 1, border ini cukup tipis. border=2 adalah border dengan ketebalan 2, border ini lebih tebal. border=3 border dengan ketebalan lebih tebal lagi.. dan seterusnya. Tag table harus diakhiri dengan tag </table>, jika tag table tidak diakhiri maka tabel tidak akan muncul sama sekali!
Contoh membuat table dengan border...
<table border=0> <tr> |
<table border=3> <tr> |
Setiap baris dalam tabel didefinisikan oleh tag pembuka <tr> dan tag penutup </tr>. Dalam setiap baris tabel memiliki cell tabel, yang didefinisikan oleh tag pembuka <td> dan tag penutup </td>. Kebanyakan baris tabel berisi lebih dari satu sel. Anda juga akan membutuhkan judul untuk kolom sel dari baris pertama. Untuk melakukan ini, Anda akan menggunakan tag pembuka<th> dan tag penutup </th>. Tag pada Table heading membuat text pada cell menjadi BOLD dan CENTERED. Anda bisa menggunakan heading cells ketika diperlukan.
Contoh tabel dengan beberapa baris dan kolom...
| Heading A | Heading B | Heading C |
|---|---|---|
| Cell A | Cell B | Cell C |
| Cell D | Cell E | Cell F |
<table border=2> <tr> <th>Heading A</th><th>Heading B</th><th>Heading C</th> </tr> <tr> <td>Cell A</td><td>Cell B</td><td>Cell C</td> </tr> <tr> <td>Cell D</td><td>Cell E</td><td>Cell F</td> </tr> </tr> </table>
Lalu bagaimana jika Anda ingin membuat table seperti dibawah ini?
| Heading A | Heading B | Heading C |
|---|---|---|
| Cell A & D | Cell B | Cell C |
| Cell E | Cell F |
<table border=2> <tr> <th>Heading A</th><th>Heading B</th><th>Heading C</th> </tr> <tr> <td rowspan=2>Cell A & D</td><td>Cell B</td><td>Cell C</td> </tr> <tr> <td>Cell E</td><td>Cell F</td> </tr> </tr> </table>
Perhatikan bagaimana penambahan atribut rowspan=2. Hal ini memungkinkan sel untuk rentang sebanyak dua baris. Jika Anda ingin memperbanyak sel lebih dari beberapa kolom, gunakan atribut colspan=n. juga, Anda mungkin ingin menggunakan atribut ALIGN dan VALIGN untuk menyelaraskan isi sel. Jika Anda ingin mengubah alignment horizontal isi sel tertentu, tambahkan ALIGN=LEFT, ALIGN=CENTER, or ALIGN=RIGHT di tag pembuka <td>. Jika Anda ingin mengubah alignment vertikal dari isi sel, gunakan atribut VALIGN=TOP, VALIGN=MIDDLE, or VALIGN=BOTTOM. Anda juga mungkin ingin mencoba atribut WIDTH=n%, untuk mengubah lebar tabel atau sel.
Contoh ALIGN atribut dalam tabel...
| Left Alignment | Center Alignment | Right Alignment |
<table border=1 width=100%> <tr> <td align=left>Left Alignment</td> <td align=center>Center Alignment</td> <td align=right>Right Alignment</td> </tr> </table>