Pertemuan 4
Cara Membuat tabel di HTML (tag table)
Dalam menampilkan data yang terstruktur atau tampilan dari database, kita biasanya akan membuatnya dalam bentuk tabel. HTML juga menyediakan Tabel tag digunakan untuk menampilkan data dalam bentuk tabel.
Cara Membuat Tabel HTML dengan tag <table>, <tr> dan <td>
Untuk membuat tabel di HTML, kita membutuhkan setidaknya 3 tag, yaitu tag <table>, tag <tr>,dan tag <td>:
§ Tag <table> digunakan untuk memulai tabel
§ Tag <tr> adalah singkatan dari table row, digunakan untuk membuat baris dari tabel.
§ Tag <td> adalah singkatan dari table data, digunakan untuk menginput data ke tabel.
Agar lebih jelas, kita akan langsung menggunakan contoh kode HTML:
Contoh penggunaan tag <table>:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Tabel</title>
</head>
<body>
<h1>Belajar Tag Tabel</h1>
<table border="1">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td> Baris 2, Kolom 3</td>
</tr>
<tr>
<td> Baris 3, Kolom 1</td>
<td> Baris 3, Kolom 2</td>
<td> Baris 3, Kolom 3</td>
</tr>
<tr>
<td> Baris 4, Kolom 1</td>
<td> Baris 4, Kolom 2</td>
<td> Baris 4, Kolom 3</td>
</tr>
</table>
</body>
</html>
bentuk tampilannya :
Kita Akan mencoba mengisi data dari tiap-tiap baris dan kolom yang sudah kita pelajari sebelumnya perhatikan script di bawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Membuat Tabel</title>
<link rel="stylesheet" type="text/css" href="styletabel.css">
</head>
<body>
<center>
<font color="blue">
<h1>STT Pelita Bangsa</h1>
<h2>Kelas TI.14.B3</h2>
</font></center>
<center>
<table class="table1">
<tr>
<th>No</th>
<th>NIM</th>
<th>Nama</th>
<th>Mata Kuliah</th>
</tr>
<tr>
<td>1</td>
<td>311421192</td>
<td>Ahmad Burhan</td>
<td>Pemrograman Web</td>
</tr>
<tr>
<td>2</td>
<td>311421193</td>
<td>Ahmad Muttohir</td>
<td>Pemrograman Android</td>
</tr>
<tr>
<td>3</td>
<td>311421194</td>
<td>Darmono</td>
<td>Teknologi Basis Data</td>
</tr>
<tr>
<td>4</td>
<td>311421195</td>
<td>Hana Kristian</td>
<td>Kapita Selekta</td>
</tr>
<tr>
<td>5</td>
<td>311421196</td>
<td>Sasmita Jaya</td>
<td>Data Meaning</td>
</tr>
</table></center>
</body>
</html>
Script diatas merupakan script untuk mengisi tabel yang sudah kita buat tadi dengan sedikit modifikasi kita tambahkan css nya :
.table1 {
font-family: sans-serif;
color: #444;
border-collapse: collapse;
width: 50%;
border: 1px solid #f2f5f7;
}
.table1 tr th{
background: #35A9DB;
color: #fff;
font-weight: normal;
}
.table1, th, td {
padding: 8px 20px;
text-align: center;
}
.table1 tr:hover {
background-color: #f5f5f5;
}
.table1 tr:nth-child(even) {
background-color: #f2f2f2;
}
Maka Hasil tampilan dari script diatas seperti ini :
Komentar
Posting Komentar