Cara Membuat Table di HTML
Tabel adalah susunan baris dan kolom, setiap perpotongan baris dan kolom ini di sebut dengan sel. mari kita lihat contoh gambarnya.
Element Table
Untuk membangun tabel dengan HTML, diperlukan element-element seperti dibawah :
- <table> </table>, digunakan untuk mendefinisikan tabel yang akan dibentuk.
- <tr> </tr>, digunakan untuk membuat komponen baris tabel.
- <td> </td>, digunakan untuk komponen kolom-kolom pada baris tabel.
Program :
<html>
<head>
<title> UnlimitShared </title>
</head>
<body>
<table>
<tr>
<td>
</td>
</tr>
</table>
</body>
</html>
<head>
<title> UnlimitShared </title>
</head>
<body>
<table>
<tr>
<td>
</td>
</tr>
</table>
</body>
</html>
Program yang saya tulis diatas berisi 1 sel.
Jika anda mengetikan program di atas maka hasilnya masih kosong dan belum terlihat bentuk tabelnya. untuk memunculkan tabel atau sel, kita harus mengisi angka atau huruf di tag <td> dan </td>.
saya contohkan sedikit tag dan saya tidak mengetik keseluruhan tag nya. kalian isikan tag di bawah yang saya tulis sama persis.
Contoh :
<td> Isi sel letakkan di sini </td>
Output yang dihasilkan :
Nah anda pasti berfikir, dimana letak tabel dan sel nya kan?, sebagaimana tabel yang umum. ini mudah kok, dapat kita atur dengan atribut-atribut tabel, baris, maupun sel. yuk kita lihat atribut-atribut apa saja yang digunakan.
Ada beberapa atribut yang sering digunakan untuk pengaturan tabel maupun komponen lainnya :
<html>
<head>
<title> UnlimitShared </title>
</head>
<body>
<p align=center>
<table border=1>
<tr>
<td> Sel 1 </td>
<td> Sel 2 </td>
<td> Sel 3 </td>
</tr>
<tr>
<td> Sel 4 </td>
<td> Sel 5 </td>
<td> Sel 6 </td>
</tr>
</table>
</body>
</html>
Output yang dihasilkan :
- Align, Mengatur bagaimana tabel ditempatkan.
- Background, Mengatur gambar latar tabel.
- Bgcolor, Mengatur warna latar tabel atau komponen tabel.
- Border, Mengatur ketebalan border (garis sel)
- Bordercolor, Mengatur warna border(garis sel) yang digunakan.
- Cellpadding, Mengatur jarak teks terhadap cell
- Cellspacing, Mengatur jarak spasi antar cell
- Height, Mengatur tinggi tabel.
- Width, Mengatur lebar tabel.
- Nowrap, Mengatur word wrap teks dalam cell.
<html>
<head>
<title> UnlimitShared </title>
</head>
<body>
<p align=center>
<table border=1>
<tr>
<td> Sel 1 </td>
<td> Sel 2 </td>
<td> Sel 3 </td>
</tr>
<tr>
<td> Sel 4 </td>
<td> Sel 5 </td>
<td> Sel 6 </td>
</tr>
</table>
</body>
</html>
Output yang dihasilkan :
Nah gimana menegrti tidak sampai sini penjelasan saya?. semoga kalian paham yah apa yang saya jelaskan di atas. pahami kalo bisa langsung kalian peraktekan di komputer atau di laptop kalian masing-masing.
Terima kasih yah sudah berkunjung di blog saya, semoga bermanfaat dan bisa kalian pelajari lagi kepada teman-teman kalian.
No comments:
Write komentar