Membuat Tabel dengan html | mahanani

Membuat Tabel dengan html

Pada » Home » , , , , , , , , , , , , , , , » Membuat Tabel dengan html

Baca Juga :

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 tabel

Contoh – Listing : tabel1.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>1000</td>

<td>2000</td>

<td>3000</td>

<td>4000</td>

<td>5000</td>

</tr>

</table>

<h4>Dua baris dan lima kolom :</h4>

<table border="1">

<tr>

<td>1000</td>

<td>2000</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>

clip_image002[4]

Gambar  Contoh pemakaian tabel

Cara membuat tabel dengan dreamweaver

· Buka halaman web baru

· Klik menu Insert –Tabel

clip_image003[4]

Gambar  Pembuatan tabel pada Dreamweaver

· Masukkan atribut tabel

Keterangan :

  1. rows : jumlah baris
  2. column : jumlah kolom
  3. table width : lebar tabel
  4. border thickness : tebal border
  5. cell padding : lebar cell padding
  6. cell spacing : lebar cell spacing

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 – Listing : tabelborder.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>

clip_image005[4]

Gambar Pengaturan tabel

Tabel Tanpa Brder

Terkadang dalam pembuatn tabel tidak diharapkan adanya border (garis-garis). Berikut ini adalah contoh tabel tanpa border.

Contoh – Listing  : tabelnoborder.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>

clip_image007[4]

Gambar  Tabel tanpa border

Tabel Header

Berikut ini adalah contoh tabel header dengan tag <th>.

Contoh – Listing   : 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>

clip_image008[4]

Gambar  Tabel header

Empty Cell

Berikut ini adalah contoh empty cell tabel.

Contoh – Listing : 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>

clip_image010[4]

Gambar  Cell kosong

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 – Listing  : 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>

clip_image012[4]

Gambar  Contoh colspan dan rowspan

Tag di dalam suatu tabel

Berikut ini adalah contoh menampilkan elemen di dalam elemen lain.

Contoh – Listing   : 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>

clip_image014[4]

Gambar  . Contoh tabel dalam tabel

Cellpadding

Cellpadding digunakan untuk memberikan jarak antara teks dengan tepi border tabel. Cellpadding menggunakan atribut cellpadding

Contoh – Listing  : cellpadding.html

<html><title>cellpadding</title>

<body>

<h4>Tanpa cellpadding:</h4>

<table border="1">

<tr>

<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>

clip_image016[4]

Gambar  Contoh cellpadding

Cellspacing

Cellspacing digunakan untuk memberikan jarak antara border dalam tabel dengan border luar tabel. Cellspacing menggunakan atribut cellspacing.

Contoh – Listing  : 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>

clip_image018[4]

Gambar  Cellspacing

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 – Listing  : 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>

clip_image020[4]

Gambar  Background pada tabel

Background Cell

Background Cell digunakan untuk memberikan background pada cell tertentu tabel sehingga dimungkinkan banyak warna pada sutau tabel.

Contoh – Listing   : 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>

clip_image021[4]

Gambar  Background Cell

Mengatur posisi teks dalam tabel

Berikut ini adalah contoh mengatur posisi teks dalam tabel dengan atribut align, sehingga diperoleh layout yang lebih baik.

Contoh – Listing   : 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>

clip_image022[5]

Gambar  Pengaturan teks pada tabel

Kamis, 19 April 2012

Unknown

ditulis dengan judul : Membuat Tabel dengan html

Posting Komentar

Silahkan berikan komentar anda

Forum Multimedia Edukasi www.formulasi.or.id
Facebook Twitter Opini
Forum Multimedia Edukasi www.formulasi.or.id

Kategori