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 width dan height. Dan pada kesempatan masih melanjutkan table cuman akan membahas Atribut Align pada HTML.Align bisa mengubah posisi table dengan nilai atribut left, center, right. Atribut Align 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 Atribut Align, mari kita langsung praktik. Contoh :
Kode HTML
<!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>
<table border="1" width="400" align="left">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Adipisci doloribus ad recusandae! Quia cupiditate temporibus porro laboriosam dolorem
facere ab tenetur similique nisi libero, aliquid, quam fuga, delectus illo provident.
</p>
<table border="1" width="400" align="center">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Adipisci doloribus ad recusandae! Quia cupiditate temporibus porro laboriosam dolorem
facere ab tenetur similique nisi libero, aliquid, quam fuga, delectus illo provident.
</p>
<table border="2" width="400" align="right">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Adipisci doloribus ad recusandae! Quia cupiditate temporibus porro laboriosam dolorem
facere ab tenetur similique nisi libero, aliquid, quam fuga, delectus illo provident.
</p>
</body>
</html>
 |
| Gambar 1 kode table align |
 |
| Gambar 2 hasil kode table align |
Kita buat jadi satu table, dengan cara nya seperti ini:
Kode HTML:
<!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>
<table border="2" width="400">
<tr>
<td align="right">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Blanditiis magni adipisci quo fugit qui exercitationem ullam earum quam eaque quia repellat.
nihil, deleniti eligendi nemo illo consequatur possimus mollitia doloremque.
</td>
</tr>
<tr>
<td align="center">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Blanditiis magni adipisci quo fugit qui exercitationem ullam earum quam eaque quia repellat,
nihil, deleniti eligendi nemo illo consequatur possimus mollitia doloremque.
</td>
</tr>
<tr>
<td align="left">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Blanditiis magni adipisci quo fugit qui exercitationem ullam earum quam eaque quia repellat,
nihil, deleniti eligendi nemo illo consequatur possimus mollitia doloremque.
</td>
</tr>
</table>
</body>
</html>
 |
| Gambar 3 kode-table-align-2 |
 |
| Gambar 4 hasil-kode-table-align-2 |
Okay, selanjutnya akan kita buat atribut align menggunakan CSS. Mari langsung praktikan:
Kode HTML:
<!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>
<table border="2" width="400">
<tr>
<td style="text-align: left;">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Blanditiis magni adipisci quo fugit qui exercitationem ullam earum quam eaque quia repellat,
nihil, deleniti eligendi nemo illo consequatur possimus mollitia doloremque.
</td>
</tr>
<tr>
<td style="text-align: center;">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Blanditiis magni adipisci quo fugit qui exercitationem ullam earum quam eaque quia repellat,
nihil, deleniti eligendi nemo illo consequatur possimus mollitia doloremque.
</td>
</tr>
<tr>
<td style="text-align: right;">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Blanditiis magni adipisci quo fugit qui exercitationem ullam earum quam eaque quia repellat,
nihil, deleniti eligendi nemo illo consequatur possimus mollitia doloremque.
</td>
</tr>
</table>
</body>
</html>
 |
| Gambar 5 kode table align menggunakan CSS |
 |
| Gambar 6 hasil kode table align menggunakan CSS |
Kesimpulan
Pembahasan tentang atribut align 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
mantap min lagi artikelnya x-)
BalasHapus8-) :-s :-b
BalasHapus