Tutorial HTML Bab.10

Bab 10: Tabel
Tabel ...
Contoh Tabel ...
Apa tabel digunakan untuk?
Tabel ini digunakan untuk membuat data yang lebih mudah untuk menafsirkan atau hanya memberikan dampak yang lebih besar dokumen Anda.
<table border=4>
<tr>
<th> Apa tabel digunakan untuk? </ th>
</ tr>
<tr>
Tabel <td> digunakan untuk membuat data yang lebih mudah untuk menafsirkan atau hanya
memberikan dampak yang lebih besar dokumen Anda. </ td>
</ tr>
</ table>

Tabel adalah salah satu hal yang paling menantang untuk kode dengan HTML. Hal ini tidak terlalu sulit, itu hanya membutuhkan waktu beberapa saat untuk mendapatkan memahamkan. Tabel mulai dengan tag <table>, dan biasanya berisi perbatasan = n atribut dalam tag pembuka. Jika border = 0, dari perbatasan tabel tidak kelihatan. Biasanya bila Anda tidak menggunakan atribut perbatasan meja perbatasan akan menjadi tidak terlihat. Hal ini berguna bila Anda ingin menyesuaikan teks dalam baris dan kolom, tetapi tidak ingin meja perbatasan di sekitarnya. border = 1 adalah perbatasan tipis. border = 2 adalah sedikit lebih tebal, border = 3 sedikit lebih tebal .. dan seterusnya. Meja HARUS berakhir dengan sebuah </ table> tag, atau tabel tidak akan muncul sama sekali!
Contoh tabel dengan perbatasan ...
Tabel ini memiliki perbatasan dari 0.
<table border=0>
<tr>
<td> Tabel ini memiliki perbatasan dari 0. </ td>
</ tr>
</ table>
Tabel ini memiliki perbatasan 3.
<table border=3>
<tr>
<td> Tabel ini memiliki perbatasan 3. </ td>
</ tr>
</ table>
Setiap baris dalam tabel didefinisikan dengan tag <tr> pembukaan dan yang opsional </ tr> tag penutup. Dalam setiap baris tabel adalah sel tabel, yang ditentukan oleh <td> pembuka dan </ td> penutup tag. Kebanyakan meja baris berisi lebih dari satu sel. Sering kali, Anda akan memerlukan sebuah heading untuk kolom sel dari baris pertama. Untuk melakukan ini, Anda akan menggunakan <th> pembuka dan </ th> tag penutup. Meja pos tag membuat teks dalam sel itu BOLD dan berpusat. Anda hanya perlu menggunakan sel judul bila diperlukan.
Contoh tabel dengan beberapa baris dan kolom ...
Pos Sebuah Pos Pos B C
Sel A Cell B Cell C
Cell sel D E Cell F
<table border=2>
<tr>
<th> Pos A </ th> <th> Pos B </ th> <th> Pos C </ th>
</ tr>
<tr>
<td> Cell A </ td> <td> Cell B </ td> <td> Cell C </ td>
</ tr>
<tr>
<td> Cell D </ td> <td> Cell E </ td> <td> Cell F </ td>
</ tr>
</ tr>
</ table>

Tetapi bagaimana jika Anda ingin tabel anda terlihat seperti berikut ini?
Pos Sebuah Pos Pos B C
Cell A & D Cell B Cell C
Sel E Cell F
<table border=2>
<tr>
<th> Pos A </ th> <th> Pos B </ th> <th> Pos C </ th>
</ tr>
<tr>
<td rowspan=2> Cell A & D </ td> <td> Cell B </ td> <td> Cell C </ td>
</ tr>
<tr>
<td> Cell E </ td> <td> Cell F </ td>
</ tr>
</ tr>
</ table>
Perhatikan bagaimana rowspan = 2 atribut telah ditambahkan. Hal ini memungkinkan sel untuk rentang dua baris. Jika Anda ingin sebuah sel untuk span lebih dari kolom, gunakan atribut colspan = n. Juga, Anda mungkin ingin menggunakan atribut ALIGN dan valign untuk menyelaraskan isi sel. Jika Anda ingin mengubah horizontal alignment isi sel tertentu, menambahkan ALIGN = LEFT, ALIGN = CENTER, atau ALIGN = RIGHT ke <td> tag pembuka. Jika Anda ingin mengubah alignment vertikal isi sel, gunakan valign = top, valign = MIDDLE, atau valign = BOTTOM atribut. Anda mungkin juga ingin untuk mencoba WIDTH = n% atribut, untuk mengubah lebar tabel atau sel.
Contoh atribut ALIGN dalam tabel ...
Waktu Alignment Center Right Alignment Alignment
<table border=1 width=100%>
<tr>
<td align="justify"> Waktu Alignment </ td>
<td align="center"> Center Alignment </ td>
<td align=right> Right Alignment </ td>
</ tr>
</ table>
Halaman HTML Anda sendiri ...
Klik kanan pada gambar di tengah berbatasan hitam kotak di bawah ini, lalu pilih "Save Image As" / "Save Picture As", atau serupa. Simpan sebagai "phxsuns.jpg" di direktori yang sama di mana halaman rumah Anda "Home.htm" disimpan.
Image phxsuns.jpg
Tabel dapat digunakan tanpa batas, untuk menyesuaikan gambar dan teks di samping satu sama lain. Mengubah judul halaman rumah Anda ke sebuah meja, seperti ini:
<html>
<head> <title> My Home Page </ title> </ head>
<! - Tubuh dimulai di sini - dan sebuah gambar latar belakang di-load ->
<body background="bgnd.gif">

<! - Ini adalah tabel: 3 kolom, 1 baris, tidak ada perbatasan ->
<table border="0" width=100%>
<! - Awal baris ->
<tr>
<! - Awal sel pertama ->
<td align="center">
<! - Sel pertama berisi foto ->
<img src="fraidbut.gif">
<! - Akhir dari sel pertama ->
</ td>
<! - Awal sel kedua ->
<td align="center">
<! - Sel kedua berisi judul asli ->
<font color="blue"> <h1> Yourname's Home Page </ h1> </ font>
<! - Akhir dari sel kedua ->
</ td>
<! - Awal sel ketiga ->
<td align="center">
<! - Sel ketiga berisi foto ->
<img src="fraidbut.gif">
<! - Akhir dari sel ketiga ->
</ td>
<! - Akhir dari baris ->
</ tr>
<! - Akhir dari meja ->
</ table>

<! - Ini adalah garis horizontal ->
<hr>
.
.
.
</ body>
</ html>

Simpan file teks sebagai "Home.htm".