Tutorial Cara membuat tabel di HTML (tag table)
cara membuat tabel di HTML (tag table)
Tabel (table) sangat diperlukan ketika kita ingin menampilkan data yang berbentuk kolom-kolom. Tabel juga berfungsi untuk memisahkan antara tulisan atau huruf berupa data yang diambil dari beberapa informasi kemudian dikelompok-kelompokkan. Maka kita akan memasukkan ke sebuah tabel.Untuk membuat tabel di HTML memiliki tag khusus yaitu tag <table>. tag table ini memiliki 3 atribut utama yang diantaranya <table>, <td>, dan <td>. tag <table> berfungsi untuk membuat tabel kemudian diikuti dengan tag <tr> atau table rows berfungsi untuk membuat baris pada tabel. Dan tag <td> berfungsi untuk membuat kolom pada tabel.
Berikut adalah contoh cara membuat tabel di HTML. Silahkan buka aplikasi text editor sobat dan ketikkan kode dibawah ini.
file tabel.html
<!DOCTYPE html>
<html>
<head>
<title> Cara membuat tabel </title>
</head>
<body>
<h1> Contoh Tabel di HTML </h1>
<table border=”1”>
<tr>
<td>Angka 1</td>
<td>Angka 2</td>
<td>Angka 3</td>
</tr>
<tr>
<td>Angka 4</td>
<td>Angka 5</td>
<td>Angka 6</td>
</tr>
</tabel>
</body>
</html>
<html>
<head>
<title> Cara membuat tabel </title>
</head>
<body>
<h1> Contoh Tabel di HTML </h1>
<table border=”1”>
<tr>
<td>Angka 1</td>
<td>Angka 2</td>
<td>Angka 3</td>
</tr>
<tr>
<td>Angka 4</td>
<td>Angka 5</td>
<td>Angka 6</td>
</tr>
</tabel>
</body>
</html>
Simpan kode diatas dengan nama tabel.html kemudian jalankan maka akan menampilkan seperti gambar berikut :
Mengatur Lebar dan Tinggi Kolom Tabel
Untuk mengatur lebar kolom tabel maka kita akan menggunakan atribut width dan height. Ada dua cara untuk menentukan lebar kolom pada tabel. Yaitu yang pertama menggunakan prosentase dan kedua menggunakan pixel.Mengatur lebar kolom tabel Menggunakan prosentase
Jika lebar kolom ditentukan 100% maka tampilan tabel akan melebar memnuhi lebar halaman. Dan jika lebar setiap kolom tidak ditentukan, maka lebar setiap kolomnya akan terbagi sama rata. Misalnya tabel memiliki 2 kolom maka lebar masing-masing kolom tersebut adalah 50%.Untuk lebih jelasnya berikut saya akan beri contoh pada sebuah tabel beberapa kolomnya akan saya berikan persentase yang berbeda.
Baca Juga : Cara Membuat Daftar/List di HTML (tag list)
<!DOCTYPE html>
<html>
<head>
<title> Cara membuat tabel </title>
</head>
<body>
<h1> Contoh Tabel di HTML </h1>
<table border=”1” width=”100%”>
<tr>
<td width=”25%”>Kereta</td>
<td width=”75%”>Motor</td>
</tr>
<tr>
<td width=”25%”>Pesawat</td>
<td width=”75%”>Helikopter</td>
</tr>
</tabel>
</body>
</html>
<html>
<head>
<title> Cara membuat tabel </title>
</head>
<body>
<h1> Contoh Tabel di HTML </h1>
<table border=”1” width=”100%”>
<tr>
<td width=”25%”>Kereta</td>
<td width=”75%”>Motor</td>
</tr>
<tr>
<td width=”25%”>Pesawat</td>
<td width=”75%”>Helikopter</td>
</tr>
</tabel>
</body>
</html>
Hasilnya seperti gambar berikut :
Mengatur lebar dan tinggi kolom tabel Menggunakan pixel
Untuk menentukan lebar dan tinggi kolom pada tabel. Menggunakan type width dan heigth yang ditentukan dengan satuan pixel. Untuk lebih jelasnya sobat bisa praktekkan contoh dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title> Cara membuat tabel </title>
</head>
<body>
<h1> Contoh Tabel di HTML </h1>
<table border=”1”>
<tr height=”30”>
<td width=”100”>Kereta</td>
<td width=”150”>Motor</td>
</tr>
<tr height=”40”>
<td width=”100”>Pesawat</td>
<td width=”150”>Helikopter</td>
</tr>
</tabel>
</body>
</html>
<html>
<head>
<title> Cara membuat tabel </title>
</head>
<body>
<h1> Contoh Tabel di HTML </h1>
<table border=”1”>
<tr height=”30”>
<td width=”100”>Kereta</td>
<td width=”150”>Motor</td>
</tr>
<tr height=”40”>
<td width=”100”>Pesawat</td>
<td width=”150”>Helikopter</td>
</tr>
</tabel>
</body>
</html>
Jika dijalankan hasilnya seperti gambar berikut :
Mengatur Posisi Tulisan Dalam Tabel
Untuk mengatur perataan tulisan dalam sebuah tabel menggunakan tag align (horizontal) dan valign (vertikal). supaya lebih jelas langsung saja saya berikan contoh sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<title> Cara membuat tabel </title>
</head>
<body>
<h1> Contoh Tabel di HTML </h1>
<table border=”5”>
<tr height=”30”>
<td width=”100” align=”left” valign=”top”>Kereta</td>
<td width=”150” align=”center” valign=”middle”>Motor</td>
</tr>
<tr height=”40”>
<td width=”100” align=”right” valign=”bottom”>Pesawat</td>
<td width=”150” align=”center” valign=”bottom”>Helikopter</td>
</tr>
</tabel>
</body>
</html>
<html>
<head>
<title> Cara membuat tabel </title>
</head>
<body>
<h1> Contoh Tabel di HTML </h1>
<table border=”5”>
<tr height=”30”>
<td width=”100” align=”left” valign=”top”>Kereta</td>
<td width=”150” align=”center” valign=”middle”>Motor</td>
</tr>
<tr height=”40”>
<td width=”100” align=”right” valign=”bottom”>Pesawat</td>
<td width=”150” align=”center” valign=”bottom”>Helikopter</td>
</tr>
</tabel>
</body>
</html>
Jika dijalankan browser akan menampilkan seperti gambar berikut :
Itulah artikel yang membahas tentang cara membuat tabel di HTML. Mudah mudahan materi tutorial belajar HTML bagi pemula ini dapat menambah ilmu sobat tentang bahasa HTML. Terima kasih.
0 Response to "Tutorial Cara membuat tabel di HTML (tag table)"
Post a Comment