MODUL PEMBELAJARAN MEMBUAT TAG TABEL
LENGKAP PADA HTML
Cara membuat table memiliki 3 tag dasar yang sangat penting, yaitu <table> <tr> dan <td>. Pada <table> yaitu untuk menandakan suatu table, <tr> yaitu membuat kolom pada table, kolom itu disusun ke samping dan datanya diurut kebawah, <td> yaitu membuat baris, baris itu disusun kebawah dan datanya diurut kesamping.
A. Tag Tabel 1 Kolom
Script :
<table border="1">
<tr>
<td>Nama</td>
</tr>
</table>
Hasil :
1. B. Tag Tabel 1 Baris 2 Kolom
Script :
<table
border="1">
<tr>
<td>Nama</td>
<td>Kelas</td>
</tr>
</table>
Hasil :
1.
C. Tag Tabel 3 Baris 1 Kolom
Script :
<table
border="1">
<tr>
<td>Nama</td>
</tr>
<tr>
<td>Kelas</td>
</tr>
<tr>
<td>Agama</td>
</tr>
</table>
Hasil :
1.
D. Tabel dengan Menambahkan Atribut Cellspacing
Atribut
cellspacing pada table berfungsi untuk, menentukan jarak antara sel dengan
tabel.
Script :
<table
border="1" cellspacing=10>
<tr>
<td>Nama</td>
<td>Kelas</td>
</tr>
<tr>
<td>Jurusan</td>
<td>Alamat</td>
</tr>
</table>
Hasil :
1.
E. Tabel dengan Menambahkan Atribut Cellpadding.
Atribut
cellpadding pada tabel berfungsi untuk memberikan jarak antara sel dengan
tulisan.
Script :
<table
border="1" cellpadding=10>
<tr>
<td>Nama</td>
<td>Kelas</td>
</tr>
<tr>
<td>Jurusan</td>
<td>Alamat</td>
</tr>
</table>
Hasil :
1.
F. Tabel dengan Menggabungkan Atribut
Cellspacing dan Cellpadding.
Script :
<table
border="1" cellspacing=10 cellpadding=10>
<tr>
<td>Nama</td>
<td>Kelas</td>
</tr>
<tr>
<td>Jurusan</td>
<td>Alamat</td>
</tr>
</table>
Hasil :
1.
G. Tabel dengan Mengatur lebar Menggunakan
Presentase
Pada
contoh kali ini, saya akan mengatur lebar kolom (width) dengan presentase. Jadi
akan tampil di layar full 1 lembar / halaman.
Script :
<table
border="1" width=100%>
<tr>
<td
width=25%>Nama</td>
<td
width=75%>Kelas</td>
</tr>
<tr>
<td
width=25%>Jurusan</td>
<td
width=75%>Alamat</td>
</tr>
</table>
Hasil :
1.
H. Tabel dengan Mengatur Tinggi
Pada
contoh kali ini saya akan mengatur tinggi tabel dengan menggunakan pixel
sebagai perhitungan.
Script :
<table
border="1">
<tr
height=50>
<td
width=25%>Nama</td>
<td
width=75%>Kelas</td>
</tr>
<tr
height=80>
<td
width=25%>Jurusan</td>
<td
width=75%>Alamat</td>
</tr>
</table>
Hasil :
1.
I. Tabel dengan Meratakan Tulisan
Script :
<table
border="1">
<tr
height=50>
<td
width=150 align=left valign=top>Nama</td>
<td
width=150 align=right valign=top>Kelas</td>
</tr>
<tr
height=80>
<td
width=150 align=center valign=middle>Jurusan</td>
<td
width=150 align=right valign=bottom>Alamat</td>
</tr>
</table>
Hasil :
1.
J. Tabel dengan Menggunakan Colspan
Pada
dasarnya fungsi colspan dan rowspan itu hamper sama yakni digunakan untuk
memperlebar atau menggabungkan beberapa kolom atau baris menjadi satu. Pada
cols yakni menggabungkan beberapa kotak kesamping.
Script :
<table
border=1>
<caption>MENGHITUNG JUMLAH
MAHASISWA</caption>
<tr>
<th
colspan="2">3DB01</th>
<th
colspan="2">3DB02</th>
<th
colspan="2">3DB03</th>
</tr>
<tr>
<th>PEREMPUAN</th>
<th>LAKI-LAKI</th>
<th>PEREMPUAN</th>
<th>LAKI-LAKI</th>
<th>PEREMPUAN</th>
<th>LAKI-LAKI</th>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>21</td>
<td>24</td>
<td>33</td>
<td>11</td>
</tr>
</table>
Hasil :
1.
K. Tabel dengan Rowspan
Pada
dasarnya fungsi colspan dan rowspan itu hamper sama yakni digunakan untuk
memperlebar atau menggabungkan beberapa kolom atau baris menjadi satu. Pada rowspan yakni menggabungkan beberapa kotak kebawah.
Script :
<table
border=1>
<caption>Invoice</caption>
<tr>
<th>Item
/ Desc.</th>
<th>Qty.</th>
<th>@</th>
<th>Price</th>
</tr>
<tr>
<td>Paperclips (Box)</td>
<td>100</td>
<td>1.15</td>
<td>115.00</td>
</tr>
<tr>
<td>Paper (Case)</td>
<td>10</td>
<td>45.99</td>
<td>459.90</td>
</tr>
<tr>
<td>Wastepaper Baskets</td>
<td>2</td>
<td>17.99</td>
<td>35.98</td>
</tr>
<tr>
<th
colspan="3">Subtotal</th>
<td>610.88</td>
</tr>
<tr>
<th
colspan="2">Tax</th>
<td>7%</td>
<td>42.76</td>
</tr>
<tr>
<th
colspan="3">Total</th>
<td>653.64</td>
</tr>
</table>
Hasil :
Sekian yang bisa saya sampaikan, dengan materi pembuatan tag tabel lengkap dan mudah pada html. Silahkan anda kembangkan, semoga bermanfaat dan salam sukses !! Anda bisa download modul lengkap disini
0 komentar:
Posting Komentar