Membuat Tabel Dengan HTML

Selamat pagi kawan. Hari ini saya akan membahas bagaimana cara membuat tabel dalam HTML. Tabel sangatlah penting dalam mengisi konten ketika kita membutuhkannya. Tabel pada umumnya memiliki baris dan kolom. Baris adalah yang horizontal, sedangkan Kolom adalah yang vertical. Baiklah, kita langsung saja mulai membuat Tabel. Contoh jika kita ingin membuat tabel seperti di bawah ini :

No Nama L/P
1 Budi Hartono L
2 Susi Sulaesi P
3 Zaeni Anisa P

Tabel di atas dibuat menggunakan Tag <table>. Berikut di bawah ini sumber kode tabel di atas :

<table border="1" cellpadding="3" cellspacing="0">
<tr>
<th>No</th>
<th>Nama</th>
<th>L/P</th>
</tr>
<tr>
<td>1</td>
<td>Budi Hartono</td>
<td>L</td>
</tr>
<tr>
<td>2</td>
<td>Susi Sulaesi</td>
<td>P</td>
</tr>
<tr>
<td>3</td>
<td>Zaeni Anisa</td>
<td>P</td>
</tr>
</table>

Baiklah, saya akan menjelaskan sedikit tentang kode-kode di atas. Untuk membuat tabel harus dimulai dengan Tag <table> dan ditutup dengan </table> . Kemudian Tag <tr> menunjukkan bahwa itu adalah sebuah baris. Kita bisa lihat jumlah Tag <tr> yang ada di dalam tabel tersebut. Jumlah <tr> tersebut adalah 4. Jadi dapat kita simpulkan di dalam tabel tersebut terdapat 4 baris. Sedangkan di dalam setiap <tr> terdapat <th> dan <td> , semua itu kita menyebutnya kolom<th> mendefinisikan judul teratas yang ada pada sebuah tabel, sedangkan <td> adalah isi data atau baris yang ada di setiap baris. 

Kemudian, di dalam tag <table> terdapat sebuah attribute dengan nama border dan nilainya adalah 1. Border tersebut berfungsi untuk memberikan garis pembatas di setiap cell dalam tabel. Attribute cellpadding berfungsi untuk memberikan jarak dari isi cell dengan setiap garis tepi tabel. Attribut cellspacing berfungsi untuk memberikan jarak antar cell. Saya coba memberikan cellspacing 0 agar jarak cell tidak terlalu besar.

Kita juga bisa memberikan attribute align center untuk membuat table tersebut berada di tengah. Attribute tersebut bisa kita letakkan di Tag <tabel> , <th> dan <td> sesuai keinginan kalian.


Demikian postingan kali ini. Semoga bermanfaat :)

No comments for "Membuat Tabel Dengan HTML"