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

Memformat Karakter HTML - HTML Tutorial

Format terhadap karakter yang ditampilkan akan sangat berguna untuk membuat sebuah dokumen HTML yang menarik. 1.Logical Format Logical format akan menerapkan layout dokumen secara logis dan terstruktur.Tag-tag yang termasuk logical format adalah sebagai berikut : <cite> digunakan untuk menandai suatu kutipan (Citation). <code> digunakan untuk menampilkan kode-kode pemrograman,misalnya bahasa C. <em> digunakan untuk menandai suatu teks yang ditekankan oleh penulis. <kbd> digunakan untuk menandai suatu teks yang harus dimasukkan oleh user melalui keyboard. <samp> digunakan untuk menandai suatu teks yang dimaksudkan sebagai contoh. <strong> digunakan untuk menandai bagian yang terpenting dari suatu teks. <var> digunakan untuk menampilkan nama variabel. <dfn> digunakan untuk menandai sebuah subdenfinisi dari daftar. Semua tag tersebut memerlukan tag penutupnya masing-masing. Contoh (save dengan nama logical format.html) :  <html> ...
Posting Komentar
Baca selengkapnya

Menggunakan Link di dalam HTML - HTML Tutorial

Link merupakan suatu gambar atau teks yang terkait dengan suatu alamat tertentu.Jika link diklik maka dokumen HTML akan menuju ke alamat tersebut.Ditandai dengan Anchor, yaitu tag <a>. Tag <a> mempunyai dua atribut,yaitu href dan name.Atribut href digunakan jika sebuah anchor akan digunakan sebagai link,sedangkan atribut name digunakan jika anchor akan digunakan sebagai tujuan. 1.Link ke dokumen lain Untuk membuat link/penghubung dengan target ke dokumen/halaman yang berbeda,anda harus membuat dokumen yang dituju/target dan disimpan dalam direktori tertentu,baik pada direktori yang sama atau berbeda dengan dokumen yang aktif sekarang.Untuk mencoba kita akan membuat 3 file yang saling berhubungan.Sebelumnya supaya file-file yang dibuat terlihat rapi kita buat folder "tabel" terlebih dahulu jika nanti file link yang kita buat tersimpan di dalam folder "tabel". 1.link-utama.html  <html> <head> <title> Halaman Utama </title> </head...
Posting Komentar
Baca selengkapnya

TEKNOLOGI WEB

TEKNOLOGI WEB sumber gambar slideplayer.info Web berdasarkan teknologinya terbagi menjadi dua,yaitu Web Statis dan Web Dinamis.Sebelum menuju ke perbedaan web statis dan web dinamis,mari kita bahas persamaannya terlebih dahulu.Persamaan web statis dan dinamis yaitu sama-sama keduanya merupakan suatu web yang menampilkan halaman yang ditampilkan di internet yang memuat informasi tertentu (khusus). Pengertian Web Statis dan Web Dinamis Web statis adalah website yang mana pengguna tidak bisa mengubah konten dari web tersebut secara langsung menggunakan browser.Interaksi yang terjadi antara pengguna dan server hanyalah seputar pemrosesan link saja.Halaman-halaman web tersebut tidak memiliki database,data dan informasi yang ada pada web statis tidak berubah-ubah kecuali diubah sintaksnya.Dokumen web yang dikirim kepada client akan sama isinya dengan apa yang ada di web server. Contoh dari web statis adalah web yang berisi profil perusahaan.Disana hanya ada beberapa...
Posting Komentar
Baca selengkapnya