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>
<!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>
<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.
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
