Coba perhatikan tampilan Inbox pada GMail. Kalau kita cermati ternyata tampilan tabel pada Inbox GMail tersebut mempunyai ukuran yang seragam pada setiap barisnya, yaitu tingginya selalu sama antara baris satu dengan yang lainnya.
Setiap kali ada kolom tabel dengan panjang isi yang melebihi ukuran, pasti secara otomatis akan dipotong menyesuaikan dengan kolom tersebut. Hal inilah yang menjadikan tampilan tabel tersebut tampak seragam tidak seperti tabel biasanya. Pada umumnya kalau isi kolom suatu tabel melebihi ukurannya, pastilah tinggi kolom tersebut akan bertambah menyesuaikan dengan isinya.
Pertanyaannya sekarang, bagaimana cara membuat tampilan tabel semacam itu? Kalau kita browsing di Internet, ternyata metode yang digunakan bermacam-macam dan kebanyakan memakai kode JavaScript.
Cara lain yang lebih mudah dan sederhana yaitu menggunakan CSS (Cascading Style Sheet), seperti yang akan saya bahas pada tulisan kali ini. Kuncinya yaitu properti text-overflow. Sebagai contoh berikut ini ada sebuah tabel yang mempunyai ukuran isi bervariasi.
| No | Judul Tulisan | Isi |
|---|---|---|
| 1 | Trik Agar Website Cepat Terindeks Search Engine | Search engine adalah salah satu situs yang menjadi tujuan utama apabila orang ingin mencari informasi di Internet. |
| 2 | Menampilkan Icon Yahoo Messenger di Website | Banyak situs e-Commerce memanfaatkan Yahoo Messenger untuk berinteraksi dengan pelanggan. Kita bisa mengetahuinya dengan adanya icon Yahoo Messenger pada situs tersebut yang menunjukkan status Customer Service-nya apakah sedang online atau tidak. |
Pada tabel seperti di atas, semakin panjang ukuran isi yang menempati kolom sebelah kanan maka akan semakin besar pula ukuran kolom tersebut. Dengan CSS kita bisa mengatur agar secara otomatis jumlah karakter yang ada pada kolom tersebut mengikuti ukuran kolomnya.
Berikut ini trik sederhana untuk membuat tampilan tabel seperti pada GMail.
<html>
<head>
<title>GMail like Table</title>
<style>
.tbl {
table-layout: fixed;
border-collapse: collapse;
}
.tbl th {
padding: 3px 10px;
text-align: left;
border-bottom: 1px solid #ccc;
}
.tbl td {
border-bottom: 1px solid #ccc;
padding: 3px 10px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<table width="500" class="tbl">
<tr>
<th width="30">No</th>
<th width="150">Judul Tulisan</th>
<th>Isi</th>
</tr>
<tr>
<td>1</td>
<td>Trik Agar Website Cepat Terindeks Search Engine</td>
<td>Search engine adalah salah satu situs yang menjadi tujuan
utama apabila orang ingin mencari informasi di Internet.</td>
</tr>
<tr>
<td>2</td>
<td>Menampilkan Icon Yahoo Messenger di Website</td>
<td>Banyak situs e-Commerce memanfaatkan Yahoo Messenger untuk
berinteraksi dengan pelanggan. Kita bisa mengetahuinya dengan
adanya icon Yahoo Messenger pada situs tersebut yang menunjukkan
status Customer Service-nya apakah sedang online atau tidak.</td>
</tr>
</table>
</body>
</html>
Kalau kita lihat tampilannya pada IE 8 akan seperti gambar di bawah ini.
Sayangnya tidak semua browser menampilkan hasil yang sama. Pada IE 8, Safari dan Google Chrome hasilnya cukup bagus, tanda ellipsis (…) pada akhir baris muncul, akan tetapi pada Mozilla Firefox tanda ellipsis tersebut tidak kelihatan.
Barangkali ada yang mempunyai trik lain yang lebih dahsyat?
.
