» » Table Element Part 5

Table Element Part 5

By Fadli_Computer Labels: at Februari 16, 2026

Assalamu’alaikum Wr. Wb

Pengantar

Hai bagaimana kabarnya? Semoga baik-baik saja ya teman-teman. Melanjutkan artikel yang sebelumnya membahas tentang Table Element menggunakan Atribut Align. Dan pada kesempatan masih melanjutkan table cuman akan membahas Atribut Valign pada HTML.

Valign digunakan untuk mengatur perataan pada table baseline, middle, top, dan bottom. Atribut Valign ini dinyatakan sudah deprecated jadi disarankan menggunakan CSS. 

Harapan saya teman-teman dapat mempraktekan dan lebih baik lagi memahami materi kali ini dengan catatan di ulang pelajaran yang sudah dipraktekan agar tidak lupa. Teman-teman mulai dari sini harus membaca dengan teliti agar tidak salah memahami materinya. Semoga sukses dan berhasil, Amin.

 

Praktik HTML
Pada praktik kali kita akan membahas valign, mari kita mulai praktiknya, struktur kode HTML
Contoh:

Nilai

Fungsi

Top

Membuat isi sel rata atas dengan sel

 

Bottom

Membuat isi sel rata bawah dengan sel

 

Middle

Membuat isi sel berada di tengah sel

 

baseline

Membuat isi sel berada pada posisi teks pertama yang diketik dalam sel
 
Penempatan atribut valign pada tag <tr> untuk mengatur barisan, tag <td> untuk mengatur setiap sel secara terpisah.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alami Computer</title>
</head>
<body>
    <h3>Contoh Atribut valign top, bottom, middle, baseline</h3>
    <table border="2" >
        <tr height="150">
            <td>Baris 1, Kolom 1</td>
            <td valign="top">Baris 1, Kolom 2</td>
            <td valign="bottom">Baris 1, Kolom 3</td>
            <td valign="middle">Baris 1, Kolom 4</td>
            <td valign="baseline">Baris 1, Kolom 5 </td>
        </tr>
    </table>
</body>
</html>

Gambar 1 kode valign

 

Gambar 2 hasil kode valign

Sekarang kita buat dengan menggunakan kode CSS untuk melihat atribut valign, langsung praktikan saja yuk, contoh kode CSS:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alami Computer</title>
</head>
<body>
    <h3>Contoh Vertikal-align CSS (top, middle, bottom, baseline)</h3>
    <table border="2">
        <tr style="height: 150px;">
            <td>Baris 1, Kolom 1</td>
            <td style="vertical-align: top;">Baris 1, Kolom 2</td>
            <td style="vertical-align: middle;">Baris 1, Kolom 3</td>
            <td style="vertical-align: bottom;">Baris 1, Kolom 4</td>
            <td style="vertical-align: baseline;">Baris 1, Kolom 5</td>
        </tr>
        <tr style="height: 100px; vertical-align: bottom;">
            <td>Baris 2, Kolom 1</td>
            <td>Baris 2, Kolom 2</td>
            <td>Baris 2, Kolom 3</td>
            <td>Baris 2, Kolom 4</td>
            <td>Baris 2, Kolom 5</td>
        </tr>
    </table>
</body>
</html>

Gambar 3 kode valign dengan css

Gambar 4 hasil kode valign dengan css

Kesimpulan

Pembahasan tentang atribut valign pada table yang digunakan untuk keperluan menyajikan data secara menarik. Tujuan teman-teman yang membuat file html atau pemograman bisa menggunakan dengan baik dan sesuai dengan fungsi dan kelayakan pada sebuah kode-kode program yang akan dijalankan.

Terimakasih sudah berkunjung sampai ketemu di artikel selanjutnya, jangan lupa ikuti chanel kami yaitu :

YouTube: Alami Computer
Website: www.alamicomputer.id
Instagram: chaerullah.fadli

Daftar Pustaka: Tim Riset Alami Computer


2 komentar:

Berkomentar dengan baik dan benar

Back to Top