Cara Membuat Table Sederhana pada HTML

Table digunakan untuk membuat tamilan daftar lebih rapi, aku biasanya menggunakan table untuk mendeskripsikan sepsifikasi Handphone, Akan tetapi table tersebut sudah aku lengkapi dengan CSS jadi kelihatan lebih cantik, jika pembelajaran HTML selesai aku akan melanjutkan pembahasan mengenai CSS.

myfcode - Cara Membuat Table Sederhana pada HTML

Seperti biasa sebelum memulai aku sarankan kamu untuk menggunakan aplikasi Notepad++ untuk melakukan pengkodingan, kamu bisa mendownloadnya melalui blog ini pada artikel "Notepad++ - Aplikasi Coding Untuk Pemula"

Untuk membuat table diperlukan element <table> kemudian ditutup dengan tag </table>, pembuatanya sangat mudah kita hanya menggunakan 3 tag pada pembuatan table yaitu tag
  • <table>
  • <tr>
  • <td>
Untuk penjelasan kamu bisa melihat dibawah. Untuk sekarang kita membuat script table dulu yak

<!DOCTYPE html>
<html>
<head>
<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: ##ffffff;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Judul 1</th>
    <th>Judul 2</th>
    <th>Judul 3</th>
  </tr>
  <tr>
    <td>Kolom 1</td>
    <td>Kolom 2</td>
    <td>Kolom 3</td>
  </tr>
  <tr>
    <td>Kolom 1</td>
    <td>Kolom 2</td>
    <td>Kolom 3</td>
  </tr>
</table>

</body>
</html>

Aku menggunakan sedikit CSS supaya kolom table bisa dilihat enak. Script tersebut jika sudah jadi HTML maka akan seperti gambar dibawah ini.

myfcode - Cara Membuat Table Sederhana pada HTML

Aku akan membahas sedikit mengenai fungsi tag html yang berada pada table
  • <table> digunakan untuk membuat table 
  • <tr> digunakan membuat baris pada table ( Table Row ) 
  • <td> digunakan untuk memasukan data/konten dalam table ( Table Data )

Terimakasih kepada : fCode , myfCode , dev-fCode

Iklan Atas Artikel

Iklan Tengah Artikel 1

Tukar Pulsa Jadi Uang

Iklan Tengah Artikel 2

Iklan Bawah Artikel