Membuat Table
Hi Web Developer! kali ini guru design akan berbagi tutorial cara membuat table di website. Pada tutorial sebelumnya kita telah mempelajari Tutorial Dasar Website-List Item dan pada kesempatan kali ini kita kan melanjutkan materi selanjutnya yaitu membuat tabel. Baiklah langsung ketutorialnya Jadi pembuatan tabel di website sangatlah mudah tinggal kita gunakan tag dibawah ini<table border="1">
<tr>
<th>Judul 1</th>
<th>Judul 2</th>
<th>Judul 3</th>
</tr>
<tr>
<td>Isi 1 baris 1</td>
<td>Isi 2 baris 1</td>
<td>Isi 3 baris 1</td>
</tr>
<tr>
<td>Isi 1 baris 2</td>
<td>Isi 2 baris 2</td>
<td>Isi 3 baris 2</td>
</tr>
</table>Begini Penerapannya
HTML
<html>
<head>
<title> Judul mu tulis disini </title>
</head>
<body>
<table>
<tr>
<th>Judul 1</th>
<th>Judul 2</th>
<th>Judul 3</th>
</tr>
<tr>
<td>Isi 1 baris 1</td>
<td>Isi 2 baris 1</td>
<td>Isi 3 baris 1</td>
</tr>
<tr>
<td>Isi 1 baris 2</td>
<td>Isi 2 baris 2</td>
<td>Isi 3 baris 2</td>
</tr>
</table>
</body>
</html>CSS
<style type="text/css">
th {font-weight:bold;
padding:0.6em;
text-transform:uppercase;
background:#747d8c;
color:#fff;
border:0;
padding:10px 15px;
text-align:left;
vertical-align:top;
font-size:15px;
vertical-align:top;
text-align:left;
font-size:13px;
padding:3px 5px;
border:0;
}
td {padding:0.6em;
border:0;
padding:0;
background:#fff;
line-height:17px;
overflow:hidden;
text-align:center;
text-overflow:ellipsis;
white-space:nowrap;
font-weight:700;
color:#57606f;
background-color:#f6f8f9;
}
table tr:nth-of-type(odd) td{background-color:#ecf0f1;
}
table {width:100%;
max-width:100%;
border-radius:3px;
overflow:hidden;
}
table td,table caption{border:0;
padding:10px 15px;
text-align:left;
vertical-align:top;
color:#57606f;
font-size:.9rem;
}
</style>Begini Demonya
Judul 1 Judul 2 Judul 3 Isi 1 baris 1 Isi 2 baris 1 Isi 3 baris 1 Isi 1 baris 2 Isi 2 baris 2 Isi 3 baris 2
NEXT Tutorial Dasar Website-Menampilkan Gambar dan video youtube (Ready)
Sekian tutorialnya trimakasih semoga bermanfaat.