KeyzeX - Tabel digunakan untuk menyajikan sebuah data dalam bentuk kolom dan baris. Umumnya setiap kolom menunjukkan data yang sejenis, dan setiap baris yang terdisi atas kolom-kolom menunjukkan kelompok data dalam satu kesatuan. Kolom informasi secara sederhana digambarkan seperti berikut.
Tabel mempunyai judul, tempat anda menjelaskan kolom atau baris yang dilibatkan, baris untuk informasi, dan sel untuk setiap item-itemnya. Pada tabel berikut, kolom pertama berisi Informasi header, setiap harus menjelaskan sebuah tag tabel HTML ini, dan setiap sel berisi sebuah pasangan tag atau penjelasan mengenai fungi tag tersebut.
<Table>...</table> | Mendefinisikan sebuah Table dalam HTML jika atribut border dituliskan maka browser akan menampilkan tabel dengan border |
<th>...</th> | Mendefinisikan sel header tabel. Secara default teks dalam sel ini ditebalkan dan ditampilkan di tengah. |
<caption>...</caption> | Mendefinisikan tulisan untuk judul tabel. Posisi default dari judul adalah ditengah pada bagian paling atas table. Atribut align="left" dapat digunakan untuk menempatkan judul pada bagian kiri tabel Catatan: Judul dapat diberi tag apa saja. |
<tr>...</tr> | Menspesifikan sebuah baris table dalam tabel. Agan dapat mendefinisikan seluruh atribut untuk seluruh baris. Align(left, center, right) dan valign(top,middle,bottom). |
<td>...</td> | Mendefinisikan sebuah sel data tabel. Secara default teks dalam sel ini ditampilkan rata kiri, dan di tengah scara vertikal. Sel data tabel dapat berisi atribut untuk mendefinisikan karakteristik dari sel dan isinya. |
Atribut Tabel
Atribut yang didefinisikan dalam <th>...</th> atau <td>...</td> akan menggantikan alignment default yang didefinisikan dalam <tr>...</tr>
align={left/center/right} | Alignment horizontal untuk sel |
valign={top/middle/bottom} | Mendefinisikan alignment vertikal dalam sel |
colspan=n | Sejumlah n kolom sebuah sel diperlebar. |
Rowspan=n | Sejumlah n baris sebuah sel diperbesar. |
Nowrap | Mematikan wrapping dalam sebuah sel. |
Berikut ini adalah contoh bagaimana membuat tabel dalam dokumen HTML.
Catatan :
- Jumlah baris tabel ditentukan dengan banyaknya <tr>....</tr> yang dituliskan dalam elemen tabel dari <table>..</table>.
- Jumlah kolom dalam tabel ditentukan dengan banyaknya tag <td>...</td> didalam setiap definisi baris dari <tr>..</tr>.
Cascading Style Sheets (CSS) adalah bahasa style sheet yang paling sering digunakan untuk mengatur gaya visual halaman web yang ditulis dalam HTML dan XHTML. Anda mungkin baru mengenal desain web atau CSS dan memiliki pertanyaan tentang cara memusatkan meja di halaman web. Anda juga mungkin seorang perancang berpengalaman yang bingung tentang bagaimana melakukan teknik ini sekarang karena atribut CENTER dan align = "center" tidak digunakan lagi dalam tag TABEL. Dengan CSS, memusatkan tabel pada halaman web sama sekali tidak sulit.
Gunakan CSS untuk Membuat Tabel
Anda dapat menambahkan satu baris ke lembar gaya CSS Anda untuk memusatkan semua tabel secara horizontal:
atau Anda dapat menambahkan baris yang sama ke meja Anda secara langsung:
Saat Anda menempatkan tabel di halaman web, Anda menempatkannya di dalam elemen tingkat blok seperti BODY, P, BLOCKQUOTE, atau DIV. Anda dapat memusatkan meja di dalam elemen itu dengan menggunakan margin: otomatis; gaya. Ini memberitahu browser untuk membuat margin di semua sisi tabel sama, yang memposisikan tabel di tengah halaman web.
Beberapa Browser Web Lama Tidak Mendukung Metode Ini
Jika situs Anda harus mendukung browser web yang lebih lama, seperti Internet Explorer 6, maka Anda harus terus menggunakannyaalign = "center" atau tag CENTER untuk memusatkan tabel Anda. Itu tentang satu-satunya komplikasi yang akan Anda hadapi ketika memusatkan tabel Anda pada halaman web. Menggunakan teknik ini mudah dan dapat dilakukan dalam hitungan menit.