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

Pentingnya belajar berfilsafat

 Ingatlah kita ini kayak kereta yang harus dikendalikan oleh akal.Jangan sampai akalnya mati bolak-balik.Kayak katanya Aristoteles itu bilang manusia adalah binatang yang mikir,jangan sampai mikirnya ini mati,karena begitu mikirnya mati yang tersisa tinggal binatangnya,dia pengendalinya. Oke,makanya belajarlah filsafat.Nanti di bagian-bagian awal simposium diskusimu muncul ,,,kenapa kok tiba-tiba ngomong cinta...Ya,karena awalnya ngomong filsafat. Jadi,katanya Socrates kan sering bilang bahwa filsafat itu adalah satu bidang keilmuwan,bidang pengetahuan yang membuat kita bisa hidup lebih baik.Kenapa?karena kita bisa berfikir lebih baik..Socrates kan gitu..pengetahuan keniscayaan kebaikan..pengetahuan yang benar,perbuatan pasti juga benar.Enggak mungkin orang ngerti pengetahuan yang baik,perbuatannya salah..Kenapa orang kayak gini katanya Plato berarti dia belum benar-benar tau,dan dia orang bodoh..Karena kalau orang benar-benar ngerti,kalau dia tau kebaikan dia pasti melakukan kebai...
Posting Komentar
Baca selengkapnya

Membangun Sikap Percaya Diri

Aset paling berharga bagi banyak orang adalah juga aset yang paling belakangan dihargai.Aset itu,apabila ditangani dengan sebenarnya,akan mampu memberikan hasil secara dramatis.Aset yang tidak dapat dikenakan harga setinggi apa pun adalah otak manusia,pikiran dan proses berpikir.             Otak merupakan kawasan penyimpanan dan kapasitasnya luar biasa,menjadi pentingkah untuk berhati-hati di dalam mengisinya.Sebagian orang mempunyai otak yang penuh dengan pemikiran dan pengalaman negatif.Mereka akan secara terus-menerus menanamkan berbagai masukan sehingga ketika dihadapkan pada sebuah kesempatan atau tantangan baru,otak mereka,ketika ditanya,mengirimkan jawaban : Tidak, kamu tidak mampu, atau tanggapan lain semacam itu.Langkah yang diperlukan untuk membangun kepercayaan diri dan yang pada gilirannya membangun rasa percaya diri bagi motivasi diri dari dalam.             Begitu banyak orang mengurungkan niat mereka dengan ...
Posting Komentar
Baca selengkapnya