Contoh Style CSS Tabel HTML Sederhana

Jika tabel di HTML tidak dikasih style, tampilannya kurang sedap dilihat. Maka dari itu tabel butuh dikasih style sedikit biar terlihat bagus meskipun sederhana.

Paling penting adalah border, jika tidak pakai style khusus, border tabel di HTML jelek banget.

Berikut ini adalah contoh style tabel yang biasa saya gunakan untuk membuat tabel terlihat lebih bagus sedikit.

<style>
table {
    border-collapse: collapse;
    width: 100%;
}
th {
    height: 30px;
    text-align: center;
}
table, th, td {
    border: 1px solid black;
}
th, td {
    padding: 5px;
}
.center {
    text-align: center;
}
</style>

Contoh penggunaan tabelnya di HTML.

<table>
    <thead>
        <tr>
            <th>No</th>
            <th>NIM</th>
            <th>Nama</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="center">1</td>
            <td class="center">123</td>
            <td>Irman</td>
        </tr>
        <tr>
            <td class="center">2</td>
            <td class="center">124</td>
            <td>Firmansyah</td>
        </tr>
    </tbody>
</table>

Biasa saya gunakan untuk membuat PDF dari halaman HTML. Karena jika tidak pakai style tabelnya default banget dan kurang bagus untuk dibuat laporan PDF.

Saya tulis disini contoh style tabel nya biar gak lupa, dan kalau kapan-kapan butuh lagi bisa cari di blog sendiri. Semoga bermanfaat.

Leave a Reply