Halo sobat promers, pada kesempatan kali ini saya akan berbagi lagi kepada sobat bagaimana cara membuat tabel menggunakan html. Apakah sebelumnya sobat tahu tentang tabel ?, jika belum saya akan menjelaskan sedikit tentang tabel. Tabel adalah gabungan antara baris dan kolom, tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris. Pada umumnya setiap kolom pada tabel menunjukkan data yang sejenis, dan baris pada tabel menunjukkan kelompok data dalam satu kesatuan. Nah, itu sedikitnya tentang tabel, saya tidak perlu menerangkan panjang lebar tentang tabel. Karena sobat nanti akan lebih paham jika disertai dengan praktek. Baiklah, saya akan memperkenalkan kepada sobat tag dasar HTML dalam membuat tabel.
| tag | Penjelasan |
|---|---|
| <table>...</table> | Mendefinisikan sebuah tabel. |
| <caption>...</caption> | Memberikan judul pad tabel, secara default caption berada di tengah |
| <th>...</th> | Mendefinisikan sel header. |
| <tr>...</tr> | Mendefinisikan sebuah baris dalam tabel. |
| <td>...</td> | Mendefinisikan sebuah sel dalam tabel. |
Dari tabel diatas sobat sudah berkenalan dengan tag HTML dasar tabel, untuk selanjutnya kita akan mencoba membuat tabel.
1. Silahkan sobat susun kodenya seperti dibawah ini.
<!-- mendifinisikan sebuah tabel -->
<table>
<caption> Nama Tabel </caption>
<tr> <!-- tag pembuka baris pertama -->
<th> NO </th> <!-- bagian sel header -->
<th> Nama </th>
</tr> <!-- tag penutup baris pertama -->
<tr> <!-- tag pembuka baris kedua -->
<td>1</td>
<td>Rizal Rahman Affandi</td>
</tr> <!-- tag penutup baris kedua -->
<tr> <!-- tag pembuka baris ketiga -->
<td>2</td>
<td>JariProm</td>
</tr> <!-- tag penutup baris ketiga -->
<tr> <!-- tag pembuka baris keempat -->
<td>3</td>
<td>Nurul Arifiniai</td>
</tr> <!-- tag penutup baris keempat -->
</table> <!-- penutup sebuah tabel -->
Untuk hasil dari kode diatas akan menjadi seperti berikut ini.
Dari contoh diatas kita hanya membuat untuk kerangka dari tabelnya saja, lalu bagaimana cara memberikan warna atau menghias dari tabel diatas ?. Baiklah, setelah kita mengenal tag dasar dari HTML, selanjutnya kita akan mengenal attribut dari tabel. Disini akan saya kenalkan kepada sobat attribut dasar dari tabel, silahkan disimak :
| Attribut | Penjelasan |
|---|---|
| align="" | Untuk mengatur teks pada isi sel, terdapat nilai center, rigth, left. |
| colspan="n" | Untuk memperlebar sel. |
| rowspan="n" | Untuk memperbesar sel. |
| bgcolor="" | Memberi warna sel atau baris, tergantung dari sobat menaruh attributnya dimana. |
| border="n" | Memberikan garis tepi pada tabel.. |
Setelah berkenalan dengan attribut diatas, mari kita terapkan pada tabel yang sudah kita buat tadi.
<table border="1"> <!-- mendifinisikan sebuah tabel -->
<caption> Tabel nama </caption>
<tr bgcolor="pink"> <!-- tag pembuka baris pertama -->
<th> NO </th> <!-- bagian sel header -->
<th> Nama </th>
</tr> <!-- tag penutup baris pertama -->
<tr bgcolor="yellow"> <!-- tag pembuka baris kedua -->
<td>1</td>
<td>Rizal Rahman Affandi</td>
</tr> <!-- tag penutup baris kedua -->
<tr bgcolor="yellow"> <!-- tag pembuka baris ketiga -->
<td>2</td>
<td>JariProm</td>
</tr> <!-- tag penutup baris ketiga -->
<tr bgcolor="yellow"> <!-- tag pembuka baris keempat -->
<td>3</td>
<td>Nurul Arifiani</td>
</tr> <!-- tag penutup baris keempat -->
</table> <!-- penutup sebuah tabel -->
Untuk hasil dari kode diatas akan menjadi seperti berikut ini.
Nah itu saja langkah - langkah untuk membuat table dengan HTML, silahkan sobat promers kembangkan sendiri untuk membuat tabel dengan banyak kolom dan baris. Selamat mencoba dan sukses.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon