CSS Tables

Table Borders

Untuk menentukan batas tabel dalam CSS, menggunakan properti perbatasan.

Contoh di bawah menentukan batas hitam untuk <table>, <th>, dan <td> elemen:

table, th, td {
   border: 1px solid black;
}

Perhatikan bahwa tabel dalam contoh di atas memiliki batas ganda. Hal ini karena kedua tabel dan <th> / <td> elemen memiliki perbatasan terpisah.

Untuk menampilkan perbatasan tunggal untuk meja, menggunakan properti border-collapse.

Collapse Borders

Properti border-collapse mengatur apakah perbatasan tabel runtuh ke dalam perbatasan tunggal atau terpisah:

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

Table Width and Height

Lebar dan tinggi tabel didefinisikan oleh lebar dan tinggi sifat.

Contoh di bawah set lebar tabel untuk 100%, dan ketinggian <th> elemen untuk 50px:

table {
    width: 100%;
}

th {
    height: 50px;
}

Horizontal Text Alignment

Properti text-align set alignment horisontal, seperti kiri, kanan, atau tengah.

Secara default, teks dalam <th> elemen adalah pusat-aligned dan teks dalam <td> elemen yang tersisa-blok.

Contoh berikut kiri meluruskan teks dalam <th> elemen:

th {
    text-align: left;
}

Vertical Text Alignment

Properti vertical-align menetapkan alignment vertikal, seperti atas, bawah, atau tengah.

Secara default, alignment vertikal teks dalam tabel adalah menengah (untuk kedua <th> dan <td> elemen).

Contoh berikut menetapkan alignment teks vertikal ke bawah untuk <td> elemen:

td {
    height: 50px;
    vertical-align: bottom;
}

Table Padding

Untuk mengontrol ruang antara perbatasan dan konten dalam sebuah tabel, menggunakan properti padding di <td> dan <th> elemen:

td {
    padding: 15px;
}

Table Color

Contoh di bawah menentukan warna perbatasan, dan warna teks dan latar belakang <th> elemen:

table, td, th {
    border: 1px solid green;
}

th {
    background-color: green;
    color: white;
}