Membuat tabel pada HTML

membuat tabel

Tabel  digunakan  untuk  menyajikan  data  dalam  bentuk  kolom  dan  baris. Tabel didefinisikan dengan tag <table>. Sebuah tabel dibagi menjadi beberapa baris (dengan  tag  <tr>),  dan  setiap  baris  dibagi  menjadi  beberapa  kolom  (dengan  tag <td>). Td kependekan dari ”table data” yang berarti tempat menyimpan data (data cell). Sebuah cell data dapat berupa teks, image, list, paragraf, form, tabel,dll.
Tag – tag tabel HTML
Tag                                                                                         Keterangan
<table>                                                                                 Mendefinisikan tabel
<th>                                                                                      Mendefinisikan header tabel
<tr>                                                                                       Mendefinisikan baris tabel
<td>                                                                                       Mendefinisikan cell tabel
<caption>                                                                              Mendefinisikan caption tabel
<colgroup>                                                                           Mendefinisikan group kolom tabel
<col>                                                                                    Mendefinisikan atribut nilai jumlah kolom tabel
<thead>                                                                                Mendefinisikan head tabel
<tbody>                                                                                Mendefinisikan body tabel
<tfoot>                                                                                 Mendefinisikan footer table





Contoh : table1.html
<html>
<body>
<p><strong>
Satu Kolom:</strong></p>
<table border="1">
<tr>
<td>500</td>
</tr>
</table>
<h4>Satu baris dan lima kolom:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
<td>400</td>
<td>500</td>
</tr>
</table>
<h4>Dua baris dan lima kolom :</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>


<td>3000</td>
<td>5000</td>
<td>6000</td>
</tr>
<tr>
<td>7000</td>
<td>8000</td>
<td>9000</td>
<td>10000</td>
<td>11000</td>
</tr>
</table>
</body>
</html>
Hasilnya seperti dibawah ini




Border, Align dan Background tabel
Tebal border tabel didefinisikan dengan tag border, letak posisi tabel didefinisikan dengan tag align, warna background tabel didefinisikan dengan tag bgcolor.
Contoh : table border.html
<html>
<title>Border Tabel</title>
<body>
<h4>border normal, letak di tengah:</h4>
<table border="1" align="center">
<tr>
<td>Baris Pertama - Kolom Pertama </td>
<td>Baris Pertama - Kolom Kedua </td>
</tr>
<tr>
<td>Baris Kedua - Kolom Pertama </td>
<td>Baris Kedua - Kolom Kedua </td>
</tr>
</table>
<h4>border lebih tebal, letah di tengah, lebar tabel 90%:</h4>
<table border="8" align="center" width="90%">
<tr>
<td>Baris Pertama - Kolom Pertama </td>
<td>Baris Pertama - Kolom Kedua</td>
</tr>
<tr>
<td>Baris Kedua - Kolom Pertama</td>
<td>Baris Kedua - Kolom Kedua </td>
</tr>
</table>
<h4>border sangat tebal, letak di tengah, lebar tabel 90%, warna
background = #FFDFAA: </h4>
<table width="90%" border="15" align="center" bgcolor="#FFDFAA">
<tr>
<td>Baris Pertama - Kolom Pertama </td>
<td>Baris Pertama - Kolom Kedua</td>
</tr>
<tr>
<td>Baris Kedua - Kolom Pertama</td>
<td>Baris Kedua - Kolom Kedua </td>
</tr>
</table>
</body>
</html>

hasilnya seperti di bawah ini



Tabel Tanpa Brder
Terkadang dalam pembuatan tabel tidak diharapkan adanya border (garisgaris). Berikut ini adalah contoh tabel tanpa border.
Contoh : table no border.html
<html><title>Tabel tanpa border</title>
<body>
<h4>Tabel tanda border :</h4>
<table>
<tr>
<td>ABC</td>
<td>DEF</td>
<td>GHI</td>
</tr>
<tr>
<td>JKL</td>
<td>MNO</td>
<td>PQR</td>
</tr>
</table>
</body>
</html>
 hasilnya seperti di bawah ini

Tabel Header
Berikut ini adalah contoh tabel header dengan tag <th>.
Contoh : tabelheader.html
<html><title>Tabel Header</title>
<body>
<h4>Table header:</h4>
<table border="1">
<tr>
<th>Name</th>
<th>Jurusan</th>
<th>Institusi</th>
</tr>
<tr>
<td>Hasan Abdul Karim </td>
<td>Teknologi Informasi </td>
<td>PENS ITS </td>
</tr>
</table>
<h4>Vertical header:</h4>
<table border="1">
<tr>
<th>Nama :</th>
<td>Hasan Abdul Karim </td>
</tr>
<tr>
<th>Jurusan</th>
<td>Teknologi Informasi </td>
</tr>
<tr>
<th>Institusi</th>
<td>PENS ITS </td>
</tr>
</table>
</body>
<html>
 hasilnya seperti di bawah ini

Empty Cell
Berikut ini adalah contoh empty cell tabel
Contoh : emptycell.html
<html><title>Empty Cell</title>
<body>
<table border="1">
<tr>
<td>Tulisan Teks </td>
<td>Tulisan Teks</td>
</tr>
<tr>
<td></td>
<td>Tulisan Teks</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>Tulisan Teks</td>
</tr>
</table>
<p>Jika suatu tabel tidak ada data, maka akan dianggap tidak ada border seperti terlihat pada baris kedua - kolom pertama. Untuk mengatasinya bisa dengan trik memberikan spasi, yaitu dengan teks di kode &quot;&amp;nbsp;&quot;.
</p>
</body>
</html>
 hasilnya seperti di bawah ini


Colspan dan Rowspan
Berikut ini adalah contoh mendefinisikan cell tabel yang dilebarkan lebih dari satu baris atau satu kolom dengan atribut colspan dan rowspan.
Contoh : colspan.html
<html>
<title>Colsapn dan Rowspan</title>
<body>
<h4>Colspan 3 kolom:</h4>
<table border="1">
<tr>
<th>Hari</th>
<th colspan="3">Kuliah</th>
</tr>
<tr>
<td>Senin</td>
<td>Web Design</td>
<td>Aplikasi Web </td>
<td>Database </td>
</tr>
</table>
<h4>Rowspan 3 row:</h4>
<table border="1">
<tr>
<th>Hari:</th>
<td>Senin</td>
</tr>
<tr>
<th rowspan="3">Kuliah</th>
<td>Web Design</td>
</tr>
<tr>
<td>Aplikasi Web</td>
</tr>
<tr>
<td>Database</td>
</tr>
</table>
</body>
</html>
 hasilnya seperti di bawah ini

Tag di dalam suatu tabel
Berikut ini adalah contoh menampilkan elemen di dalam elemen lain.
Contoh : tagintabel.html
<html><title>Tag di dalam tabel</title>
<body>
<table border="1">
<tr>
<td><p>Sebuah paragraf </p>
<p>Paragraf lain </p></td>
<td>Cell berisi tabel
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr><td>C</td>
<td>D</td></tr>
</table>
</td>
</tr>
<tr>
<td>Cell berisi list
<ul>
<li>Senin</li>
<li>Selasa</li>
<li>Rabu</li>
<li>Kamis</li>
</ul>
</td>
<td>PENS ITS </td>
</tr>
</table>
</body>
</html>
 hasilnya seperti di bawah ini



Cellpadding
Cellpadding digunakan untuk memberikan jarak antara teks dengan tepi border tabel. Cellpadding menggunakan atribut cellpadding
Contoh : cellpadding.html
<html><title>cellpadding</title>
<body>
<h4>Tanpa cellpadding:</h4>
<table border="1">
<tr>
Modul Desain Web
D3 Teknik Informatika Politeknik Gorontalo  Page 28
<td>ABC</td>
<td>DEF</td>
</tr>
<tr>
<td>GHI</td>
<td>JKL</td>
</tr>
</table>
<h4>Dengan cellpadding:</h4>
<table border="1"
cellpadding="10">
<tr>
<td>ABC</td>
<td>DEF</td>
</tr>
<tr>
<td>GHI</td>
<td>JKL</td>
</tr>
</table>
</body>
</html>
 hasilnya seperti di bawah ini

Cellspacing
Cellspacing digunakan untuk memberikan jarak antara border dalam tabel dengan border luar tabel. Cellspacing menggunakan atribut cellspacing.
Contoh : cellspacing.html
<html><title>cellspacing</title>
<body>
<h4>Tanpa cellspacing:</h4>
<table border="1">
<tr>
<td>ABC</td>
<td>DEF</td>
</tr>
<tr>
<td>GHI</td>
<td>JKL</td>
</tr>
</table>
<h4>Dengan cellspacing:</h4>
<table border="1"
cellspacing="10">
<tr>
<td>ABC</td>
<td>DEF</td>
</tr>
<tr>
<td>GHI</td>
<td>JKL</td>
</tr>
</table>
</body></html>
 hasil seperti di bawah ini

Background Pada Tabel
Background  pada  tabel  dapat  didefinisikan  dengan  menggunakan  warna atau dengan image. Berikut ini adalah contoh background tabel dengan warna dan image.  Untuk  memberikan  background  warna  menggunakan  atribut  ‘bgcolor’. Untuk memberikan background image menggunakan atribut  background.
Contoh : backgroundtabel.html
<html><title>Background Tabel</title>
<body>
<h4>Dengan background warna:</h4>
<table border="1"
bgcolor="green">
<tr>
<td>ABC</td>
<td>DEF</td>
</tr>
<tr>
<td>GHI</td>
<td>JKL</td>
</tr>
</table>
<h4>Dengan background image:</h4>
<table border="1" background="jpg/bgdesert.jpg">
<tr>
<td>ABC</td>
<td>DEF</td>
</tr>
<tr>
<td>GHI</td>
<td>JKL</td>
</tr>
</table>
</body>
</html>
 hasilnya seperti di bawah ini

Background Cell
Background Cell digunakan untuk memberikan background pada cell tertentu tabel sehingga dimungkinkan banyak warna pada sutau tabel.
Contoh: cellbackground.html
<html><title>cell background</title>
<body>
<h4>Cell background:</h4>
<table border="1">
<tr>
<td bgcolor="#FF9F55">ABC</td>
<td>DEF</td>
</tr>
<tr>
<td
background="jpg/bgdesert.jpg">
GHI</td>
<td>JKL</td>
</tr>
</table>
</body>
</html>
hasilnya seperti di bawah ini
Mengatur posisi teks dalam tabel
Berikut ini adalah contoh mengatur posisi teks dalam tabel dengan atribut align, sehingga diperoleh layout yang lebih baik.
Contoh : aligntabel.html
<html><title>Align Tabel</title>
<body>
<p>Mengatur posisi teks dalam tabel </p>
<table width="400" border="1">
<tr>
<th align="left">Hari</th>
<th align="right">Kuliah-1</th>
<th align="right">Kuliah-2</th>
</tr>
<tr>
<td align="left">Senin</td>
<td align="right">Web Design </td>
<td align="right">Aplikasi Web </td>
</tr>
<tr>
<td align="left">Selasa</td>
<td align="right">Database</td>
<td align="right">Matematika</td>
</tr>
<tr>
<td align="left">Rabu</td>
<td align="right">Bahasa Enggris </td>
<td align="right">RPL</td>
</tr>
</table>
</body>
</html>

SEMOGA BERMANFAAT

Komentar

Postingan populer dari blog ini

Desain Tampilan Game Tebak Gambar Hewan

Membuat pesan Toast di android studio