Langsung ke konten utama

Menggunakan Table di Dalam HTML - HTML Tutorial

Tabel merupakan cara untuk menampilkan informasi dalam halaman web dengan bentuk kolom dan baris.

Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table,yaitu : <table>,<tr>,dan <td>.
Yang perlu diingat adalah bahwa tag <tr> dan <td> harus terletak di antara tag <table> dan </table>.

1. <table>

Digunakan untuk mendefinisikan pembuatan tabel.Memiliki atribut :
  • align - perataan : rata kiri (left),tengah (center) atau kanan (right)
  • valign - mengatur bentuk perataan secara vertikal
  • bgcolor - mengatur warna latar belakang (background) dari tabel
  • background - menentukan gambar yang digunakan sebagai background tabel
  • color - untuk mengatur warna suatu sel dalam tabel
  • Border - menentukan ukuran Border tabel (dalam pixel)
  • rowspan - menggabungkan beberapa baris
  • colspan - menggabungkan beberapa kolom
  • cellpadding - jarak antara isi Cell dengan garis Cell (dalam pixel)
  • cellspacing - mengatur spasi/jarak antara Cell (dalam pixel)
  • width - menentukan lebar tabel dalam pixel atau percent
  • height - menentukan tinggi tabel

2. <tr>

Tag ini digunakan untuk membuat baris baru (pada tabel).Terdiri dari atribut :
  • align - perataan : rata kiri (left),tengah (center) atau kanan (right)
  • bgcolor - warna latar belakang dari garis
  • valign - perataan vertikal : top,middle atau bottom

3. <td>

Tag ini digunakan untuk membuat kolom baru pada tabel.Attributnya adalah :
  • align - untuk menentukan perataan kolom
  • background - untuk menentukan image yang digunakan sebagai latar belakang dari kolom
  • bgcolor - untuk menentukan warna latar belakang
  • colspan - lihat gambar contoh
  • height - untuk mengatur ukuran tinggi Cell dalam pixels
  • nowrap - untuk membuat supaya isi dari kolom tetap berada pada satu baris
  • rowspan - lihat gambar contoh
  • valign - untuk mengatur perataan vertikal : top,middle atau bottom
  • width - untuk menentukan lebar kolom dalam pixel atau percen
Contoh (save dengan nama tabel1.html) :

 <html>
<head>
<title>Pembuatan Table</title>
</head>
<body>
<font face="arial" size="2" color="Tahoma">
<table>
<tr>
<td>Ini contoh tabel sederhana tanpa border</td>
</tr>
</table>
<p>
<table border="1">
<tr>
<td>Ini contoh tabel sederhana dengan border</td>
</tr>
</table>
<p>
<table border="1">
<tr>
<td>No.</td>
<td>Nama</td>
<td>Alamat</td>
</tr>
<tr>
<td>1.</td>
<td>Wahyu</td>
<td>Bekasi</td>
</tr>
<tr>
<td>3.</td>
<td>Lesmon</td>
<td>Kranji</td>
</tr>
</table>
</body>
</html>

Contoh (save dengan nama tabel2.html) :

 <html>
<head>
<title>Belajar Membuat Tabel</title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0"
bordercolor="#ffffff"
width="100%" height="115">
<tr>
<td width="100%" height="115" bordercolor="#C0C0C0"
bgcolor="#BDCED9">&nbsp;</td>
</tr>
</table>
<font size="1">&nbsp;</font>
<table border="0" cellpadding="0" cellspacing="0"
bordercolor="#111111"
width="100%" height="431">
<tr>
<td width="23%" height="307" valign="top">
<table border="1" cellpadding="0" cellspacing="0"
bordercolor="#BDCED9" width="94%" height="245">
<tr>
<td width="100%" height="244"
bordercolor="#C0C0C0" bgcolor="#BDCED9">&nbsp;</td>
</tr>
</table>
<font size="1">&nbsp;</font>
<table border="1" cellpadding="0" cellspacing="0"
bordercolor="#BDCED9" width="94%" height="152">
<tr>
<td width="100%" height="19"
bgcolor="#BDCED9"
bordercolor="#C0C0C0">&nbsp;</td>
</tr>
<tr>
<td width="100%" height="132"
bordercolor="#C0C0C0">
&nbsp;</td>
</tr>
</table>
</td>
<td width="77%" height="307" valign="top">
<table border="1" cellpadding="0" cellspacing="0"
bordercolor="#ffffff"
width="97%" height="411">
<tr>
<td width="64%" height="109">&nbsp;</td>
<td width="36%" height="109">&nbsp;</td>
</tr>
<tr>
<td width="64%" height="301"
rowspan="2">&nbsp;</td>
<td width="36%" height"24"
bgcolor="#BDCED9"
bordercolor="#C0C0C0">
<font size="1">&nbsp;</font></td>
</tr>
<tr>
<td width="36%" height="277"
bordercolor="#C0C0C0"> &nbsp;
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

4. Menambahkan Judul Tabel

Judul dalam tabel dibedakan menjadi tiga macam, yaitu judul tabel,judul kolom table dan judul baris tabel.Judul tabel atau biasa disebut CAPTION terletak dibagian luar tabel yang bisa berada dibawah atau diatas tabel.Secara default caption diletakkan dibagian atas suatu tabel,tetapi juga dapat diletakkan dibawah suatu tabel dengan menambahkan atribut ALIGN=BOTTOM pada elemen caption tersebut.

Judul kolom atau judul baris dibuat dengan elemen yang sama yaitu elemen TABLE HEADER <TH>. Judul kolom terletak pada sel disebelah kiri atau kolom pertama suatu tabel,sedangkan judul baris terletak pada baris pertama suatu tabel.Judul baris atau judul kolom akan tercetak tebal.

Contoh (save dengan nama judul-tabel1.html) :

 <html>
<head>
<title>Pembuatan Judul Table</title>
</head>
<body>
<font face="arial" size="2" color="maroon">
<table border=1>
<caption align="top"><b><u>Daftar Alamat</u></b>
</caption>
<tr>
<th width="40">No.</td>
<th width="150">Nama</td>
<th width="200">Alamat</td>
</tr>
<tr>
<td align="center">1.</td>
<td>Wahyu</td>
<td>Bekasi</td>
</tr>
<tr>
<td align"center">2.</td>
<td>Lesmono</td>
<td>Kranji</td>
</tr>
</table>
</body>
</html>

Contoh (save dengan nama judul-tabel2.html) :

 <html>
<head>
<title>Pembuatan Judul Table</title>
</head>
<body>
<font face="arial" size="2" color="maroon">
<table border="1">
<caption align="bottom"><b><u>Daftar
Alamat</u></b></caption>
<tr>
<th width="60" align="left">No.</td>
<td width="150">1.</td>
<td width="200">2.</td>
</tr>
<tr>
<th align="left">Nama</td>
<td>Wahyu</td>
<td>Lesmon</td>
</tr>
<tr>
<th align="left">Alamat</td>
<td>Bekasi</td>
<td>Kranji</td>
</tr>
</table>
</body>
</html>

5. Mengatur Lebar dan Tinggi Suatu Tabel

Lebar tabel diatur dengan menggunakan atribut WIDTH dan untuk mengatur tinggi table dengan atribut HEIGHT.Jika atribut WIDTH dan HEIGHT digunakan dalam elemen TABLE nilainya menunjukkan lebar dan tinggi tabel terhadap BROWSER sedangkan jika digunakan pada elemen TH dan TD,nilainya merupakan lebar dan tinggi dari suatu tabel.Nilai atribut menggunakan ukuran % (max 100%) dan ukuran pixel.

Contoh (save dengan nama judul-tabel2.html) :

 <html>
<head>
<title>Mengatur Lebar dan Tinggi Tabel</title>
</head>
<body>
<font face=arial size=2 color=Tahoma>
<table border=1 width=100%>
<caption align=top><b><u>Daftar Alamat</u></b>
</caption>
<tr>
<th width=40>No.</td>
<th width=150>Nama</td>
<th width=200>Alamat</td>
</tr>
<tr>
<td align=center>1.</td>
<td height=50>Wahyu</td>
<td height=50>Bekasi</td>
</tr>
<tr>
<td align=center>2.</td>
<td height=30>Lesmon</td>
<td height=30>Kranji</td>
</tr>
</table>
</body>
</html>

6. Perataan dalam Tabel

Perataan dalam tabel dikenal dua macam,yaitu perataan secara horizontal dengan atribut ALIGN dan perataan vertikal dengan atribut VALIGN,serta untuk membuat suatu tabel posisinya menjadi ditengah-tengah layar browser.

Contoh (save dengan nama perataan-tabel.html) :

 <html>
<head>
<title>Membuat Perataan Table</title>
</head>
<body>
<font face="arial" size="2" color="Tahoma">
<table border="1" align="center">
<caption align="top">
<b>Daftar Alamat</b>
<hr width="110">
</caption>
<tr>
<th width="40">No.</td>
<th width="150">Nama</td>
<th width="200">Alamat</td>
</tr>
<tr>
<td align="center">1.</td>
<td align="center" valign="middle" height="50">Wahyu</td>
<td align="right" valign="top" height="50">Bekasi</td>
</tr>
<tr>
<td align="center">2.</td>
<td align="left" valign="Vaseline"
height="50">Lesmono</td>
<td align="left" valign="bottom" height="50">Kranji</td>
</tr>
</table>
</body>
</html>


7. Membuat Warna Pada Tabel

Didalam pewarnaan tabel kita dapat mengatur warna latar belakang dan teks serta warna bordernya.Untuk menentukan warna latar belakang pada suatu tabel,gunakan atribut BGCOLOR sedangkan untuk warna Border dapat menggunakan beberapa atribut sbb :

 Atribut Fungsi
 BORDERCOLOR Mengubah warna keseluruhan border
 BORDERCOLORLIGHT Mengubah warna Border bagian atas dan kiri
 BORDERCOLORDARK Mengubah warna Border bagian bawah dan kanan

Penggabungan Baris/kolom

Untuk penggabungan baris/kolom (merge) digunakan atribut COLSPAN dan ROWSPAN. COLSPAN digunakan untuk menggabungkan beberapa kolom menjadi 1 sedangkan ROWSPAN menggabungkan beberapa baris menjadi 1.

Cellpadding Dan Cellspacing

CELLPADDING digunakan untuk mengatur spasi antara Border dengan tulisan, sedangkan CELLSPACING digunakan untuk mengatur spasi antar dua buah sel.

Contoh (save dengan merge-tabel.html) :

 <html>
<head>
<title>Contoh merge,Cell dan pedd</title>
</head>
<body>
<table border="2" align="center" bordercolor="#000000"
bgcolor="#ffffff" cellspacing="4" cellpadding="8"
width="100%">
<font face="arial" size="2" color=black">
<tr>
<td bgcolor="#EEEEEE" colspan="2"
align="center">Kelas</td>
<td bgcolor="EEEEEE" align="center"
rowspan="2">Keterangan</td>
</tr>
<tr>
<td width="200" bgcolor="#DFF9F9"
align="center">I</td>
<td width="200" bgcolor="#DEF9F9"
align="center">II</td>
</tr>
<tr>
<td>Ali</td>
<td>Umar</td>
<td align="center">Lunas</td>
</tr>
</table>
</body>
</head>
</html>

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Elemen-elemen dasar HTML untuk memformat halaman web

Sumber gambar peterwebs.com 1.Elemen Head Bagian Head sebenarnya tidak harus ada pada dokumen HTML, tetapi pemakaian head yang benar akan meningkatkan kegunaan suatu dokumen HTML.Isi bagian head kecuali judul dokumen tidak akan terlihat oleh pembaca dokumen tersebut. Elemen-elemen pada bagian head akan mengerjakan tugas-tugas sebagai berikut : Menyediakan judul dokumen Menjabatani hubungan antar dokumen Memberitahu browser untuk membuat form pencarian Menyediakan metode untuk mengirim pesan ke tipe browser Elemen yang mungkin terdapat pada bagian head : 1.Tag <title>,digunakan untuk memberi judul dokumen.Penggunaannya sebagai berikut : <title> Judul </title> 2.Tag <base>,digunakan untuk menentukan basis URL sebuah dokumen.Penggunaannya adalah sebagai berikut : <base href="url"> contoh : <base href="//www.alamat.com/direktori"> 3.Tag <link>,digunakan untuk menunjukkan relasi antar do...
2 komentar
Baca selengkapnya

Si Gadis Buta Pembakit Percaya Diri

Ada Satu kisah yang menceritakan seorang gadis buta.Suatu hari ia bertemu seorang pesulap yang kemudian mengajaknya bermain sulap.Ajaib sekali bahwa sang gadis bisa menebak seluruh kartu yang diberikan sang pesulap.Pertanyaan kemudian,mengapa si gadis buta itu dapat menebak permainan sang pesulap?Ternyata rahasianya ada pada kecerdikan sang pesulap.Dengan menggunakan beberapa trik muslihat,ia berhasil mengeluarkan potensi sang gadis untuk bermain sulap bersamanya.Tanpa ragu sang pesulap mengajak sang gadis bermain di hadapan keluarganya,dihadapan orang banyak.Kepercayaan diri sang pesulap yang begitu tinggi menular pada sang gadis buta.              Sejak saat itu,sang gadis merasa telah menjadi seorang bintang di rumahnya.Ini terjadi hanya karena ada orang yang memberinya kesempatan untuk bersinar sejenak dan merasa istimewa di depan keluarganya.Ia yang selama ini merasa menjadi beban dalam keluarganya,sekarang merasa sejajar dengan mereka karena peri...
Posting Komentar
Baca selengkapnya

Skala Suhu dan Perbandingannya

  a. Skala Celcius Skala Celcius merupakan skala yang paling banyak digunakan dalam kehidupan sehari-sehari. Skala Celcius ditetapkan oleh seorang fisikawan Swedia yang bernama Andreas Celcius (1701 - 1744).Skala temperatur Celcius menggunakan satuan 'Derajat Celcius' (simbol °C).Pada skala Celcius,titik beku air ditetapkan sebagai titik tetap bawah,yaitu sebesar 0°C dan titik didih air ditetapkan sebagai titik tetap atas,yaitu sebesar 100°C.Jarak antara kedua titik tetap ini dibagi menjadi 100 skala. Tokoh Sains Andreas Celcius Andreas Celcius (27 November 1701 - 25 April 1744) lahir di Ovanaker,Swedia.Beliau adalah seorang profesor astronomi di Universitas Uppsala dari tahun 1730 hingga 1744.Pada tahun 1733 di Nuremberg,Celcius menerbitkan sebuah koleksi 316 pengamatan Aurora Borealis yang dibuatnya dan orang lain selama tahun 1716 - 1732.Di Paris beliau menggagas pengukuran busur Meridian di lapland dan pada 1736 mengikuti sebuah ekspedisi yang dilaksanakan untuk tujuan ters...
Posting Komentar
Baca selengkapnya