PENGERTIAN
SleepingCodings - Tabel merupakan alat untuk menampilkan informasi dalam bentuk matriks, dan bisa juga di sebut dengan daftar. Nah, jadi seperti waktu temen" buat list absensi pasti menggunakan tabel kan nah maka dari itu di sebut sebagi alat / media untuk menampilkan informasi dalam bentuk matriks.
LATAR BELAKANG
Author membuat tutorial ini gunanya agar temen" dapat memahami dan mempraktekannya dengan mudah.
MAKSUD DAN TUJUAN
1. Dapat membuat tabel secantik mungkin
2. Dapat memanipulasi tampilan tabel HTML
PEMBAHASAN MATERI
Nah, disini Author akan langsung membuat / memberi temen" source code membuat tabel, dan akan Author jelaskan secara singkat.
NOTE : 1. <tabel> => Menyatakan bahwa dalam syntax ini akan membuat sebuah tabel.
2. <tr> => Singkatan dari Tabel Row, nah di sini Tabel Row di gunakan untuk membuat baris, atau bisa di artikan seperti ini Table Row = Baris Tabel.
3. <th> => Singkatan dari Tabel Heading, nah disini gunanya untuk menamai judul tabel, nah bedanya dengan td ialah tabel heading mempunyai default tulisan tebal tanpa CSS dan cocok di gunakan untuk judul.
4. <td> => Singkatan dari Tabel Data, nah dari sini mungkin temen" udah tau kan kalau tr tadi Tabel Row yang gunanya membuat baris maka Tabel Data lah yang gunanya untuk membuat coulomn tersebut.
index.html
<!DOCTYPE html>
<html>
<head>
<title>SleepingCodings</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Cara Design Tabel Dengan CSS</h1>
<h4>Design Tabel</h4>
<table class="tabel1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Kelas</th>
<th>Jurusan</th>
</tr>
<tr>
<td>1</td>
<td>Mudrofi</td>
<td>XII</td>
<td>TKJ</td>
</tr>
<tr>
<td>2</td>
<td>Umam</td>
<td>XII</td>
<td>TKJ</td>
</tr>
<tr>
<td>3</td>
<td>Sita</td>
<td>XII</td>
<td>TKJ</td>
</tr>
<tr>
<td>4</td>
<td>Vira</td>
<td>XI</td>
<td>RPL</td>
</tr>
<tr>
<td>5</td>
<td>Erika</td>
<td>XI</td>
<td>MM</td>
</tr>
</table>
</body>
</html>
style.css
body {
background: lightblue;
text-align: center;
}
h1, h4 {
font-family: pacifico;
}
.tabel1 {
margin: 0px 5%;
font-family: lato;
font-weight: bold;
color: #444;
border-collapse: collapse;
width: 90%;
border: 1px solid #f2f5f7;
}
.tabel1 tr th {
background: #35A9DB;
color: #fff;
font-weight: normal;
}
.tabel1, th, td {
padding: 8px 20px;
text-align: center;
}
.tabel1 tr:hover {
background-color: #f5f5f5;
}
.tabel1 tr:nth-child(even) {
background-color: #f2f2f2;
}
Jika di jalankan di web browser :
 |
| Gambar 1.1 Tabel Design SleepingCodings |
KESIMPULANNah, mungkin temen" bisa lebih paham sedikit untuk tutorial membuat / mendesign tabel di sini, karena dalam tabel di sini cukup mudah kok dalam mengeditnya. Tinggal temen" asah aja skill yang temen" punya. Itu dari saya ya... .
Semoga Bermanfaat ~
Wassalamu'alaikum Wr. Wb
hai kak, makasih untuk postingannya. sangat membantu sekali. semangat terus untuk berkarya, agar dapat membantu banyak orang. sukses terus kak. perkenalkan nama saya Sri Agustina nim 1922500194 dan link website kampus saya https://www.atmaluhur.ac.id/
ReplyDelete