Pemrogaman WEB dengan HTML, Tabel HTML, Border Tabel, Tabel Tanpa Border, Tabel Dengan Caption, Header, Colspan dan Rowspan, Empty Cell, Tag di Dalam Suatu Tabel, Cellpadding, Cellspacing, Background Tabel, Background sel Tabel, Mengatur (align) Isi Sel, Tabel Dalam Tabel, Atribut Frame, Tag-tag Table
Tabel HTML
Table digunakan untuk menyajikan data dalam bentuk kolom dan baris. Umumnya setiap kolom menunjukan data yang sejenis, dan setiap baris yang tediri atas kolom-kolom menunjukan kelompok data dalam satu kesatuan.
Anggap informasi kolom anda secara sederhana digambarkan seperti di bawah ini. Sebuah table mempunyai judul, tempat anda menjelaskan kolom/baris yang dilibatkan, baris untuk informasi, dan sel untuk setipa itemnya. Pada table berikut, kolom pertama berisi informasi header, setipa baris menjelaskan sebuah tag table HTML, dan setipa sel berisi sebuah pasangan tag atau penjelas dari fungsi tag.
Elemen-elemen table
Elemen
|
Penjelasan
|
<table>..</table>
<caption>…</caption>
<tr>…</tr>
<th>…</th>
<td>…>/td>
|
Mendefinisikan sebuah table dalam HTML. Jika atribut border dituliskan, maka browser akan menampilkan table dengan border.
Mendefinisikan tulisan untuk judul table. Posisi default dari judul adalah ditengah pada bagian paling atas table. Atribut Align=”bottom” dapat digunakan untuk menempatkan judul pada bagian table. Catatan: Judul dapat diberi tag apa saja.
Menspesifikasikan sebuah baris table dalam table. Anda dapat mendefinisikan atribut untuk seluruh baris: align(left, center, right) dan/atau valign(top, middle, bottom).
Mendefinisikan sel header table. Secara default teks dalam sel ini ditebalkan dan ditampilkan di tengah.
Mendefinisikan sebuah sel data table. Secara default teks dalam sel ini ditampilkan rata kiri, dan ditengah secara vertical. Sel data table dapat berisi atribut untuk mendefinisikan karakteristik dari sel dan isinya.
|
Atribut table
Catatan: atribut yang didefinisikan dalam <th>…</th> atau <td>…</td> akan menggantikan aligment default yang didefinisikan dalam <tr>…</tr>
Elemen
|
Penjelasan
|
Align={left|center|right}
Valign={top|middle|bottom}
Colspan=n
Rowspan=n
nowrap
|
Alignment horizontal untuk sel
Definisi alignment vertical dalam sel
Jumlah n kolom sel diperlebar
Jumlah n baris sel di perbesar
Matikan wrapping dalam sel
|
Contoh ini mendemonstrasikan bagaimana membuat table dalam sebuah dokumen HTML.
<!—coba_tabelà
<html>
<body>
<p>Setipa table dimulai dengan sebuah tag table. Setiap baris dimulai dengan sebuah tag tr. Setiap data dimulai dengan sebuah tag td.</p>
<h4>Satu kolom</h4>
<table border=”1”>
<tr>
<td>100</td>
</tr>
</table>
<h4>Satu baris dan tiga kolom</h4>
<table border=”1”>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>Dua baris dan tiga kolom</h4>
<table border=”1”>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Catatan:
Jumlah baris tabe ditentukan dengan banyaknya <tr>…</tr> yang dituliskan dalam elemen table, dari <table>…</table>.
Jumlah kolom dalam table ditentukan dengan banyaknya <td>…</td> didalam setiap definisi baris, dari <tr>…</tr>.
Setiap baris dalam table akan mempunyai jumlah kolom yang berbeda.
Border Tabel
Contoh ini mendemonstrasikan border table yang berbeda-beda.
<!—coba_tabelborder.htmlà
<html>
<body>
<h4>Dengan border normal :</h4>
<table border=”1”>
<tr>
<td>kesatu</td>
<td>Barisnya</td>
</tr>
<tr>
<td>Kedua</td>
<td>barisnya</td>
</tr>
</table>
<h4>Dengan border tebal :</h4>
<table border=”8”>
<tr>
<td>kesatu</td>
<td>Barisnya</td>
</tr>
<tr>
<td>Kedua</td>
<td>barisnya</td>
</tr>
</table>
<h4>Dengan baris yang sangat tebal :</h4>
<table border=”15”>
<tr>
<td>kesatu</td>
<td>Barisnya</td>
</tr>
<tr>
<td>Kedua</td>
<td>barisnya</td>
</tr>
</table>
</body>
</html>
Tabel Tanpa Border
Contoh ini mendemonstrasikan sebuah table tanpa border.
<!—coba_tabelborder3à
<html>
<body>
<h4>This table has no borders :</h4>
<table border=”0”>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Tabel Dengan Caption
Contoh ini mendemonstrasikan suatu table dengan sebuah caption.
<!—coba_tabelcaption.htmlà
<html>
<body>
<h4>
This table has a caption, and a thick border :
</h4>
<table border=”4”>
<caption>My Caption</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Header tabel
Contoh ini mendemonstrasikan bagaimana menampilkan header table.
<!—coba_tabelheader.htmlà
<html>
<body>
<h4>Table headers :</h4>
<table border=”1”>
<tr>
<th>Name</th>
<th>Telephone</th>
<th> Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Vertikal headers :</h4>
<table border=”1”>
<tr>
<th>First name :</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
Colspan dan Rowspan
Conthoh ini mendemonstrasikan bagaimana untik mendefinisikan cell table yang dilebarkan lebih dari satu baris atau satu kolom.
<!—coba_tabelspan.htmlà
<html>
<body>
<h4>Cell that spans two columns :</h4>
<table border=”1”>
<tr>
<th>Name</th>
<th colspan=”2”>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Cell that span two rows:</h4>
<table border=”1”>
<tr>
<th>First Namr:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan=”2”>Telephone</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
Empty Cell
Contoh ini mendemonstrasikan penggunaan “ ” untuk menangani table yang belum diisi.
<!—coba_tabelsel.html>
<html>
<body>
<table border=”1”>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td></td>
<td>Some text</td>
</tr>
</table>
<p>
As you can see, one of the cells has no border. That is because it is empty. Try to insert a space in the cell. Still it has no border.
</p>
<p>
The trick is to insert a nobreaking space in the cell. Nobreking space is a character entity. If you don’t know what a character entity is, read the chapter about it.
</body>
</html>
Tag di Dalam Suatu Tabel
Contoh ini mendemonstrasikan bagaimana menampilkan elemen didalam elemen lain.
<!—coba_tabeltag.htmlà
<html>
<body>
<table border=”1”>
<tr>
<td>
<p>This is a paragraph </p>
<p>This is a another paragraph </p>
</td>
<td>This cell contains a table:
<table border=”1”>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td></tr><tr>
<td>This cell contains a list
<ul>
<li>apples</li>
<li>bananas</li>
<li>pinapples</li>
</ul>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
Cellpadding
Contih ini mendemonstrasikan bagaimana menggunakan cellpadding untuk membuat spasi lebih dar antara sel dan bordernya.
<!—coba_tabelcellpadding.htmlà
<html>
<body>
<h4>without cellpadding:</h4>
<table border=”1”>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellpadding:</h4>
<table border=”1” cellpadding=”10”>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Cellspacing
Contoh ini mendemonstrasikan bagaimana menggunakan cellspacing untuk menambah jarak antar cell.
<!—coba_tabelcellspacing.htmlà
<html>
<body>
<h4>without cellspacing:</h4>
<table border=”1”>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellspacing:</h4>
<table border=”1” cellspacing=”10”>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Background Tabel
Contoh ini mendemonstrasikan bagaimana member background suatu table.
<!—coba_tabelbackground.htmlà
<html>
<body>
<h4>A background image:</h4>
<table border=”1” background=”../images/bgdesert.jpg”>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
<html>
Background sel Tabel
Contoh ini mendemonstrasikan bagaimana memrberi background untuk satu atau lebih sel.
<!—coba_tabelcellbackground.htmlà
<html>
<body>
<h4>Cell background:</h4>
<table border=”1”>
<tr>
<td bgcolor=”red”>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Mengatur (align) Isi Sel
Contoh ini mendemonstrasikan bagaimana menggunakan atribut align untuk mengatur isi sel, membuat table yang sedap dilihat
<!—coba_tabelalign.htmlà
<html>
<body>
<table width=”400” border=”1”>
<tr>
<th align=” left”>Money spent on …</th>
<th align=”right”>January</th>
<th align=” right”>February</th>
</tr>
<tr>
<td align=” left”>Clothes</td>
<td align=” right”>$241.10</td>
<td align=” right”>$50.20</td>
</tr>
<tr>
<td align=” left”>Make-up</td>
<td align=” right”>$30.00</td>
<td align=” right”>44.45</td>
</tr>
<tr>
<td align=” left”>Food</td>
<td align=” right”>$730.40</td>
<td align=” right”>650.00</td>
</tr>
<tr>
<th align=”left”>Sum</th>
<th align=” right”>$1001.50</th>
<th align=” right”>744.65</th>
</tr>
</table>
</body>
</html>
Tabel Dalam Tabel
Berikut ini adalah contoh table dalam table
<!—coba_tabelontabel.htmlà
<html>
<head>
<title></title>
</head>
<body>
<h2>Tabel on table</h2>
<hr>
<table border=”1”>
<tr>
<td>Parent 1</td>
<td>
<table border=”1”>
<tr>
<td>Child 1</td>
<td>
<table border=”1”>
<tr>
<td>Grandson 1</td>
<td>Grandson 2</td>
</tr>
<td> Grandson 3</td>
<td> Grandson 4</td>
</table>
</td>
</tr>
<tr>
<td>Child 2</td>
<td>Child 3</td>
</tr>
</table>
</td>
</tr>
<td>Parent 2</td>
<td>Parent 3</td>
<tr>
</tr>
</table>
</body>
</html>
Atribut Frame
Contoh ini mendemontrasikan bagaimana menggunakan atribut “frame” untuk mengatur border table.
<!—coba_tabelframe.htmlà
<html>
<body>
<p>
If you see no frames around the tables in these example, your browser is to old, or does not support it.
</p>
<h4>With frame= “border” :</h4>
<table frame=”border”>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame=”box”</h4>
<table frame=”box”>
<tr>
<td>First</td>
<td>Row</td>
</tr>
</table>
<h4>With frame=”box”>
<table frame=”box”>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame=”void”</h4>
<table frame=”void”>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame=”above”</h4>
<table frame=”above”>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame=”below”</h4>
<table frame=”below”>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame=”hsides”</h4>
<table frame=”hsides”>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame=”vsides”</h4>
<table frame=”vsides”>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame=”lhs”</h4>
<table frame=”lhs”>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame=”rhs”</h4>
<table frame=”rhs”>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Tag-tag Table
Tag awal
|
NN
|
IE
|
W3
|
Kegunaan
|
<table>
<th>
<tr>
<td>
<caption>
<colgroup>
<col>
<thead>
<tbody>
<tfoot>
|
3.0
3.0
3.0
3.0
3.0
4.0
|
3.0
3.0
3.0
3.0
3.0
3.0
3.0
4.0
4.0
4.0
|
3.2
3.2
3.2
3.0
3.2
4.0
4.0
4.0
4.0
|
Definisi table
Definisi header table
Definisi baris table
Definisi sel table
Definisi caption table
Definisi kelompok kolom table
Definisi nilai atribut satu atau lebih kolom dalam table
Definisi suatu header table tang tidak akan scroll
Definisi suatu body table yang scroll dalam suatu header dan footer table yang pasti
Definisi suatu footer table yang tidak akan scroll
|
