Scribd
Unggah
188 tayangan10 halaman

Tabel HTML

Tabel digunakan untuk menyajikan data berbentuk baris dan kolom menggunakan tag <table> yang berisi baris (<tr>) dan kolom (<td>), serta memiliki atribut seperti border, cellpadding, cellspacing, colspan, rowspan untuk pengaturan tampilan dan isi tabel.

Diunggah oleh

Nikolaus
Hak Cipta
© Attribution Non-Commercial (BY-NC)
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd
188 tayangan10 halaman

Tabel HTML

Tabel digunakan untuk menyajikan data berbentuk baris dan kolom menggunakan tag <table> yang berisi baris (<tr>) dan kolom (<td>), serta memiliki atribut seperti border, cellpadding, cellspacing, colspan, rowspan untuk pengaturan tampilan dan isi tabel.

Diunggah oleh

Nikolaus
Hak Cipta
© Attribution Non-Commercial (BY-NC)
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 10

TABEL

Tabel adalah sebuah sarana untuk menginformasikan data berupa baris dan kolom. Sebuah tabel dimulai dengan tag <TABLE> dan diakhiri dengan </TABLE>. Setiap baris tabel dibentuk dengan tag <TR>.</TR>, dan setiap kolom tabel dibentuk dengan tag <TD>.</TD>. Tiap kotak dalam tabel disebut cell. <TH> berfungsi untuk membuat header dari tabel. Atribut BORDER pada tag <TABLE> akan membentuk border di sekeliling tabel. Default atribut adalah BORDER=0 yang berarti tidak menggunakan border. Tabel dengan border dimatikan bisa dimanfaatkan untuk melayout halaman dengan banyak gambar.

Selain border, berikut adalah atribut lain yang dapat

dipakai dalam <TABLE>, yaitu:


Bordercolor=kode_warna mengatur warna

border, jika border digunakan. Align=left|center|right mengatur posisi tabel di layar. Cellpadding=angka mengatur jarak antara border dengan isi sel (vertikal dan horizontal) dalam satuan pixel. Cellspacing=angka mengatur tebal frame dalam satuan pixel. Width=angka mengatur lebar tabel dalam satuan pixel atau persen.

Sedangkan berikut ini adalah beberapa atribut dalam tag

<TD> yang sering digunakan:

Bgcolor=kode_warna mengatur warna latar belakang cell. Background=gambar.gif menggunakan gambar sekaligus

sebagai latar belakang cell. Align=left|right|center mengatur perataan isi cell (teks, gambar, dan lain-lain) secara horizontal. Valign=top|bottom|middle mengatur perataan isi cell (teks, gambar, dan lain-lain) secara vertikal. Colspan=angka untuk menggabung cell kosong. Width=angka mengatur lebar cell dalam satuan pixel atau persen.

Catatan: Anda dapat mengganti kode <td>....</td> dengan

<th>....</th> agar teks di dalam cell dicetak dengan huruf tebal. Ini akan menghemat beberapa byte ukuran file karena Anda tidak perlu menggunakan tag <b>.....</b> lagi untuk membuat huruf tebal dalam sebuah cell.

Contoh dokumen HTML membuat Tabel Colspan <html> <head> <title>Tabel</title> </head> <body> <center>MEMBUAT TABEL DENGAN TIGA BARIS DAN TIGA KOLOM</center><br> <table align="center" border="5" cellspacing="2" cellpadding="5" width=50% height=50% > <tr> </tr> <th colspan="3" align="center">baris1, kolom1</th> <tr> <td>baris2, kolom1</td> <td>baris2, kolom2</td> <td>baris2, kolom3</td> </tr> <tr> <td>baris3, kolom1</td> <td>baris3, kolom2</td> <td>baris3, kolom3</td> </tr>

</table>

Contoh Dokumen HTML membuat Tabel Rowspan <html> <head> <title>Tabel</title> </head> <body> <center>MEMBUAT TABEL DENGAN TIGA BARIS DAN TIGA KOLOM</center><br> <table align="center" border="5" cellspacing="5" cellpadding="5" width=50% height=50% > <tr> <td rowspan="3" align="center">baris1, kolom1</td> <td>baris1, kolom2</td> <td>baris1, kolom3</td> </tr> <tr> <td>baris2, kolom2</td> <td>baris2, kolom3</td> </tr> <tr> <td>baris3, kolom2</td> <td>baris3, kolom3</td> </tr>

</table>

Contoh Dokumen HTML membuat Tabel terdapat Gambar <html> <head> <title>Tabel</title> </head> <body> <center>MEMBUAT TABEL DENGAN TIGA BARIS DAN TIGA KOLOM</center><br> <table align="center" border="5" cellspacing="5" cellpadding="5" width=50% height=50% > <tr> <td>baris2, kolom1</td> <td rowspan="3" align="center"><img src="C:\My Documents\web\jeannedanc.gif"></img></td> <td>baris2, kolom3</td> </tr> <tr> <td>baris2, kolom1</td> <td>baris2, kolom3</td> </tr> <tr> <td>baris2, kolom1</td> <td>baris3, kolom3</td> </tr> </table> </body> </html>

Contoh Dokumen HTML Membuat Tabel <html> <head> <title>Tabel</title> </head> <body> <center>MEMBUAT TABEL DENGAN TIGA BARIS DAN TIGA KOLOM</center><br> <table align="center" border="1" width=50% height=50% > <tr> <th>baris1, kolom1</th> <td>baris1, kolom2</td> <th>baris1, kolom3</th> </tr> <tr> <td>baris2, kolom1</td> <td>baris2, kolom2</td> <td>baris2, kolom3</td> </tr> <tr> <td>baris3, kolom1</td> <td>baris3, kolom2</td> <td>baris3, kolom3</td>

</tr>
</table> </body> </html>

PENGATURAN BORDER Border adalah garis yang mengelillingi sebuah tabel. Sintaksnya: <table border=angka> ................ </table> CELLPADDING DAN CELLSPACING Cellpading digunakan untuk mengatur jarak antara tepi tabel dengan isi sel baik vertikal maupun horisontal dalam satuan pixel. Cellspasing digunakanan untuk mengatur tebal frame dalam satuan pixel. Sintaksnya: <table border=angka cellpadding=angka cellspasing=angka> .......................... </table>

COLSPAN DAN ROWSPAN Colspan digunakan untuk menggabungkan beberapa kolom menjadi satu kolom atau satu sel kolom. Rowspan digunakan untuk menggabungkan beberapa baris menjaadi satu baris atau satu sel baris. Sintaksnya: <th rowspan/colspan=jumlah kolom/baris> atau <td rowspan/colspan=jumlah kolom/baris> ........................... </th> atau </td> PERATAAN ISI SEL, BACKGROUND ISI SEL, DAN BACKGROUND TABEL Digunakan apabila menginginkan isi sel yang ditampilkan tertata rapi dan menarik. Sintaksnya: <th align=left/center/right bgcolor=warna> atau <td align=left/center/right bgcolor=warna> .................... </th> atau </td> sedangkan untuk tabel, sintaksnya: <table border=angka bgcolor=warna> .................... </table>

Anda mungkin juga menyukai