HTML valign merupakan atribut pada element tag HTML tabel data <td> yang digunakan untuk mengatur posisi konten sel suatu tabel dengan orientasi vertikal. Hal ini berguna saat terdapat konten pada suatu sel yang memiliki perbedaan ketinggian terhadap konten di sebelahnya. Atribut valign akan mengubah penampakan konten yang memiliki ukuran yang lebih kecil agar setara dengan konten pada tabel sel sebelahnya.
Saat konten pada suatu tabel sel memiliki ukuran yang berbeda baik itu dari segi banyaknya huruf, maupun jenis penggunaan font size, maka tabel sel di sebelahnya tidak akan terlihat seimbang. Atribut valign pada HTML dapat digunakan untuk mengatur perataan sel (alignment) ke arah posisi vertikal.
Penulisan Syntax:
<td valign="nilai"></td>
Berikut ini adalah contoh dari penggunaan HTML atribut valign pada tabel :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
<title>Latihan Menggunakan HTML Atribut Valign</title>
<style>
table tr th,table tr td{border:solid 1px #aaa;}
</style>
</head>
<body>
<h1>Latihan Menggunakan HTML Atribut Valign</h1>
<table>
<tr><th width=110>Item</th><th>Desc</th></tr>
<tr>
<td valign="top">Lorem ipsum1</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ut iure quisquam consequuntur id, iusto vitae molestiae assumenda ipsam eaque ipsa sit porro earum alias ratione.</td>
</tr>
<tr>
<td valign="bottom">Lorem ipsum2</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ut iure quisquam consequuntur id, iusto vitae molestiae assumenda ipsam eaque ipsa sit porro earum alias ratione.</td>
</tr>
<tr>
<td valign="middle">Lorem ipsum3</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ut iure quisquam consequuntur id, iusto vitae molestiae assumenda ipsam eaque ipsa sit porro earum alias ratione.</td>
</tr>
<tr>
<td valign="baseline">Lorem ipsum4</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ut iure quisquam consequuntur id, iusto vitae molestiae assumenda ipsam eaque ipsa sit porro earum alias ratione.</td>
</tr>
</table>
</body>
</html>
Jika dijalankan pada browser akan menghasilkan tampilan sebagai berikut :
Nilai atribut valign pada tabel :
| Nilai Attribut | Penjelasan |
|---|---|
| top | Membuat konten pada posisi di atas |
| middle | Membuat konten pada posisi di tengah |
| bottom | Membuat konten pada posisi di bawah |
| baseline | Membuat konten pada posisi di baseline, konten sejajar dengan teks |
Jika atribut valign tidak ditetapkan maka nilai default yang diterapkan adalah nilai middle. Jika atribut valign diterapkan pada HTML tag element <tr> (Table Row) maka perataan akan mempengaruhi keseluruhan bagian elemen di dalamnya (Table Data). Namun jika penerapannya hanya pada bagaian HTML tag element <td>, maka hanya pada elemen <td> tersebut yang akan terpengaruh.
Atribut Valign Deprecated Pada HTML5
Atribut valign digunakan sebagai perataan konten vertikal pada tabel, namun sayangnya atribut ini sudah dianggap deprecated pada HTML5. Sebagai penggantinya silahkan menggunakan CSS untuk mengatur perataan konten secara vertikal pada tabel. Berikut ini contoh penataan vertical align dengan menggunakan CSS :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<head>
<title>Latihan Penataan Perataan Vertikal Dengan CSS</title>
<style>
table tr th,table tr td{border: solid 1px #ccc;}
.top{vertical-align: top;}
.middle{vertical-align: middle;}
.bottom{vertical-align: bottom;}
.initial{vertical-align: initial;}
.none{/* tak ada */}
</style>
</head>
<body>
<h1>Belajar Penataan Perataan Vertikal Dengan CSS</h1>
<table>
<tr><th width=110>Item</th><th>Description</th></tr>
<tr>
<td class="top">Lorem ipsum1</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ut iure quisquam consequuntur id, iusto vitae molestiae assumenda ipsam eaque ipsa sit porro earum alias ratione.</td>
</tr>
<tr>
<td class="bottom">Lorem ipsum2</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ut iure quisquam consequuntur id, iusto vitae molestiae assumenda ipsam eaque ipsa sit porro earum alias ratione.</td>
</tr>
<tr>
<td class="middle">Lorem ipsum3</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ut iure quisquam consequuntur id, iusto vitae molestiae assumenda ipsam eaque ipsa sit porro earum alias ratione.</td>
</tr>
<tr>
<td class="initial">Lorem ipsum4</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ut iure quisquam consequuntur id, iusto vitae molestiae assumenda ipsam eaque ipsa sit porro earum alias ratione.</td>
</tr>
<tr>
<td class="none">Lorem ipsum5</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ut iure quisquam consequuntur id, iusto vitae molestiae assumenda ipsam eaque ipsa sit porro earum alias ratione.</td>
</tr>
</table>
</body>
</html>
Jika dijalankan akan menghasilkan tampilan :
Tutorial HTML
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
Previous Page
