Anda di halaman 1dari 11

HTML Tables

HTML Tables

 Table mewakili tabular data


 Sebuah table yang terdiri satu atau beberapa baris
 Setiap baris mempunyai satu atau beberapa olom

 Table terdiri dari beberapa tag inti


 <table></table>: begin / end the table
 <tr></tr>: create a table row
 <td></td>: create tabular data (cell)

2
Simple HTML Tables – Example

<table cellspacing="0" cellpadding="5">


<tr>
<td>No</td>
<td>1</td>
</tr>
<tr>
<td>Nama</td>
<td>Putri</td>
</tr>
<tr>
<td>Umur</td>
<td>17</td>
</tr>
</table>

3
Data Cells and Header Cells

 2 Jenis cell di HTML Table


 Data cells, table data – <td>
 Header cells, column names – <th>
 Memisahkan data dan header secara semantik

<tr>
<th>Nama</th>
<th>Umur</th>
</tr>
<tr>
<td>Putri</td>
<td>10</td>
</tr>
<tr>
<td>Putri</td>
<td>8</td>
</tr>
Complete HTML Tables

 Baris table dibagi menjadi beberapa bagian semantik


 <thead> menunjukkan header table
 Berisi elemen <th>
 <tbody> menunjukkan koleksi baris tabel yang menyimpan data tabel
 <tfoot> menunjukkan footer table
 Mungkin muncul sebelum element <tbody>, tetapi pada outputnya, akan
tampil diakhir atau dipaling bawah sebuah table.
 <colgroup> and <col> mendefinisikan kolom
 Digunakan untuk menetapkan lebar kolom

5
Complete HTML Table: Example
<table> column width
<colgroup> definitions
<col style="width:100px" /><col />
</colgroup> table
<thead> header
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead> table
<tfoot> footer
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
<tbody>
table body
<tr><td>Cell 1.1</td><td>Cell 1.2</td></tr>
<tr><td>Cell 2.1</td><td>Cell 2.2</td></tr>
</tbody>
</table>
6
Nested Tables

<table>
<tr>
<td>Contact:</td>
<td>
<table>
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
</table>
</td>
</tr>
</table>
7
Cell Spacing and Padding
 Table punya 2 atribut terkait untuk space

 cellspacing  cellpadding

cell cell cell cell

cell cell cell cell

 Defines the  Defines the empty


empty space space around the
8 between cells cell content
Cell Spacing and Padding – Example

<html>
<head><title>Table Cells</title></head>
<body>
<table cellspacing="15" cellpadding="0">
<tr><td>First</td>
<td>Second</td></tr>
</table>
<br/>
<table cellspacing="0" cellpadding="10">
<tr><td>First</td><td>Second</td></tr>
</table>
</body>
</html>

9
Column and Row Span

 Cells punya 2 atribut terkait untuk merging

 colspan  rowspan
colspan="1" colspan="1" rowspan="2" rowspan="1"

cell[1,1 cell[1,2 cell[1,


] ] 2]
cell[1,1]
cell[2,
cell[2,1]
1]
colspan="2" rowspan="1"

 Defines how many  Defines how many


columns the cell rows the cell
10
occupies occupies
Column and Row Span – Example

<table cellspacing="0">
<tr class="1">
<td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td>
</tr>
<tr class="2">
<td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td>
</tr>
<tr class="3">
<td>Cell[1,3]</td>
<td>Cell[2,3]</td>
</tr>
</table>
11