Untuk menyajikan data yang akurat dalam sebuah website kita dapat menggunakan tabel. Karena dengan menggunakan tabel Informasi-informasi yang diberikan akan terlihat rapi dan mudah dipahami. Untuk itu di awal bulan Februari 2017 ini saya akan berbagi ilmu bagaimana cara membuat tabel dengan menggunakan HTML
Membuat Tabel dengan HTML
Dalam bahasa HTML untuk membuat tabel ada beberapa susunan tag yang harus kita ketahui yaitu:
Membuat Tabel dengan HTML
Dalam bahasa HTML untuk membuat tabel ada beberapa susunan tag yang harus kita ketahui yaitu:
- tag <table>...</table> berfungsi untuk mendefinisikan pembuatan tabel dengan html
- tag <tr>....</tr> diletakan di dalam tag <table>...</table> yang berfungsi untuk membuat beris dalam tabel
- <td>....</td> diletakan setelah tag <tr>...</tr> berfungsi untuk membuat kolom dalam baris
- Atribut-atribut yang penting diketahui:
Baik, mari kita simak script dibawah ini:
- align berguna untuk Perataan : left, center, right
- valign berguna untuk Mengatur bentuk perataan secara vertikal
- bgcolor berguna untuk mengatur warna latar belakang dari table
- background berguna untuk menentukan gambar yang digunakan untuk background table
- color berguna untuk mengatur warna suatu sel dalam tabel
- border berguna untuk menentukan ukuran border tabel (dalam pixel)
- rowspan berguna untuk menggabungkan beberapa baris
- colspan berguna untuk menggabungkan beberapa kolom
- cellpadding berguna untuk jarak antara isi cell dengan batas cell (dalam pixel)
- cellspacing berguna untuk mengatur spasi/jarak antar cell (dalam pixel)
- width berguna untuk menentukan lebar tabel dalam pixel atau percent
- height berguna untuk menentukan tinggi tabel Untuk mengetahui baris pada tabel tersebut ditambahkan atribut ‘border’ pada tag table.
<html>
<head>
<title>DAFTAR SISWA</title>
</head>
<body>
DAFTAR SISWA
<table border="1">
<tr>
<td>No</td>
<td>NIS</td>
<td>Nama</td>
<td>Jenis kelamin</td>
<td>Kelas</td>
</tr>
<tr>
<td>1</td>
<td>151001</td>
<td>Nur Hamdii</td>
<td>laki-laki</td>
<td>X MIPA 1</td>
</tr>
<tr>
<td>2</td>
<td>151002</td>
<td>Nurul Hamda</td>
<td>laki-laki</td>
<td>X MIPA 2</td>
</tr>
</table>
</body>
</html>
Hasilnya :<head>
<title>DAFTAR SISWA</title>
</head>
<body>
DAFTAR SISWA
<table border="1">
<tr>
<td>No</td>
<td>NIS</td>
<td>Nama</td>
<td>Jenis kelamin</td>
<td>Kelas</td>
</tr>
<tr>
<td>1</td>
<td>151001</td>
<td>Nur Hamdii</td>
<td>laki-laki</td>
<td>X MIPA 1</td>
</tr>
<tr>
<td>2</td>
<td>151002</td>
<td>Nurul Hamda</td>
<td>laki-laki</td>
<td>X MIPA 2</td>
</tr>
</table>
</body>
</html>
| No | NIS | Nama | Jenis kelamin | Kelas |
| 1 | 151001 | Nur Hamdii | laki-laki | X MIPA 1 |
| 2 | 151002 | Nurul Hamda | laki-laki | X MIPA 2 |
Menggabungkan kolom dan baris dalam tabel
Atribut yang digunakan untuk menggabungkan kolom dan baris adalah atribut “colspan” sedangkan untuk menggabungkan baris menggunakan atribut “rowspan”
Untuk contoh disini, saya akan memodifikasi script diatas
<html>
<head>
<title>Daftar Niali Siswa</title>
</head>
<body>
DAFTAR NILAI SISWA
<table border="1">
<tr align="center" bgcolor="DCDCDC">
<td rowspan="2">No</td>
<td rowspan="2">NIS</td>
<td rowspan="2">Nama</td>
<td rowspan="2">Jenis kelamin</td>
<td rowspan="2">Kelas</td>
<td colspan="3">Nilai</td>
</tr>
<tr bgcolor="DCDCDC">
<td >Matematika</td>
<td >Fisika</td>
<td >Kimia</td>
</tr>
<tr bgcolor="FFB6C1">
<td>1</td>
<td>151002</td>
<td>Nur Hamdii</td>
<td>laki-laki</td>
<td>X MIPA 2</td>
<td>90</td>
<td>80</td>
<td>75</td>
</tr>
<tr>
<td>2</td>
<td>151002</td>
<td>Nurul Hamida</td>
<td>Perempuan</td>
<td>X MIPA 2</td>
<td>95</td>
<td>82</td>
<td>75</td>
</tr>
</table>
</body>
</html>
<head>
<title>Daftar Niali Siswa</title>
</head>
<body>
DAFTAR NILAI SISWA
<table border="1">
<tr align="center" bgcolor="DCDCDC">
<td rowspan="2">No</td>
<td rowspan="2">NIS</td>
<td rowspan="2">Nama</td>
<td rowspan="2">Jenis kelamin</td>
<td rowspan="2">Kelas</td>
<td colspan="3">Nilai</td>
</tr>
<tr bgcolor="DCDCDC">
<td >Matematika</td>
<td >Fisika</td>
<td >Kimia</td>
</tr>
<tr bgcolor="FFB6C1">
<td>1</td>
<td>151002</td>
<td>Nur Hamdii</td>
<td>laki-laki</td>
<td>X MIPA 2</td>
<td>90</td>
<td>80</td>
<td>75</td>
</tr>
<tr>
<td>2</td>
<td>151002</td>
<td>Nurul Hamida</td>
<td>Perempuan</td>
<td>X MIPA 2</td>
<td>95</td>
<td>82</td>
<td>75</td>
</tr>
</table>
</body>
</html>
hasilnya:
| No | NIS | Nama | Jenis kelamin | Kelas | Nilai | ||
| Matematika | Fisika | Kimia | |||||
| 1 | 151002 | Nur Hamdii | laki-laki | X MIPA 2 | 90 | 80 | 75 |
| 2 | 151002 | Nurul Hamida | Perempuan | X MIPA 2 | 95 | 82 | 75 |
Untuk latihan gunakan script di atas kemudian modfikasi warna jenis teks, font atau tambahkan kolom dan barisnya dengan menambahkan atribut yang sudah saya jelaskan fungsinya diawal tulisan.
Selamat mencoba!!!
No comments:
Post a Comment