Cara Membuat Table Sederhana pada HTML

Cara Membuat Table Sederhana pada HTML

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
Share this with short URL:
Get Short URL
loading short url

5 comments

Bahasa paling rumit ini gan wkwkw salah dikit ajah gak bakaln jadi. Tapi thanks ulasanya cukup membantu deh

Balas

Bahasa paling rumit ini gan wkwkw salah dikit ajah gak bakaln jadi. Tapi thanks ulasanya cukup membantu deh

Balas

Iya gan, memang kalau salah dikit gak jadi wkwakw

Balas

Tata Cara Berkomentar Dengan Benar
~ Menggunakan bahasa yang sopan dan benar
~ Dilarang menggunakan bahasa kotor
~ Dilarang menyertakan link aktif
~ Dilarang memancing keributan