Belajar Html Membuat Tabel

Tabel mengharuskan Anda mencoba setiap bentuk yang ada dalam contoh, kemudian silakan mencoba-coba sendiri variasi contoh dengan menambahkan atau mengurangi sel dan isinya. Variasikan juga parameternya, agar Anda tahu setiap bagian penentu tampilan tabel.

Setiap tabel dimulai dengan tag table. Setiap baris tabel dimulai dengan tag tr. Setiap data dalam tabel dimulai dengan tag td.
<html>
<body>
<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>

Border pada table
<html>
<body>
<h4>Dengan border normal:</h4>
<table border=”1″>
<tr>
<td>Pertama</td>
<td>Baris</td>
</tr>
<tr>
<td>Kedua</td>
<td>Baris</td>
</tr>
</table>
<h4>Dengan border tebal:</h4>
<table border=”8″>
<tr>
<td>Pertama</td>
<td>Baris</td>
</tr>
<tr>
<td>Kedua</td>
<td>Baris</td>
</tr>
</table>
<h4>Dengan border yang sangat tebal:</h4>
<table border=”15″>
<tr>
<td>Pertama</td>
<td>Baris</td>
</tr>
<tr>
<td>Kedua</td>
<td>Baris</td>
</tr>
</table>
</body>
</html>

Tabel tanpa border
<html>
<body>
<h4>Tabel ini tidak memiliki border:</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>Dan tabel ini juga tidak memiliki border:</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>

Heading dalam tabel
<html>
<body>
<h4>Header tabel:</h4>
<table border=”1″>
<tr>
<th>Nama</th>
<th>Telepon</th>
<th>Telepon</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Header vertikal:</h4>
<table border=”1″>
<tr>
<th>Nama depan:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telepon:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telepon:</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>

Sel kosong
<html>
<body>
<table border=”1″>
<tr>
<td>Teks</td>
<td>Teks</td>
</tr>
<tr>
<td></td>
<td>Teks</td>
</tr>
</table>

Seperti yang Anda lihat, salah satu sel tidak memiliki border. Itu terjadi karena sel tersebut kosong. Cobalah untuk menyisipkan sebuah spasi ke dalam sel tersebut. Ternyata tetap saja tidak memiliki border.

Cara yang benar adalah dengan menyisipkan spasi non-breaking di dalam sel. Spasi non-breaking adalah sebuah entitas karakter. Bila Anda tidak mengetahui apa yang disebut karakter entitas, baca kembali modul tentang Belajar Html Membuat Pemformatan Teks dan Entitas. Entitas spasi non-breaking dimulai dengan tanda ampersand (“&”), kemudian karakter-karakter “nbsp”, dan diakhiri dengan semicolon (“;”)

About these ads

Tentang belalangtue

manusia biasa yang ingin terus belajar.............
Tulisan ini dipublikasikan di Computer, HTML, pemrograman, tutorial dan tag , , , . Tandai permalink.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Logout / Ubah )

Twitter picture

You are commenting using your Twitter account. Logout / Ubah )

Facebook photo

You are commenting using your Facebook account. Logout / Ubah )

Google+ photo

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s