Membuat Tabel di HTML dan CSS

 Membuat Tabel di HTML dan CSS


Untuk membuat tabel dalam HTML ada beberapa tag penting yaitu antara lain : 

  1. Tag <table> untuk membungkus tabelnya
  2. Tag <thead> untuk membungkus bagian kepala tabel
  3. Tag <tbody> untuk membungkus bagian body dari tabel
  4. Tag <tr> (tabel row) untuk membuat baris
  5. Tag <td> (table data) untuk membuat sel
  6. Tag <th> (table head) untuk membuat judul pada header
Tag yang paling penting untuk diingat adalah tag <table>, <tr>, dan <td>. Sementara tag yang lain adalah tambahan (opsional), boleh digunakan boleh tidak .

Berikut merupakan langkah-langkah pembuatan tabel HTML :

1. Struktur Utama HTML dan diberi link di head untuk memanggil css-nya 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabel HTML dan CSS || Muhammad Fahmi 'Ainunnajib</title>
    <link rel="stylesheet" href="CSS/style.css">
</head>

<body>

</body>

</html>

2. Membuat title

Code : 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabel HTML dan CSS || Muhammad Fahmi 'Ainunnajib</title>
    <link rel="stylesheet" href="CSS/style.css">
</head>

<body>
    <h1>Membuat Tabel di HTML & CSS</h1>
</body>

</html>

Hasilnya : 


3. Membuat title berada di tengah dengan memberi style di style.css

code : 

h1 {
    text-align: center;
}

hasilnya



4. Membuat tabel dan di isi dengan tabel heading atau judul dari tabel 

Code : 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabel HTML dan CSS || Muhammad Fahmi 'Ainunnajib</title>
    <link rel="stylesheet" href="CSS/style.css">
</head>

<body>
    <h1>Membuat Tabel di HTML & CSS</h1>
    <table border="1">
        <tr>
            <th rowspan="2">No</th>
            <th rowspan="2">Nama Lengkap</th>
            <th colspan="3">Nilai</th>
            <th rowspan="2">Keterangan</th>
            <th rowspan="2">Foto</th>
            <th rowspan="2">Aksi</th>
        </tr>
        <tr>
            <th>UTS</th>
            <th>UAS</th>
            <th>Nilai Akhir</th>
        </tr>
    </table>
</body>

</html>


Hasilnya :




Fungsi colspan dan rowspan dalam HTML adalah untuk menggabungkan sel tabel secara horizontal dan vertikal:

Colspan : 
Digunakan untuk menggabungkan sel secara horizontal. Colspan memungkinkan satu sel tabel menjangkau lebar lebih dari satu sel atau kolom.

Rowspan :
Digunakan untuk menggabungkan sel secara vertikal. Rowspan memungkinkan satu sel tabel menjangkau tinggi lebih dari satu sel atau baris.


5. Memberi style pada tabel

Code : 

h1 {
    text-align: center;
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

Hasilnya : 


6. Menambahkan baris baru sebagai isi dari tabel

Code : 

        <tr>
            <td>1</td>
            <td>Muhammad Fahmi 'Ainunnajib</td>
            <td>99</td>
            <td>99</td>
            <td>99</td>
            <td>Sangat Baik</td>
            <td><img src="IMG/logo.jpg"></td>
            <td>
                <a href="#">edit</a> | <a href="#">delete</a>
            </td>
        </tr>


Hasilnya : 



7. Membuat foto di tabel menjadi lebih kecil, dan menambah beberapa baris

Code style foto :

img {
    width: 40px;
    height: 60px;
}

Code Tambah beberapa baris :

         <tr>
            <td>2</td>
            <td>Muhammad Fahmi 'Ainunnajib</td>
            <td>99</td>
            <td>99</td>
            <td>99</td>
            <td>Sangat Baik</td>
            <td><img src="IMG/logo.jpg"></td>
            <td>
                <a href="#">edit</a> | <a href="#">delete</a>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>Muhammad Fahmi 'Ainunnajib</td>
            <td>99</td>
            <td>99</td>
            <td>99</td>
            <td>Sangat Baik</td>
            <td><img src="IMG/logo.jpg"></td>
            <td>
                <a href="#">edit</a> | <a href="#">delete</a>
            </td>
        </tr>

Hasilnya : 



8. Menambahkan background color pada th dan memberikan background color pada td secara selang-seling

Code : 

h1 {
    text-align: center;
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

img {
    width: 40px;
    height: 60px;
}

th {
    background-color: blueviolet;
}

tr:nth-child(even) {
    background-color: khaki;
}

Hasilnya : 


9. Menambahkan efek hover atau efek ketika di sorot dengan mouse di link edit dan hapus


Codenya : 

h1 {
    text-align: center;
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

img {
    width: 40px;
    height: 60px;
}

th {
    background-color: blueviolet;
}

tr:nth-child(even) {
    background-color: khaki;
}

a {
    text-decoration: none;
}

a:hover {
    background-color: blue;
    color: white;
    text-decoration: none;
}


Hasilnya : 





Komentar

Posting Komentar

Postingan populer dari blog ini

Membuat Simulasi Jaringan Komputer 2 Mikrotik, dengan VM

Gambar
Membuat Simulasi Jaringan Komputer 2 Mikrotik, dengan VM Membuat Simulasi Jaringan Komputer 2 Mikrotik, dengan VM 1. Membuat 2 mikrotik 2. Setting network di mikrotik 1 3. Setting network di mikrotik 2 4. Jalankan mikrotik 1 lalu ubah nama mikrotiknya  5. Setting interface-nya 6. Tambah IP address lalu ping default getway 7. Setting IP route lalu ping 8.8.8.8 8. Setting IP dns lalu ping website/domain 9. Tambah ip address untuk ethernet 2   10. Pindah ke mikrotik 2 lalu ubah nama mikrotik 2 11. Setting interface   12. Setting IP address lalu ping default getway  13. Setting IP route, dan IP dns lalu coba ping ke 8.8.8.8 dan masih gagal karena di mikrotik 1 belum di setting IP firewall nat 14. Setting IP firewall nat di mikrotik 1 15. Lalu kembali ke mikrotik 2 lalu ping ke 8.8.8.8 dan ke domain atau web 
Baca selengkapnya

Konfigurasi 3 Mikrotik

Gambar
Konfigurasi 3 Mikrotik 1. Siapkan Mikrotik 2. Ubah Settingan network di 3 Mikrotik 3. Setting di mikrotik 1, yaitu dari sytem identity, lalu interface, ip address, ip route dan ip dns, dan juga ping di default gateway, ping ke 8.8.8.8 lalu ke detik.com 4. Setting IP address di mikrotik1 untuk ke mikrotik lainnya dan juga setting ip firewall nat 5. Setting di mikrotik 2, yaitu dari sytem identity, lalu interface, ip address, ip route dan ip dns, dan juga ping di default gateway, ping ke 8.8.8.8 lalu ke google.com 6. Setting di mikrotik 3, yaitu dari sytem identity, lalu interface, ip address, ip route dan ip dns, dan juga ping di default gateway, ping ke 8.8.8.8 lalu ke google.com catatan : Mohon maaf tidak sesuai dengan topologi, karena jika saya menggunakan ip 192.168.10.1/30 dan 192.168.10.6/30 di mikrotik 2 dan 3 nya timeout, jadi saya ubah ke ip 192.168.43.1/30 dan 192.168.43.6/30
Baca selengkapnya

Form HTML

Gambar
 Form HTML Form merupakan bagian pada HTML yang dapat digunakan untuk membuat elemen Form atau formulir pada halaman Web. Jenis-Jenis atau Type Input pada Form  <input type="text"> : yang berfungsi untuk input teks bari tunggal <input type="submit">  : yang berfungsi sebagai tombol <input type="email">  : yang berfungsi sebagai tempat input email <input type="color">  : yang berfungsi sebagai tempat input color atau warna <input type="datetime">  : yang berfungsi sebagai tempat input tanggal dan waktu/jam <input type="time">  : yang berfungsi sebagai tempat input waktu atau jam <input type="file">  : yang berfungsi sebagai tempat input / upload file <input type="email">  : yang berfungsi sebagai tempat input email <input type="hidden">  : yang berfungsi sebagai tempat input yang tidak terlihat oleh user <input type="number">  : ...
Baca selengkapnya