Unduh Modul TIK SD Kelas 1,2,3,4,5,6 disini >>
Modul Pemrograman Web Dasar Materi Membuat Tabel di HTML dan Penggunaan Atribut Table-dikolom edukasi ini kita akan belajar tentang pembuatan tabel d HTML.
Kang abiey sengaja membuatkan tutorial ini untuk para siswa SMK terutama yang ada mata diklat dasar kompetensi pemrograman web dasarnya, seperti jurusan RPL, Multimedia, TKJ dan bidang keahlian TIK lainnya.
Tag Table merupakan materi penting dalam penulisan kode HTML, dengan tag ini kita bisa membuat kolom dan baris yang sangat dibutuhkan dalam
pemrograman web dasar menggunakan HTML. Dengan tag table pula mockup website bisa dibuat sebelum nantinya programmer melengkapi dengan kode pemrograman web tingkat tinggi seperti PHP, Jquery, javasrcript dan css.
Tag Table di HTML
Tag / kode dasar untuk membuat sebuah table sebagai berikut:
<table border="1">
<tr>
<td>Kolom 1 pada baris ke 1</td>
<td>Kolom 2 pada baris ke 1</td>
</tr>
<tr>
<td>Kolom 1 pada baris ke 2 </td>
<td>Kolom 2 pada baris ke 2</td>
</tr>
</table
Keterangan:
Fungsi tag <table border="1">
Tag diatas merupakan kode awal untuk pembuatan tabel, adapun border="1" merupakan atribut untuk menentukan ketebalan bingkai / border tabel, setelah tanda sama dengan (atau biasa disebut value) bisa diisi dengan angka mulai dari 0 sampi 10 dan seterusnya. Untuk ukuran normal cukup diisi dengan angka 1. Penulisannya diawali dengan <table border="1" dan diakhir dengan </table>, dan diantara tag <table border="1"> dan </table> berisi kode HTML untuk membuat baris dan kolom.
Contoh:
<table border="1">
Kode untuk membuat baris dan kolom
</table>
Fungsi tag <tr>
Tag yang digunakan untuk membuat baris tabel, penulisannya diawali dengan <tr> dan diakhiri dengan </tr>. Diantara tag <tr> dan </tr> berisi tag untuk membuat kolom.
Contoh:
<tr>
Kode untuk membuat kolom
</tr>
Fungsi tag <td>
Tag <td> digunakan untuk membuat kolom tabel. Penulisan kodenya diawali dengan <td> dan diakhiri dengan </td>. Tag <td></td> harus ditulis diantara tag <tr> dan </tr>
Contoh:
<td>Isi kolom </td>
>Lihat:
Daftar Materi Ajar Pemrograman Web Dasar Kelas 10 SMK
Atribut tag Table di HTML
Ada beberapa atribut dalam penulisan kode HTML untuk membuat tabel. Beberapa atribut tersebut seperti ditampilkan dibawah ini:
1. Atribut Border.
Seperti sudah dijelaskan diatas, atribut ini digunakan untuk melengkapi tag html <table> yang fungsinya untuk menampilkan ketebalan bingkai tabel. Isi dari atribut / value adalah angka dengan satuan pixel.
Penempatan atribut border pada kode HTML:
<table border="1"> artinya: ketebalan bingkai tabel ukurannya 1 dalam satuan pixel.
<table border="2"> artinya: ketebalan bingkai tabel ukurannya 2 dalam satuan pixel.
<table border="3">artinya: ketebalan bingkai tabel ukurannya 3 dalam satuan pixel.
<table border="4"> artinya: ketebalan bingkai tabel ukurannya 4 dalam satuan pixel.
<table border="5">artinya: ketebalan bingkai tabel ukurannya 5 dalam satuan pixel.
2. Atribut Width
Atribut ini digunakan untuk menentukan lebar kolom. Isi dari atribut / Value adalah angka dengan satuan pixel. Penempatan atribut width didalam tag <table> dan tag <td>.
Contoh penempatan atribut:
<table border="1" width="700px" atribut width ini untuk menentukan lebar tabel keseluruhan 700 pixel.
<tad width="300px"> atribut width ini menentukan lebar kolom tabel sebesar 300 pixel.
3. Atribut Height
Atribut ini digunakan untuk menentukan tinggi suatu kolom tabel. Penempatan atribut ini didalam tag <td> dengan isi atribut / value adalah angka dengan satuan pixel.
Contoh penulisan atribut height:
<td height="400px">
Penempatan atribut height pada contoh diatas menjelaskan tinggi kolom adalah 400 pixel.
<td width="300px" height="400px">
Penempatan atribut height pada contoh diatas menjelaskan lebar kolom adalah 300 pixel dan tinggi kolom adalah 400 pixel.
Contoh tabel di HTML dengan atribut border, width, dan height.
<table border="1">
<tr>
<td height="30px">Kolom ke 1pada baris ini tingginya 30 pixel</td>
<td>Kolom ke 2 baris ke 1 tinginya sama dengan kolom ke 1</td>
</tr>
<tr>
<td height="400px" width="200px>Kolom ke 1 baris ke 2 tinggi 400 px lebar 200px</td>
<td width="500px">Kolom ke 2 baris ke 2 lebarnya 500px</td>
</tr>
<tr>
<td height="30px">Kolom ke 1 baris ke 3 tinggi 30px</td>
<td > Kolom ke 2 baris ke 3</td>
</tr>
</table>
4. Atribut cellpadding
Attribut ini digunakan untuk mengatur jarak dari border sisi dalam tabel dengan isi text tabel itu sendiri. Penulisan atribut cellpadding didalam tag <table> adapun isi atribut / value berupa angka dengan satuan pixel.
Contoh penulisan atribut cellpadding:
<table border="1" cellpadding="3">
Atribut pada tabel diatas jika ditampilkan di browser akan membuat jarak sebesar 3 pixel dari teks ke masing-masing bingkai tabel.
Penempatan atribut cellpadding bisa diletakan setelah atribut lainnya, contoh:
<table border="1" height="30px" width="400px" cellpadding="3"> atau
<table border="1" cellpadding="3" width="400px" height="30px">
5. Atribut cellspacing
Atribut cellspacing digunakan untuk mengatur jarak antara garis tepi /bingkai tabel bagian dalam dan luar. Penempatan atribut ini didalam tag <table>. Isi atribut / value berupa angka dengan satuan pixel.
Contoh penulisan atribut cellspacing:
<table border="1" cellspacing="6">
Atribut cellspacing diatas akan membuat tabel yang ditampilkan pada browser memiliki ukuran jarak spacing sebesar 6 pixel.
Contoh lainnya dari penempatan atribut cellspacing:
<table border="1" width="300px" cellspacing="5"> atau
<table border="1" cellpadding="2" cellspacing="5"> atau
<table border="1" cellspacing="4" width="700px">
6. Atribut bgcolor
Atribut bgcolor digunakan untuk menampilkan latar dengan warna sesuai yang diinginkan programmer. Atribut ini bisa diletakan pada tag <table>, <tr>, <td>. Adapun isi / value dari atribut ini adalah berupa nama warna dalam bahasa inggris atau
kode warna html hexa.
Contoh penulisan atribut bgcolor:
<table border="1" bgcolor=" #0000FF"> latar tabel akan berwarna biru
<tr bgcolor=" #0000FF"> satu baris pada tabel akan berwarna biru
<td bgcolor=" #0000FF">bagian kolom akan berwarna biru
7. Atribut colspan
Atribut colspan digunakan untuk menggabungkan beberapa kolom menjadi satu kolom. Dalam aplikasi wordprocessor sering disebut dengan mergecell. Penempatan atribut ini didalam tag <td> dengan isi atribut / value berupa angka sesuai jumlah kolom yang digabungkan.
Contoh penulisan atribut colspan:
Kode awal sebuah tabel yang belum menggunakan atribut colspan.
<table border="1">
<tr>
<td>Kolom 1 baris ke 1</td>
<td>Kolom 2 baris ke 1</td>
<td>Kolom 3 baris ke 1</td>
</tr>
<tr>
<td>Kolom 1 baris ke 2</td>
<td>Kolom 2 baris ke 2</td>
<td>Kolom 3 baris ke 2</td>
</tr>
<tr>
<td>Kolom 1 baris ke 3</td>
<td>Kolom 2 baris ke 3</td>
<td>Kolom 3 baris ke 3</td>
</tr> </table>
Perintah:
Gabungkan kolom 1,2 dan 3 pada baris ke 1 dan baris ke 3.
Maka sesuai perintah diatas, letakan atribut colspan pada tag <td> kolom pertama baris ke 1 dan baris ke 3. Seperti tampilan kode html diatas dengan perubahan sebagai berikut:
<table border="1">
<tr>
<td colspan="3">Gabungan kolom 1,3 dan 3 baris ke 1</td>
</tr>
<tr>
<td>Kolom 1 baris ke 2</td>
<td>Kolom 2 baris ke 2</td>
<td>Kolom 3 baris ke 2</td>
</tr>
<tr>
<td colspan="3">Gabungan kolom 1,3 dan 3 baris ke 3 </td>
</tr>
</table>
Keterangan:
Setelah penulisan atribut colspan pada tag <td> kolom 1 di baris ke 1 dan 3, maka kolom ke 2 dan 3 pada baris ke 1 dan 3 harus dihapus. Jika tidak dihapus maka tabel yang ditampilkan di browser akan rusak / tidak sesuai.
Jika tidak ingin menghapus masing-masing kolom, misalnya karena masih belajar dan agar siswa lebih paham maka bisa dengan meletakan tag komentar <!--diawal dan --> akhir kolom 2 dan 3 pada baris ke 1 dan 3. Seperti contoh dibawah ini:
<table border="1">
<tr>
<td>Kolom 1 baris ke 1</td>
<!--<td>Kolom 2 baris ke 1</td> -->
<!--<td>Kolom 3 baris ke 1</td> -->
</tr>
<tr>
<td>Kolom 1 baris ke 2</td>
<td>Kolom 2 baris ke 2</td>
<td>Kolom 3 baris ke 2</td>
</tr>
<tr>
<td>Kolom 1 baris ke 3</td>
<!--<td>Kolom 2 baris ke 3</td> -->
<!--<td>Kolom 3 baris ke 3</td> -->
</tr> </table>
Dengan tag komentar <!-- dan --> maka tiap kolom yang diberi tag tersebut tidak akan ditampilkan pada saat kode tersebut diload di browser. Ingat, penggunaan tag komentar tersebut hanya digunakan pada saat latihan dan ketika belum paham saja, jika sudah paham sebaiknya tidak menggunakan cara seperti itu dikarenakan hanya akan menambah jumlah kode saja sementara fungsinya sudah tidak diperlukan lagi.
8. Atribut rowspan
Atribut rowspan diguakan untuk menggabungkan baris dalam tabel. Penempatan atribut rowspan pada tag <td> dengan isi atribut / value berupa angka sesuai jumlah baris yang akan digabungkan.
Contoh penulisan tag rowspan:
Kode awal dari kode HTML tabel yang akan digabungkan barisnya:
<table border="1">
<tr>
<td>kolom 1 baris ke 1</td>
<td>kolom 2 baris ke 1</td>
<td>kolom 3 baris ke 1</td>
</tr>
<tr>
<td>kolom 1 baris ke 2</td>
<td>kolom 2 baris ke 2</td>
<td>kolom 3 baris ke 2</td>
</tr>
<tr>
<td>kolom 1 baris ke 3</td>
<td>kolom 2 baris ke 3</td>
<td>kolom 3 baris ke 3</td>
</tr> </table>
Perintah:
Gabungkan baris ke 1 dengan baris ke 2 pada kolom yang ke 2 di masing-masing baris.
Maka perubahan kode HTMLnya sebagai berikut;
<table border="1">
<tr>
<td>kolom 1 baris ke 1</td>
<td rowspan="2">Kolom 2 baris ke 1</td>
<td>kolom 3 baris ke 1</td>
</tr>
<tr>
<td>kolom 1 baris ke 2</td>
<td>kolom 3 baris ke 2</td>
</tr>
<tr>
<td>kolom 1 baris ke 3</td>
<td>kolom 2 baris ke 3</td>
<td>kolom 3 baris ke 3</td>
</tr>
</table>
Atau bisa juga dengan meletakan tag komentar <!-- diawal kolom dan --> diakhir kolom yang akan digabungkan barisnya. Seperti pada tampilan perubahan kode HTML dibawah ini;
<table border="1">
<tr>
<td>kolom 1 baris ke 1</td>
<td rowspan="2">Kolom 2 baris ke 1</td>
<td>kolom 3 baris ke 1</td>
</tr>
<tr>
<td>kolom 1 baris ke 2</td>
<!-- <td>kolom 2 baris ke 2</td> --> (ket: kode ini tidak akan ditampilkan di browser)
<td>kolom 3 baris ke 2</td>
</tr>
<tr>
<td>kolom 1 baris ke 3</td>
<td>kolom 2 baris ke 3</td>
<td>kolom 3 baris ke 3</td>
</tr>
</table>
Contoh tabel di HTML dengan atribut rowspan dan colspan
Berikut kode HTML untuk membuat tabel 3 kolom 4 baris. Kolom 1,2 dan 3 pada baris ke 1 digabungkan. Dan baris ke 4 dan ke 5 kolom ke 2 digabungkan.
<table border="1">
<tr>
<td colpsan="3">baris 1 kolom ke 1</td>
</tr>
<tr>
<td>baris 1 kolom ke 1</td>
<td>baris 1 kolom ke 2</td>
<td>baris 1 kolom ke 2</td>
</tr>
<tr>
<td rowspan="2">baris 1 kolom ke 1</td>
<td>baris 1 kolom ke 2</td>
<td>baris 1 kolom ke 2</td>
</tr>
<tr>
<td>baris 1 kolom ke 1</td>
<td>baris 1 kolom ke 2</td>
</tr>
</table>
9. Atribut valign
Atribu valign merupakan atribut yang digunakan untuk mengatur align teks pada sebuah kolom tabel. Penempatan atributnya pada tag <td> dan <tr> dengan isi / value berupa teks top (menempatkan teks dibagian kiri atas kolom), atau bottom (menempatkan teks dibagian bawah kolom). Penempatan atribut valign sebelum atribut lainnya.
Contoh penulisan valign:
<td valgn="top"> menempatkan default teks dibagian atas kolom
<tr valign="top"> menempatkan default teks diseluruh kolom pada baris
Contoh kode html tabel menggunakan atribut valign
<table border="1">
<tr valign="top>
<td>kolom kiri 1</td>
<td>kolom tengah 1</td>
<td >kolom kanan 1</td>
</tr>
<tr>
<td valign="top" width="200px">kolom kiri 1</td>
<td valign="top" width="400px" height="500px">kolom tengah 1</td>
<td width="100px">kolom kanan 1</td> </table>
>Lihat:
Proposal UKK/Ujikom SMK Program Keahlian Rekayasa Perangkat Lunak (RPL)
>Lihat:
Soal Ujian Praktik Kejuruan SMK 2016 Program Keahlian Multimedia (MM)
Demikian posting di edisi liburan minggu kali ini tentang
cara membuat table di HTML dan atribut-atribut table HTML semoga bermanfaat untuk semuanya. Terutama untuk adik-adik di SMK jurusan RPL, MM, dan bidang keahlian TIK lainnya. Terimakasih sudah membaca dengan seksama seluruh materi HTML diatas, koreksi dan sumbang saran silahkan kirimkan melalui kolom komentar yang tersedia.
DOWNLOAD DISINI >>
Masih satu topik:
Modul-modul Komputer untuk SD SMP SMA SMK disini...
