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 (“;”)

Tentang belalangtue

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

Tinggalkan komentar