Cara Membuat Tampilan Tabel Sederhana Menggunakan HTML CSS
Pada postingan sebelumnya tentang htm, css.etc ada ulasan tenang bagaimana cara membuat overlays pada sebuah gambar, overlays merupakan sebuah hamparan yang berada pada sebuah area yang telah kita tentukan, lebih lengkapnya silahkan teman - teman dapat membaca postingan di bawah ini :
Demikian ulasan bagaimana cara membuat tampilan tabel sederhana menggunakan html css, jika ada saran atau pertanyaan saya tunggu di kolom komentarnya ya sob. Terima Kasih
Kali ini saya akan melanjutkan ulasan tentang htm, css .etc lebih khususnya bagaimana cara membuat tampilan tabel, karena sebelumnya kita telah membuat sebuah form input tentu kita akan membutuhkan halaman untuk menampilkan data user yang telah kita inputkan. Berikut kode html yang kita butuhkan .
Untuk Teman - teman yang belum mempunyai kode keseluruhan dapat cek postingan artikel dibagian Related Post bawah artikel ini.
<div class="post-content">
<h2>Form Input Data</h2>
<table>
<tr>
<th>No</th>
<th>Username</th>
<th>Nama Lengkap</th>
<th>Alamat</th>
<th>Agama</th>
<th>Jenis Kelamin</th>
</tr>
<tr>
<td>1</td>
<td>Violet</td>
<td>Violet Evergarden</td>
<td>Jl fatmawati no 5</td>
<td>Kristen</td>
<td>Perempuan</td>
</tr>
<tr>
<td>2</td>
<td>AF</td>
<td>Alucard de franco</td>
<td>Jl Mawar no 10</td>
<td>Katholik</td>
<td>Laki-laki</td>
</tr>
<tr>
<td>3</td>
<td>Miya</td>
<td>Miya</td>
<td>Jl kebaikan no 7</td>
<td>Islam</td>
<td>Perempuan</td>
</tr>
<tr>
<td>4</td>
<td>Sun</td>
<td>Sun MK</td>
<td>Jl Sutra no 1</td>
<td>Budha</td>
<td>Laki-laki</td>
</tr>
<tr>
<td>5</td>
<td>YSS</td>
<td>Yisun sin</td>
<td>Jl tujuh lima no 9</td>
<td>Hindu</td>
<td>Laki-laki</td>
</tr>
</table>
</div>
yang kali ini kita butuhkan untuk membuat tabel html ialah untuk lebih mengenal kode table, tr, th, td.<h2>Form Input Data</h2>
<table>
<tr>
<th>No</th>
<th>Username</th>
<th>Nama Lengkap</th>
<th>Alamat</th>
<th>Agama</th>
<th>Jenis Kelamin</th>
</tr>
<tr>
<td>1</td>
<td>Violet</td>
<td>Violet Evergarden</td>
<td>Jl fatmawati no 5</td>
<td>Kristen</td>
<td>Perempuan</td>
</tr>
<tr>
<td>2</td>
<td>AF</td>
<td>Alucard de franco</td>
<td>Jl Mawar no 10</td>
<td>Katholik</td>
<td>Laki-laki</td>
</tr>
<tr>
<td>3</td>
<td>Miya</td>
<td>Miya</td>
<td>Jl kebaikan no 7</td>
<td>Islam</td>
<td>Perempuan</td>
</tr>
<tr>
<td>4</td>
<td>Sun</td>
<td>Sun MK</td>
<td>Jl Sutra no 1</td>
<td>Budha</td>
<td>Laki-laki</td>
</tr>
<tr>
<td>5</td>
<td>YSS</td>
<td>Yisun sin</td>
<td>Jl tujuh lima no 9</td>
<td>Hindu</td>
<td>Laki-laki</td>
</tr>
</table>
</div>
- <table>...</table> , kode table ini adalah elemen yang berfungsi untuk membuat tabel di html
- <tr>...</tr>, kode tr atau table row berfungsi untuk membuat baris tabel
- <th>...</th>, kode th atau table header berfungsi untuk membuat nama kolom - kolom utama
- <td>...</td>, kode td atau table data berfungsi untuk membuat tampilan pada kolom - kolom setelah table header
selain kode html di atas, kita juga membutuhkan sedikit css untuk mempercantik tampilan table. Berikut kode css :
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
margin-left: 5px;
}
tr:nth-child(odd) {
background-color: #f9f9f9;
}
th {
background-color: #d8d8d8;
}
td, th {
border: 1px solid #f9f9f9;
text-align: left;
padding: 8px;
}
letakan css ini pada file yang telah kita buat sebelumnya yaitu style.css. Jika teman - teman belum mengikuti postingan tentang cara memisahkan kode css dan html menjadi dua file berbeda bisa cek link postingan artike pada related post atau bisa juga kita taruh kode css ini pada bagian <head>...</head> . Jika semua kode sudah tersimpan, maka tampilan tabelnya akan seperti gambar diatas judul :font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
margin-left: 5px;
}
tr:nth-child(odd) {
background-color: #f9f9f9;
}
th {
background-color: #d8d8d8;
}
td, th {
border: 1px solid #f9f9f9;
text-align: left;
padding: 8px;
}
Demikian ulasan bagaimana cara membuat tampilan tabel sederhana menggunakan html css, jika ada saran atau pertanyaan saya tunggu di kolom komentarnya ya sob. Terima Kasih
0 Response to "Cara Membuat Tampilan Tabel Sederhana Menggunakan HTML CSS "
Post a Comment