SECTION 5 - Table Markup

SECTION 5

Pengenalan Table Tag

A. Objective

B. Requirement

1. Text Editor

Sublime Text 3, Notepad ++, Intype, Adobe Dreamweaver, dll

2. Web Server

Apache yang sudah disediakan oleh Xampp

3. Web Browser

Google Chrome, Mozilla Firefox, Internet Explorer, dll

C. Materi

a) Table Tags

Table tag adalah markup HTML yang digunakan untuk menkontruksi table, bentuk markup nya

adalah <table></table>. Markup Table biasanya digunakan secara bersamaan dengan markup

<thead><tr><th><tbody><td>

<table>

<thead>

<tr>

<th>NO</th>

<th>NAMA</th>

<th>JURUSAN</th>

</tr>

</thead>

<tbody>

<tr>

<td>1</td>

<td>Nobita</td>

<td>Teknik Informatika</td>

</tr>

<tr>

<td>2</td>

<td>Doraemon</td>

<td>Manajemen Informatika</td>

</tr>

<tr>

<td>3</td>

<td>Tsuneo</td>

<td>Komputer Akuntansi </td>

</tr>

</tbody>

</table>

<table> : Memulai konstruksi table

<thead> : Heading Table

<tbody> : Body Table

<tr> : Baris

<th> : Kolom pada heading

<td> : Kolom pada body

b) Preview Project

D. Langkah – Langkah Praktikum

1. Hierarki Project Folder

2. Konstruksi Dokumen HTML 5 dengan nama index.html seperti di bawah ini

<!doctype html>

<html>

<head>

<title>Belajar Table</title>

<link rel="stylesheet" type="text/css" href="css/style.css">

</head>

<body>

<div id="container">

<div class="mytable">

<h1>Lists Product</h1>

<table>

<thead>

<tr>

<th>NO</th>

<th>KODE PRODUCT</th>

<th>NAMA PRODUCT</th>

<th>HARGA</th>

<th>STOK</th>

</tr>

</thead>

<tbody>

<tr class="ganjil">

<td class="center">1</td>

<td>PR_001</td>

<td>Kemeja Pria</td>

<td class="number"><?php echo

number_format(250000,0,',','.'); ?></td>

<td class="number">21</td>

</tr>

<tr>


<td>PR_002</td>

<td>Kemeja Anak Pria</td>


number_format(150000,0,',','.'); ?></td>


</tr>

<tr class="ganjil">


<td>PR_003</td>

<td>Sepatu Pria Dewasa</td>


number_format(450000,0,',','.'); ?></td>


</tr>

<tr>


<td>PR_004</td>

<td>Sepatu Anak Pria</td>


number_format(80000,0,',','.'); ?></td>


</tr>

<tr class="ganjil">


<td>PR_005</td>

<td>Baju Kerja Wanita</td>


number_format(550000,0,',','.'); ?></td>


</tr>

<tr>

<td colspan="3"

class="center">Total</td>


number_format(1480000,0,',','.'); ?></td>


number_format(64,0,',','.'); ?></td>

</tr>

</tbody>

</table>

</div>

</div>

</body>

</html>

3. Tambahkan File CSS dengan nama style.css

body {

background: #CBC3C3;

font-family: sans-serif;

margin: 0px;

}

.mytable, .mytable table {

width: 600px;

}

h1 {

margin: 0px;

font-size: 21px;

margin-bottom: 15px;

border-bottom: 1px solid #BCB7B7;

padding-bottom: 10px;

}

#container {

width: 700px;

background: white;

margin: auto;

padding: 15px;

}

table {

border-collapse: collapse;

}

table td {

vertical-align: middle;

height: 20px;

}

table thead {

background: url('../images/tback.jpg') repeat-x;

}

table tbody {

font-size: 14px;

}

table th:nth-child(1) {

width: 5%;

}


width: 30%;

}


width: 40%;

}


width: 15%;

}


width: 10%;

}

table th, table td {

border-right: 1px solid black;

border-top: 1px solid black;

padding: 3px 8px;

}

table th,td:first-child {

border-left: 1px solid black;

}

table tr:last-child {

border-bottom: 1px solid black;

}

table tr:last-child {

font-weight: bold;

}

table tr:hover td {

background: #F50B0B;

color: white;

}

.number {

text-align: right;

}

.center {

text-align: center;

}

.ganjil {

background: #D8FBF6;

background: #FADEE6;

}

4. Extend

SECTION 5 - Table Markup

Documents

Transcript of SECTION 5 - Table Markup