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

Surat Ar Rahman Dan Agribisnis

 Surat Ar Rahman merupakan surat ke-55 dalam Al Qur'an yang terdiri dari 78 ayat.Arti dari surat Ar Rahman adalah "Yang Maha pemurah atau maha Pengasih".Seperti surat Yaasin,nama surat Ar Rahman juga diambil dari ayat pertama surat tersebut. Surat Ar Rahman menggambarkan kekuasaan Allah SWT sebagai tuhan maha pencipta yang telah mengaruniakan nikmat yang tidak terhitung jumlahnya kepada makhluknya.Semua nikmat tersebut ditujukan semata-mata agar manusia bersyukur dan mengakui kebesaran Allah SWT. Akan tetapi,bahasan di bawah ini lebih difokuskan terhadap nikmat-nikmat Allah SWT yang terkait dengan ruang lingkup agribisnis. Allah menciptakan manusia sebagai khalifatul fil ardl karena manusia mampu berkomunikasi dan berperan memakmurkan bumi,salah satunya kegiatan agribisnis.Hal ini dijelaskan dalam firman Allah dalam surat Ar Rahman ayat 3-4. "Dialah yang telah menciptakan manusia,dan Dialah yang telah membolehkan manusia,memberi dan menerima kenyataan."(Ar Rahma
Posting Komentar
Baca selengkapnya

Pengertian HTML Dan Belajar Kode HTML

Sumber gambar www.hindilearn.in Html atau Hypertext Marksup Language merupakan salah satu format yang digunakan dalam pembuatan dokumen dan aplikasi yang berjalan dihalaman web.Sebenarnya,dokumen HTML hanyalah sebuah dokumen teks biasa dan disebut sebagai Markup Language yakni bahasa yang mengandung tanda (tag) tertentu yang digunakan untuk mengatur format tampilan suatu dokumen.Simbol markup yang digunakan oleh HTML ditandai dengan tanda lebih kecil (<) dan tanda lebih besar (>). HTTP atau Hypertext Transfer Protokol merupakan protokol yang digunakan untuk mentransfer data atu document yang berformat HTML dari web server ke browser (Internet Explorer,Netscape Navigator,NeoPlanet,dll).Dengan HTTP inilah yang memungkinkan Anda menjelajahi internet dan melihat halaman web. Untuk membuat dokumen HTML hanya dibutuhkan sebuah aplikasi teks editor biasa.Namun sekarang ini di pasaran terdapat banyak sekali HTML authoring (software yang digunakan untuk membuat atau mendesa
Posting Komentar
Baca selengkapnya