HTML 表格
anda dapat membuat tabel menggunakan HTML.
contoh
- Tabel
- contoh ini menunjukkan bagaimana cara membuat tabel di dokumen HTML.
- garis tabel
- contoh ini menunjukkan berbagai jenis garis tabel.
Tabel
tabel didefinisikan oleh <table> tag. setiap tabel memiliki beberapa baris (didefinisikan oleh <tr> tag), setiap baris dipisahkan menjadi beberapa sel (didefinisikan oleh <td> tag). huruf td mengacu pada data tabel (table data), yaitu konten sel data. sel data dapat mengandung teks, gambar, daftar, paragraf, formulir, garis horizontal, tabel, dan lainnya.
<table border="1"> <tr> <td>baris 1, sel 1</td> <td>baris 1, sel 2</td> </tr> <tr> <td>baris 2, sel 1</td> <td>baris 2, sel 2</td> </tr> </table>
dipaparkan di pelayar seperti berikut:
| baris 1, sel 1 | baris 1, sel 2 |
| baris 2, sel 1 | baris 2, sel 2 |
tabel dan atribut garis
jika tidak mendefinisikan atribut garis, tabel tidak akan menampilkan garis. kadang-kadang ini sangat berguna, tetapi sebagian besar waktu, kami ingin menampilkan garis.
gunakan atribut garis untuk menampilkan tabel dengan garis:
<table border="1"> <tr> <td>Baris 1, sel 1</td> <td>Baris 1, sel 2</td> </tr> </table>
judul tabel
judul tabel digunakan <th> tag untuk definisi.
banyak pelayar akan menampilkan judul tabel sebagai teks tebal yang tengah:
<table border="1"> <tr> <th>Judul</th> <th>Judul Lainnya</th> </tr> <tr> <td>baris 1, sel 1</td> <td>baris 1, sel 2</td> </tr> <tr> <td>baris 2, sel 1</td> <td>baris 2, sel 2</td> </tr> </table>
dipaparkan di pelayar seperti berikut:
| Judul | Judul Lainnya |
|---|---|
| baris 1, sel 1 | baris 1, sel 2 |
| baris 2, sel 1 | baris 2, sel 2 |
单元格中的空白
dalam beberapa pelayar, sel tabel yang kosong (tidak ada konten) tampak buruk. jika sel tertentu kosong (tidak ada konten), pelayar mungkin tidak dapat menampilkan garis kotak sel tersebut.
<table border="1"> <tr> <td>baris 1, sel 1</td> <td>baris 1, sel 2</td> </tr> <tr> <td></td> <td>baris 2, sel 2</td> </tr> </table>
pelayar mungkin menunjukkan seperti berikut:
perhatian:catatan: garis kotak kosong ini belum terlihat. untuk menghindari hal ini, tambahkan sebuah karakter spasi penempat di sel kosong, garis kotak akan terlihat.
<table border="1"> <tr> <td>baris 1, sel 1</td> <td>baris 1, sel 2</td> </tr> <tr> <td> </td> <td>baris 2, sel 2</td> </tr> </table>
dipaparkan di pelayar seperti berikut:
| baris 1, sel 1 | baris 1, sel 2 |
| baris 2, sel 2 |
contoh lebih banyak
- tanah pinggir tanpa garis
- Contoh ini menunjukkan tabel tanpa sempadannya.
- Tajuk di dalam tabel (Heading)
- Contoh ini menunjukkan bagaimana memaparkan tajuk tabel.
- Sel kosong
- Contoh ini menunjukkan bagaimana mengendalikan sel yang kosong tanpa kandungan menggunakan " ".
- Tabel dengan tajuk
- Contoh ini menunjukkan tabel dengan tajuk (caption).
- Sel tabel yang melintasi baris atau lajur
- Contoh ini menunjukkan bagaimana mendefinikan sel tabel yang melintasi baris atau lajur.
- Tanda di dalam tabel
- Contoh ini menunjukkan bagaimana memaparkan elemen di dalam elemen lain.
- Batas sel (Cell padding)
- Contoh ini menunjukkan bagaimana menggunakan Cell padding untuk mencipta ruang kosong di antara kandungan sel dan sempadannya.
- Jarak sel (Cell spacing)
- Contoh ini menunjukkan bagaimana menggunakan Cell spacing untuk menambahkan jarak antara sel.
- Menambahkan warna latar belakang atau imej latar belakang kepada tabel
- Contoh ini menunjukkan bagaimana menambahkan latar belakang kepada tabel.
- Menambahkan warna latar belakang atau imej latar belakang kepada sel tabel
- Contoh ini menunjukkan bagaimana menambahkan latar belakang kepada satu atau lebih sel tabel.
- Menarik kandungan di dalam sel tabel
- Contoh ini menunjukkan bagaimana menggunaan atribut "align" untuk susun kandungan sel dalam, untuk mencipta tabel yang cantik.
- Atribut framework (frame)
- Contoh ini menunjukkan bagaimana menggunaan atribut "frame" untuk mengawal sempadan yang di sekeliling tabel.
Tanda tabel
| Tabel | Deskripsi |
|---|---|
| <table> | Definisi tabel. |
| <caption> | Definisi tajuk tabel. |
| <th> | Definisi tajuk tabel. |
| <tr> | Definisi baris tabel. |
| <td> | Definisi sel tabel. |
| <thead> | Definisi tajuk tabel. |
| <tbody> | Definisi isikan tabel. |
| <tfoot> | Definisi kaki tabel. |
| <col> | Definisi atribut yang digunakan untuk lajur tabel. |
| <colgroup> | Definisi kumpulan lajur tabel. |
