html elemen tabel
DESCRIPTION
Pengenalan HTML membuat tabelTRANSCRIPT
![Page 1: HTML elemen tabel](https://reader033.vdocuments.pub/reader033/viewer/2022052215/5599c69e1a28abd96e8b45b7/html5/thumbnails/1.jpg)
MATERI HTML
ELEMEN TABEL (TABLE)
PEMBIMBING OLEH :
DEKA M WILDAN
TAHUN PELAJARAN 2013/2014
![Page 2: HTML elemen tabel](https://reader033.vdocuments.pub/reader033/viewer/2022052215/5599c69e1a28abd96e8b45b7/html5/thumbnails/2.jpg)
Tabel adalah suatu kumpulan baris dan kolom terstruktur pembentuk layout untuk menempatkan dan menata informasi atau konten agar mudah dibaca, dipahami dan lebih rapi dalam penyusunan dokumen web. Element TABLE befungsi untuk membuat suatu data multidimensi yang terdiri atas kolomdan baris. Element ini mempunyai attribute seperti al ign, bgcolor, border, cellpadding (jarak antara tepi sel dengan isi sel), cellspacing ( jarak antara sel), width ( lebar tabel), height (t inggitabel). Element TABLE berisikan element CAPTION, TH, TR dan TD.
![Page 3: HTML elemen tabel](https://reader033.vdocuments.pub/reader033/viewer/2022052215/5599c69e1a28abd96e8b45b7/html5/thumbnails/3.jpg)
<table> <caption>JUDUL TABEL</caption> <tr> <th>
ISI KONTEN </th> </tr> <tr> <td>
ISI KONTEN </td> </tr></table>
![Page 4: HTML elemen tabel](https://reader033.vdocuments.pub/reader033/viewer/2022052215/5599c69e1a28abd96e8b45b7/html5/thumbnails/4.jpg)
Sintaks:
<table
align="left"|"center"|"right“ //membuat perataan tabel
bgcolor="color“/background=“gambar” //membuat background
border="pixel“ //membuat ketebalan garis tepi
bordercolor=“color” //memberi warna garis tepi
cellpadding="pixel“ //membuat lapisan pada garis tabel
cellspacing="pixel“ //memberi jarak pada garis tabel
width="pixel"|"%“ //membuat lebar tabel
height="pixel"|"%" > //membuat tinggi tabel
........................
</table>
![Page 5: HTML elemen tabel](https://reader033.vdocuments.pub/reader033/viewer/2022052215/5599c69e1a28abd96e8b45b7/html5/thumbnails/5.jpg)
Element CAPTION berfungsi untuk membuat judul dari tabel. Element ini harus berada di dalam element TABLE dan mempunyai attribute align dengan nilai top (judul terletak di atas tabel), dan bottom (judul terletak di bawah tabel).
Sintaks:<caption align="top"|"bottom">..........................</caption>
![Page 6: HTML elemen tabel](https://reader033.vdocuments.pub/reader033/viewer/2022052215/5599c69e1a28abd96e8b45b7/html5/thumbnails/6.jpg)
Element TR mendefinisikan baris pada tabel dan element ini harus berada di dalam element TABLE. Pada element TR terdapat element TH dan TD. Attribute yang terdapat pada element ini adalah al ign, valign (posisi ver t ikal), dan bgcolor.
Sintaks:<tr align="left"|"center"|"right" valign="top"|"middle"|"bottom“ bgcolor="color">..........................</tr>
![Page 7: HTML elemen tabel](https://reader033.vdocuments.pub/reader033/viewer/2022052215/5599c69e1a28abd96e8b45b7/html5/thumbnails/7.jpg)
Element TH dan TD merupakan informasi pada tabel. TH mendefinisikan isi sel sebagai header sel pada kolom tabel dan datanya tercetak tebal dan dengan posisi ditengah sel. Element TH dan TD ini harus terletak di dalam element TR. Attribute kedua element ini adalah align, valign, bgcolor, colspan, rowspan
Sintaks:
<th
align="left"|"center"|"right"
valign="top"|"middle"|"bottom"
bgcolor="color"
colspan="number"
rowspan="number">
..........................
</th>
<td
align="left"|"center"|"right"
valign="top"|"middle"|"bottom"
bgcolor="color"
colspan="number"
rowspan="number">
..........................
</td>
![Page 8: HTML elemen tabel](https://reader033.vdocuments.pub/reader033/viewer/2022052215/5599c69e1a28abd96e8b45b7/html5/thumbnails/8.jpg)
Buatlah file halaman web html dengan nama latihantabel.html dengan menggunakan teks editor notepad, kemudian ketikkan kode seperti gambar di bawah ini :
![Page 9: HTML elemen tabel](https://reader033.vdocuments.pub/reader033/viewer/2022052215/5599c69e1a28abd96e8b45b7/html5/thumbnails/9.jpg)
![Page 10: HTML elemen tabel](https://reader033.vdocuments.pub/reader033/viewer/2022052215/5599c69e1a28abd96e8b45b7/html5/thumbnails/10.jpg)
Buatlah halaman web html dengan nama tugastabel.html menggunakan teks editor notepad dengan hasil tampilan seperti gambar di bawah ini :