Belajar HTML : Table

posted in: Tutorial Pemrograman | 0

Table HTML

  • Tabel didefinisikan dengan tag <table>.
  • Sebuah tabel dibagi menjadi baris dengan tag <tr>. (tr singkatan baris tabel)
  • Baris A dibagi menjadi sel-sel data dengan tag <td>. (td singkatan dari tabel data)
  • Baris A juga dapat dibagi menjadi pos dengan tag <th>. (th singkatan tabel heading)
  • <td> elemen adalah wadah data dalam tabel.
  • <td> elemen dapat berisi segala macam elemen HTML seperti teks, gambar, daftar, tabel lain, dll
  • Lebar tabel dapat didefinisikan dengan menggunakan CSS.

Contoh :

<table width="300">
<tr>
<td>Nama</td>
<td>Jabatan</td>
<td>Umur</td>
</tr>
<tr>
<td>Agus Mahyudin</td>
<td>Direktur</td>
<td>55</td>
</tr>
<tr>
<td>Bambang Pamungkas</td>
<td>Manager</td>
<td>45</td>
</tr>
<tr>
<td>Ronaldo Bagaskara</td>
<td>Staf</td>
<td>26</td>
</tr>
</table>


Nama Jabatan Umur
Agus Mahyudin Direktur 55
Bambang Pamungkas Manager 45
Ronaldo Bagaskara Staf 26

 

Tabel HTML dengan Atribut: border, cellspacing, cellpadding

Jika Anda tidak menentukan border untuk Tabel, maka akan ditampilkan tanpa borders.
Borders dapat ditambahkan menggunakan atribut border.

Contoh :

<table width="300" border="1" cellpadding="6" cellspacing="1">
<tr>
<td>Nama</td>
<td>Jabatan</td>
<td>Umur</td>
</tr>
<tr>
<td>Agus Mahyudin</td>
<td>Direktur</td>
<td>55</td>
</tr>
<tr>
<td>Bambang Pamungkas</td>
<td>Manager</td>
<td>45</td>
</tr>
<tr>
<td>Ronaldo Bagaskara</td>
<td>Staf</td>
<td>26</td>
</tr>
</table>

Table HTML headings

Tabel headings didefinisikan dengan tag <th>.

Secara default, semua browser utama menampilkan headings tabel bold dan centered:
Contoh :

<table width="300" border="1" cellpadding="6" cellspacing="1">
<tr>
<th>Nama</th>
<th>Jabatan</th>
<th>Umur</th>
</tr>
<tr>
<td>Agus Mahyudin</td>
<td>Direktur</td>
<td>55</td>
</tr>
<tr>
<td>Bambang Pamungkas</td>
<td>Manager</td>
<td>45</td>
</tr>
<tr>
<td>Ronaldo Bagaskara</td>
<td>Staf</td>
<td>26</td>
</tr>
</table>

Tag Deskripsi
<table> Mendefinisikan tabel
<th> Mendefinisikan sebuah sel header tabel
<tr> Mendefinisikan baris dalam sebuah tabel
<td> Mendefinisikan sel dalam tabel
<caption> Mendefinisikan sebuah caption tabel
<colgroup> Menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk memformat
<col> Menentukan sifat kolom untuk setiap kolom dalam <colgroup> elemen
<thead> Grup isi header dalam sebuah tabel
<tbody> Grup isi body dalam sebuah tabel
<tfoot> Grup isi footer dalam sebuah tabel

Leave a Reply