Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Tabel dibuat dengan menggunakan tag <table>. Sebuah tabel dibagi menjadi baris-baris, dan tiap baris dibagi ke dalam cell-cell. Baris dibuat dengan tag <tr>, dan cell-cell yang akan membentuk kolom dibuat dengan tag <td>.
Dalam konteks HTML, table mempunyai peranan yang sangat penting. Selain digunakan untuk menampilkan tabel berisi data, table juga digunakan untuk menyusun teks dalam kolom, ataupun membuat laporan terstruktur lainnya.
Seringkali table digunakan dalam halaman web untuk memperindah tampilan ataupun untuk mengatur agar informasi dapat disajikan dengan tampilan yang enak dibaca. Melihat begitu banyaknya manfaat yang didapat dengan menggunakan tabel ini maka tabel mulai diterapkan pemakaiannyaoleh HTML dan kemudian didukung oleh Nescape (browser pertama yang mempelopori penggunaan table).
Dari masing-masing tag tersebut, tiap tag mempunyai tag penutup yaitu:
Tag <table> mempunyai tag penutup </table>
Tag <tr> mempunyai tag penutup </tr>
Tag <td> mempunyai tag penutup </td>
Ketiga tag di atas adalah tag-tag yang harus ada dalam tag Table. Bisa dikatakan tag tersebut merupakan tag dasar pembuatan table
Untuk lebih mengenal dan mengerti daripada tag dasar Table, berikut saya berikan penjelasan dari masing masing tag :
Tag <table> </table>
Tag <table> adalah tag pembuka sebuah table, dimana tag <table> ini adalah tag awal yang kita pakai dalam mengawali pembuatan table. Setelah tag <table> ada tag </table> yang merupakan tag penutup atau akhir dari tabel yang sedang di buat.
Tag<tr></tr>
Tag <tr> atau Table Row adalah tag yang berfungsi untuk membuat baris dalam sebuah tabel. Tidak lepas dari tag-tag yang lain, tag ini berisi tag penutup yaitu </tr>.
Tag <tr> memiliki atribut ALIGN untuk mengatur alignment horizontal dan VALIGN untuk mengatur alignment vertical.
Tag<td></td>
Tag <td> atau Table data berfungsi untuk menampilkan data pada setiap sel tabel. Secara umum dapat dikatakan bahwa table data atau <td> ini digunakan untuk membuat kolom dalam baris table. Untuk mengakhiri kolom tersebut digunakan </td>.
Contoh Script dan Gambar
<html>
<TITLE>Tugas Pemrograman Web 2</TITLE>
<head>
<font face="Calibri" size="28">Data Nilai Mahasiswa</font>
<font face="calibri">
</head>
<table border="1">
<tr>
<td rowspan="2" align="center" width="50"><b>No</b></td>
<td rowspan="2" align="center" width="250"><b>Nama Mahasiswa</b></td>
<td colspan="2" align="center" width="250"><b>Nilai Tugas</b></td>
</tr>
<tr>
<td align="center"><b>1</b></td>
<td align="center"><b>2</b></td>
</tr>
<tr>
<td align="center">1</td>
<td>Bonaventura</td>
<td align="center">70</td>
<td align="center">80</td>
</tr>
<tr>
<td align="center">2</td>
<td>Romagnoli</td>
<td align="center">70</td>
<td align="center">90</<td>
</tr>
<tr>
<td align="center">3</td>
<td>Bartolaci</td>
<td align="center">90</td>
<td align="center">50</td>
</tr>
<tr>
<td align="center">4</td>
<td>Antoneli</td>
<td align="center">90</td>
<td align="center">80</td>
</tr>
<tr>
<td colspan="2"><b>Rata-rata</b></td>
<td align="center"><b>80</b></td>
<td align="center"><b>70</b></td>
</tr>
</table>
</font>
</html>
Tidak ada komentar:
Posting Komentar