Tutorial Blog, Tips Blogging, SEO, Belajar Syntax HTML, PHP, CSS, dan Aktifitas Coding Lainnya

Mengatur Text Alignment Table dengan CSS

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 :

Mengatur Text Alignment Table dengan CSS

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"

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

Langsung berhasil menerapkan valign, makasih banyak ya mas :)

Kunjungan Balik Ya -> Jam Tangan Unik

Back To Top