Membuat Table Pada HTML || BLC TELKOM KLATEN


A. PENDAHULUAN

  • Pengertian
Tabel digunakan untuk mengelompokkan suatu data secara terstruktur yang terdiri atas colom dan baris. kolom dan sell inilah sangat penting untuk membantu informasi keterkaitan data di dalamnya.
dan tag yang di gunakan untuk membuat table dalam HTML ini adalah tag <table>, <tr>, <td>.
  • Latar Belakang Masalah
Di karenakan jika ingin menjadi Web devalopment kedepannya harus mempunyai dasar HTML terlebih dahulu

B. MAKSUD DAN TUJUAN

Bisa menerapkan dan membuat Table pada HTML


C. RUANG DAN LINGKUP PEKERJAAN

- Table Pada HTML

- Menggabungkan antara dua baris menjadi satu

- Menggabungkan antara baris ke bawah menjadi satu


D. HASIL YANG DI HARAPKAN

Dapat membuat Table pada HTML


E. METODE PELAKSANAAN

- Menonton Referensi

- Coding


F. ALAT DAN BAHAN

- Laptop

- Vs Code

- Koneksi internet


G. TARGET WAKTU

2 jam


H. TAHAPAN PELAKSANAAN

- Menonton referensi

Saya menonton Referensi di Web Programming Unpas


- Coding

<!DOCTYPE html>
<html>
<head>
<title>Belajar membuat table pada html</title>
</head>
<body><center>
<h2>Ini adalah contoh Tabel simple</h2>
<table border="1" cellspacing="0" cellpadding="5">
<tr>
<td>baris pertama</td>
<td>baris kedua</td>
<td>baris ketiga</td>
<td>baris keempat</td>
</tr>
<tr>
<td>colum kedua</td>
<td>baris kedua</td>
<td>baris ketiga</td>
<td>baris keempat</td>
</tr>
</table><br><br>

<hr>

<h2>Menggabungkan 3 baris sekaligus</h2>
<table border="1" cellspacing="0" cellpadding="5">
<tr>
<td>Adelwingans</td>
<td colspan="3">Menggabungkan 3 colum sekaligus</td>
<tr>
<td>colum 2</td>
<td>baris ke dua</td>
<td>baris ke tiga</td>
<td>baris keempat</td>
</tr>
</tr>
</table><br><br>

<hr>
<h2>Menggabungkan 2 baris sekaligus</h2>
<table border="1" cellspacing="0" cellpadding="5">
<tr>
<td rowspan="2">contoh menggabungkan 2 colum sekaligus</td>
<td>baris kedua</td>
<td>baris ketiga</td>
<td>baris keempat</td>
</tr>
<tr>
<td>baris kedua</td>
<td>baris ketiga</td>
<td>baris keempat</td>
</tr>
</table><br><br>

<hr>

<h2>contoh simple table simple</h2>
<table border="1" cellpadding="8">
<tr>
<td rowspan="2"> Nama </td>
<td colspan="3"> Nilai </td>
</tr>
<tr>
<td>Ipa</td>
<td>Ips</td>
<td>Mtk</td>
</tr>
<tr>
<td>Adelwin</td>
<td>90</td>
<td>80</td>
<td>98</td>
</tr>
<tr>
<td>Rif'at</td>
<td>100</td>
<td>90</td>
<td>99</td>
</tr>
<tr>
<td>Ihya</td>
<td>98</td>
<td>97</td>
<td>98</td>
</tr>
</table>
</center>
</body>
</html>I

Hasil : 



> Penjelasan <


- Table Pada HTML

Tabel digunakan untuk mengelompokkan suatu data secara terstruktur yang terdiri atas colom dan baris. kolom dan sell inilah sangat penting untuk membantu informasi keterkaitan data di dalamnya.

    Dalam membuat Table pada HTML ini hanya menggunakan 3 elemen yaitu :

    1. Elemen <table> Di gunakan untuk mendefinisikan untuk pembuatan tabel
    2. Elemen <tr> Di gunakan untuk membuat garis tabel
    3. Elemen <td> Di gunakan untuk membuat Colom atau sell di setiap baris pada tabel

    - Menggabungkan antara dua baris menjadi satu

    cara menggabungkan dua baris menjadi satu menggunakan atribut colspan pada tag <td>

    contoh : <td colspan="(baris yang di inginkan)">Menggabungkan 3 dalam sekaligus

    <table border="1" cellspacing="0" cellpadding="5">
    <tr>
    <td>Adelwingans</td>
    <td colspan="3">Menggabungkan antara dua baris menjadi 1</td>
    <tr>
    <td>colum 2</td>
    <td>baris ke dua</td>
    <td>baris ke tiga</td>
    <td>baris keempat</td>
    </tr>
    </tr>
    </table>


    hasilnya :



    - Menggabungkan antara baris ke bawah menjadi satu

    Cara menggabungkan dua colum/kolom menjadi satu menggunakan atribut rowspan pada tag <td>

    contoh : <td rowspan="(baris yang di inginkan)">Menggabungkan 2 colum/kolom menjadi satu

    <table border="1" cellspacing="0" cellpadding="5">
    <tr>
    <td rowspan="2">contoh menggabungkan 2 colum menjadi satu</td>
    <td>baris kedua</td>
    <td>baris ketiga</td>
    <td>baris keempat</td>
    </tr>
    <tr>
    <td>baris kedua</td>
    <td>baris ketiga</td>
    <td>baris keempat</td>
    </tr>
    </table>

    Hasilnya :



    I. TEMUAN PERMASALAHAN DAN CARA PENYELESAIANNYA

    J. KESIMPULAN YANG DI DAPAT

    Dengan menggunakan tabel kita bisa tahu informasi yang akan terkait dalam data yang ada di dalamnya


    K. REFERENSI

    - Web Programming Unpas