Membuat tabel pada HTML
membuat tabel |
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> </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 "&nbsp;".
</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
Posting Komentar