Cara Membuat Table Di HTML
Tag <table> adalah salah satu tag yang memiliki atribut terbanyak. Lihat Tabel Yang Ada Di bawah untuk melihat daftar tag.Dalam tag <tabble>juga terdapat 2 tag yang penting yang penting yaitu tag <tr> </td> untuk membuat baris dan tag <td></td> untuk membuat kolom.Tag <table> adalah tag yang penting dalam pendesainan sebuah tampilan situs. Jadi anda harus cukup menguasai tag ini
Tag-Tag Penting untuk membuat table
NAMA tag |
Keterangan |
<table> |
Tag ini merupakan inti dari perintah untuk membuat tabel pada dokumen HTML |
</table> |
Tag ini merupakan penutup dari perintah untuk membuat tabel pada dokumen HTML |
<thead> |
Tag ini merupakan bagian dari perintah pembuatan tabel. Biasanya Tag ini digunakan untuk menandakan bahwa tabel yang dibuat adalah HEADER atau Bagian yang paling atas dari sebuah tabel. dan dituliskan setelah Tag kemudian harus ditutup dengan perintah </thead> |
| <tfoot> | Tag ini merupakan bagian dari perintah pembuatan tabel Biasanya Tag ini digunakan untuk menandakan bahwa tabel yang dibuat adalah FOOTER atau bagian akhir dari suatu tabel, bisa juga merupakan sebuah penutup dari suatu table. dan dituliskan setelah Tag <table> kemudian harus ditutup dengan perintah </tfoot> |
<tr> |
Tag ini digunakan untuk membuat BARIS pada suatu tabel, dan merupakan satu kesatuan dengan perintah <table> penulisan nya pun harus setelah Tag ini. Setiap perpindahan BARIS harus ditutup dengan perintah </tr> |
<td> |
Tag ini digunakan untuk membuat KOLOM pada suatu tabel Setiap perpindahan KOLOM harus ditutup dengan perintah </td> |
<tbody> |
Tag ini merupakan bagian dari perintah pembuatan tabel. Biasanya Tag ini digunakan untuk menandakan bahwa tabel yang dibuat adalah BODY atau badan dari suatu tabel, bisa juga isi dari suatu table. dan dituliskan setelah Tag <table> kemudian harus ditutup dengan perintah <tbody> |
antara lain :
1. cellpadding
– Atribut ini dipakai untuk menentukan besarnya jarak bagian
dalam (cell) dengan bagian luar (border) dari sebuah tabel. contoh :
cellpadding=”2″
2. cellspacing
– Atribut ini dipakai untuk menentukan besarnya jarak cell yang
satu dengan cell yang lainnya. contoh : cellspacing=”5″
3. border
– Atribut ini dipakai untuk menentukan besarnya border (bingkai)
dari sebuah tabel. contoh : border=”2″
4. width
– Atribut ini digunakan untuk menentukan lebar dari sebuah tabel,
ukuran ini bisa menggunakan satuan pixel atau persentasi. contoh :
width=”75%”, width=”100%”, width=”800″, width=”200″
5. bordercolor
– Atribut ini digunakan untuk menentukan warna border atau
garis tepi dari sebuah tabel. contoh : bordercolor=”black”
6. bgcolor
– Atribut ini digunakan untuk menentukan warna latar dari sebuah
tabel atau cell. contoh : bgcolor=”#FFFFFF”, bgcolor=”#000000″,
bgcolor=”blue”, bgcolor=”red”
7. valign
– Atribut ini digunakan untuk menentukan posisi Vertikal objek dari
sebuah tabel yang dapat berisi teks maupun gambar, atribut ini dituliskan
dalam perintah pembuatan baris dari tabel / <tr>. Atribut ini punya beberapa
pilihan posisi yaitu :
o top – pilihan ini akan menempatkan objek berada pada posisi teratas
dari cell.
o middle – pilihan ini akan menempatkan objek berada pada tengah cell.
o bottom – pilihan ini akan menempatkan objek berada pada bagian
bawah dari cell.
Contoh : <tr valign=”top”>, <tr valign=”middle”>, <tr valign=”bottom”>
8. align
– Atribut ini digunakan untuk menentukan posisi Horizontal objek dari
sebuah tabel yang dapat berisi teks maupun gambar, atribut ini dituliskan
dalan perintah pembuatan kolom dari tabel / <td>. Atribut ini juga punya
beberapa pilihan yaitu :
o left – pilihan ini akan menempatkan objek berada pada bagian kiri dari
cell, bila objek berbentuk teks maka teks tersebut akan dijadikan rata
kiri.
o center – pilihan ini akan menempatkan objek berada pada bagian
tengan dari cell, bila objek berbentuk teks maka teks tersebut akan
dijadikan rata tengah.
o right – pilihan ini akan menempatkan objek berada pada bagian kanan
dari cell, bila objek berbentuk teks maka teks tersebut akan dijadikan
rata kanan.
Contoh : <td align=”left”>, <td align=”center”>, <td align=”right”>.
9. rowspan
– Atribut ini digunakan untuk menyatukan dua buah baris tabel
menjadi satu kesatuan atau kelompok. atribut ini dituliskan dalam perintah
pembuatan kolom dari tabel / <td>
10. colspan
– Atribut ini digunakan untuk menyatukan dua buah kolom tabel
menjadi satu kesatuan atau kelompok. atribut ini dituliskan dalam perintah
pembuatan kolom dari tabel / <td>
Contoh : <td rowspan=”2″>, <td colspan=”2″>
• Cell yang diberi warna abu-abu merupakan gabungan dari dua buah cell atau
lebih dalam satu baris (merger) disebut dengan rowspan dan dihasilkan dari
perintah rowspan.
Penting !!!
Untuk rowspan dan colspan
Anda harus mendeklarasikan banyaknya kolom atau baris yang akan Anda gabung, misalkan Anda akan menggabung dua buah cell dalam satu kolom, berarti Anda juga harus menuliskan nya dengan colspan=”2″, bila Anda menggabungkan tiga buah cell ,Anda harus menuliskannya dengan colspan=”3″ dan seterusnya
Contoh 1 : Membuat Tabel sederahana dengan header dan footer
Nahh..sekarang siapkan aplikasi teks editor html kalian
Coba kalian perhatikan dan ketik/salin kode dibawah ini
(usahakan diketik jangan disalin supaya lebih terbiasa dan mudah masuk ke otak😅😅)
<html>
<head>
<tittle>membuat table</tittle>
</head>
<body>
<table cellpadding=”5″ cellspacing=”5″ border=”1″>
<thead>
<tr>
<td colspan=”3″ align=”center”>Ini adalah bagian HEADER dari TABEL</td>
</tr>
</thead>
<tbody>
<tr>
<td>BARIS ke 1 KOLOM ke 1</td>
<td>BARIS ke 1 KOLOM ke 2</td>
<td>BARIS ke 1 KOLOM ke 3</td>
</tr>
<tr>
<td>BARIS ke 2 KOLOM ke 1</td>
<td>BARIS ke 2 KOLOM ke 2</td>
<td>BARIS ke 2 KOLOM ke 3</td>
</tr>
<tr>
<td>BARIS ke 3 KOLOM ke 1</td>
<td>BARIS ke 3 KOLOM ke 2</td>
<td>BARIS ke 3 KOLOM ke 3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan=”3″ align=”center”>Ini adalah bagian FOOTER dari TABEL
</td>
</tr>
</tfoot>
</table>
</body>
</html>
Nah..Jika sudah silahkan jalankan dibrowser file HTML NYA maka Akan ditampilkan seperti ini
| Ini adalah bagian HEADER dari TABEL | ||
| BARIS ke 1 KOLOM ke 1 | BARIS ke 1 KOLOM ke 2 | BARIS ke 1 KOLOM ke 3 |
| BARIS ke 2 KOLOM ke 1 | BARIS ke 2 KOLOM ke 2 | BARIS ke 2 KOLOM ke 3 |
| BARIS ke 3 KOLOM ke 1 | BARIS ke 3 KOLOM ke 2 | BARIS ke 3 KOLOM ke 3 |
| Ini adalah bagian FOOTER dari TABEL | ||
Dan juga bagian kolom yang”Ini adalah bagian HEADER dari TABEL” Kode tetsebut terdapat colspan=”3″ yang artinya 3 kolom kesamping digabung jadi 1
Contoh 2:dengan cellpadding dan cellspacing
Ketik bahasa alien dibawah ini.ingat ,hindari kata yang typo karena itu sangat berpengaruh dan mengalibatkan kegagalan pembuatan table
<head>
<tiitle>Membuat Tabel 2</title>
</head>
<body>
<p align=“center”>
<table cellpadding=“5“ cellspacing=“5“ border=“1“ bordercolor=“blue”>
<thead>
<tr>
<td colspan=“2“ align=“center”>NAMA NAMA BUAH DAN WARNANYA
</thead>
</tr>
<tbody>
<tr>
<td align=“center”><b>Nama buah</b></td>
<td align=“center”>Warna</td>
</tr>
<tr>
<td align=“center”>pisang</td>
<td align=“center”><font color=“yellow”>kuning</font></td>
</tr>
<tr>
<td align=“center”>Apel</td>
<td align=“center”><font color=“red”>MERAH</font></td>
</tr>
<tr>
<td rowspan=“2“ align=“center”>pisang<br>apel<br></td>
<td rowspan=“2“ align=“center”>kuning dan merah</td>
</tr>
</body>
</html>
Jika sudah diketik,maka hasilnya akan seperti ini:
| NAMA NAMA BUAH DAN WARNANYA | |
| Nama buah | Warna |
| pisang | kuning |
| Apel | MERAH |
| pisang apel |
kuning dan merah |
++=++
●Note:
-Tabel diatas dibuat dengan cellpadding=”5″ yang artinya besarnya jarak bagian
dalam (cell) dengan bagian luar (border) dari sebuah tabel adalah 5
-dan juga dengan cellspacing=”5″ yang artinya besarnya jarak cell yang
satu dengan cell yang lainnyaadalah 5,
(Supaya lebih paham kalian bisa eksperimen sendiri dengan border, cellpading dan cellspacing)
Contoh 3:dengan rowspan dan colspan
<html>
<head>
<thead>
<tr>
<th colspan=“3“ bgcolor=“yellow”>Game </th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan=“5“><img src=“img/game.png” width=“300“></img>
</tr>
<tr>
<td>nama</td>
<td>PUBG</td>
</tr>
<tr>
<td>Platform</td>
<td>Android</td>
<tr>
<td>lain lain</td>
<td>
<ul>
<li>grafik HD</li>
<li>ukuran:1.5gb</li>
<li>genre:shooter</li>
<li>Online</li>
</ul>
</td>
<tr>
<td colspan=“2“><b>Player unknown’s battle grounds</b></td>
</tbody>
</table>
</body>
</html>
Maka muncul hasil
| Game | ||
|---|---|---|
 |
||
| nama | PUBG | |
| Platform | Android | |
| lain lain |
|
|
| Player unknown’s battle grounds | ||