Some text some message..
Some text some message..
Some text some message..
Some text some message..
  • Beranda
  • »
  • HTML
  • »
  • Atribut Align (Horizontal Align) Pada Tabel

Atribut Align (Horizontal Align) Pada Tabel

previous Previous Page

Sebuah sel di dalam suatu tabel secara default memiliki nilai perataan teks dengan rata kiri. Untuk mengatur perataan teks pada suatu tabel dilakukan dengan memberikan nilai pada atribut align. Seperti halnya elemen division, dan paragraf, tabel juga memiliki atribut align yang digunakan untuk perataan teks. Atribut align digunakan untuk mengatur perataan teks dengan berbagai nilai seperti rata kiri, rata kanan, rata tengah, rata justify (rata kanan kiri).

align horizontal alignment tabel

Jika nilai perataan teks ini ditempatkan pada elemen tabel row <tr>, maka seluruh tabel data <td> yang menginduk pada tabel baris <tr> akan mengikuti nilai yang ditetapkan pada tabel row tersebut. Misalnya <tr align="right">, maka tabel data <td> yang berada di tabel baris <tr> tersebut akan ditetapkan dengan nilai perataan kanan.

Penulisan Syntax:

<td align="left|right|center|justify">

Berikut ini contoh perataan teks pada tabel:

HTML

1.   <!DOCTYPE html>
2.  <html>
3.  <head>
4.     <title>Atribut align pada tabel</title>
5.  </head>
6.  <body>
7.     <h4>Menggunakan atribut align pada tabel</h4>
8.     <table border="1">
9.      <tr><th>Description</th></tr>
10.     <tr>
11.     <td align="left">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>
12.     </tr>
13.     <tr>
14.     <td align="center">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>
15.     </tr>
16.     <tr>
17.     <td align="right">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>
18.     </tr>
19.     <tr>
20.     <td align="justify">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>
21.     </tr>
22.    </table>
23. </body>
24. </html>
align horizontal alignment tabel

Nilai atribut valign pada tabel :

Nilai atributPenjelasan
leftMembuat konten dengan nilai perataan kiri
centerMembuat konten dengan nilai perataan tengah
rightMembuat konten dengan nilai perataan kanan
justifyMembuat konten dengan nilai perataan kiri dan kanan

Atribut align Deprecated Pada HTML5

Atribut align digunakan untuk meratakan konten pada tabel, namun sayangnya atribut ini sudah dianggap deprecated pada HTML5. Sebagai penggantinya silahkan menggunakan cascade style sheet (CSS) untuk mengatur perataan konten secara horisontal pada tabel. Berikut ini contoh pengaturan perataan konten dengan menggunakan CSS :

HTML

1.  <!DOCTYPE html>
2.  <html lang="en">
3.  <head>
4.     <meta charset="utf-8">
5.     <title>Demo Penataan align dengan style CSS</title>
6.     <style>
7.     .left{text-align: left;}
8.     .center{text-align: center;}
9.     .right{text-align: right;}
10.    .justify{text-align: justify;}
11.    </style>
12. </head>
13. <body>
14.    <h2>Penataan align dengan style CSS</h2>
15.    <table border="1">
16.     <tr><th>Description</th></tr>
17.     <tr>
18.     <td class="left">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>
19.     </tr>
20.     <tr>
21.     <td class="center">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>
22.     </tr>
23.     <tr>
24.     <td class="right">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>
25.     </tr>
26.     <tr>
27.     <td class="justify">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>
28.     </tr>
29.    </table>
30. </body>
31. </html>
32. 

Jika dijalankan akan menghasilkan gambar sebagai berikut :

align tabel

facebooktwittergoogle pluswhatapplinkedinpinterest

previous Previous Page

Daftar Isi HTML