Mengatur Text Alignment Table dengan CSS

Oleh Unknown

Monday, September 14, 2015

Mengatur Text Alignment Table dengan CSS - Sebelum mulai membahas alignment table ini, untuk mendapatkan pemahaman yang lengkap, sebaiknya konco sinahu menengok kembali pembahasan CSS table sebelumnya tentang Mengatur table border dan mengatur width dan height suatu table dengan CSS. Karena satu sama lain saling berhubungan untuk pembuatan table dengan CSS.

Alignment table adalah jenis perintah untuk meratakan teks yang ada dalam table. Ada dua jenis alignment; Horizontal Text Alignment dan Vertical Text Alignment.

Horizontal Text Alignment

Berfungsi untuk mengatur rata teks secara horizontal. Bisa rata kiri (left), rata kanan (right), atau rata tengah (center). Properti CSS yang digunakan untuk fungsi ini adalah text-align.

Jika kita membuat suatu table dasar, maka secara default teks yang ada pada elemen table heading <th> menjadi rata tengah. Sedangkan teks yang ada pada table data <td> menjadi rata kiri. Nah, dengan properti CSS text-align ini kita bisa mengatur rata teks nya sesuai keinginan.

Di bawah ini adalah contoh coding membuat table dengan <th> dan <td> rata tengah semuanya.


<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
    border: 1px solid black;
    border-collapse: collapse;
}

table {
    width: 100%;
}

th, td {
    text-align: center;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
    <th>Usia</th>
  </tr>
  <tr>
    <td>Joko</td>
    <td>Tole</td>
    <td>45</td>
  </tr>
  <tr>
    <td>Koplak</td>
    <td>Somplak</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Lolak</td>
    <td>Lolok</td>
    <td>35</td>
  </tr>
  <tr>
    <td>Tono</td>
    <td>Tini</td>
    <td>27</td>
</tr>
</table>

</body>
</html>

Maka hasil dari script kode tersebut adalah seperti berikut :

Mengatur Text Alignment Table dengan CSS

Kamu bisa merubah rata teks dengan mengganti value text-align menjadi left, right, atau center.

Vertical Text Alignment

Berfungsi untuk mengatur rata teks secara vertikal. Bisa rata atas (top), rata bawah (bottom), atau tengah (middle). Secara default, saat kita membuat suatu table, maka table heading <th> dan table data <td> akan tersetting vertical alignment teks nya menjadi rata tengah (middle). Properti CSS yang digunakan untuk fungsi ini adalah vertical-align.

Nah, di bawah contoh table dengan vertical alignment table data <td> nya adalah bottom (bawah).


<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
    border: 1px solid black;
}

td {
    height: 50px;
    vertical-align: bottom;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>Jono</td>
    <td>Handoko</td>
    <td>55</td>
  </tr>
  <tr>
    <td>Luiz</td>
    <td>Sujono</td>
    <td>38</td>
  </tr>
  <tr>
    <td>Kowe</td>
    <td>Santoso</td>
    <td>27</td>
  </tr>
  <tr>
    <td>Susi</td>
    <td>Sukini</td>
    <td>43</td>
</tr>
</table>

</body>
</html>

Maka hasilnya menjadi seperti ini :

Sekian pembahasan tentang cara Mengatur Text Alignment Table dengan CSS. Semoga bisa dipahami. Sampai jumpa pada pembahasan belajar CSS yang lain.

2 Komentar untuk "Mengatur Text Alignment Table dengan CSS"

Balas

Mas Zuhdi

August 6, 2016 at 12:21 PM

Terima kasih infonya mas, baru tau saya kalau ada script vertical-align, berguna sekali mas terima kasih!

Unknown

October 2, 2018 at 8:12 PM

trmksh artikelnya min, untuk mengatur text alignment table dengan CSS untuk mengatur rata teks secara horizontal bisa rata kiri (left), rata kanan (right), atau rata tengah (center), properti CSS yang akn dgunakan untuk fungsi ini dg menggunakan text-align.
Kunjungi website sy ya: https://yuliyani.mahasiswa.atmaluhur.ac.id
Dan kunjungi website kmps sy: http://www.atmaluhur.ac.id