Kursus Membuat Web

iklan

Table CSS

Tampilan tabel dari HTML bisa dibuat menjadi sangat cantik dengan CSS:

Border Tabel

Untuk menentukan border tabel di CSS, gunakan property border.

Contoh dibawah ini menentukan border berwarna hitam untuk elemen <table>, <th>, dan <td> :

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

Perhatikan contoh tabel diatas memiliki double border. Ini karena kedua elemen <table> dan <th>/<td> memiliki border masing-masing.

Untuk menampilkan single border untuk tabel, gunakan property border-collapse.

Border Collapse

Property border-collapse mengatur apakah border tabel collapse kedalam single border atau dipisah:

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

Lihat ...

Lebar dan Tinggi Tabel

Lebar dan Tinggi dari tabel didefinisikan dengan property width dan height.

Contoh dibawah ini mengatur lebar dari tabel ke 100%, dan tinggi dari elemen <th> ke 50px:

Background image halaman dapat diatur seperti ini :

Contoh
table, td, th {
    border: 1px solid black;
}
table {
    width: 100%;
}
th {
    height: 50px;
}
Lihat ...

Horizontal Text Alignment

Property text-align mengatur horizontal alignment, seperti kiri, kanan, atau tengah.

Secara default, teks didalam elemen <th> adalah teks diketengahkan dan teks di elemen <td> adalah teks kiri.

Contoh berikut ini membuat teks rata kiri di elemen <th>:

Contoh
table, td, th {
    border: 1px solid black;
}
table {
    width: 100%;
}
th {
    text-align: left;
}
Lihat ...

Vertical Text Alignment

Property vertical-align mengatur vertical alignment, seperti atas, bawah, atau tengah.

Secara default, vertical alignment dari teks dalam tabel adalah middle (untuk elemen <th> dan <td>).

Contoh berikut ini mengatur vertical teks alignment ke bawah untuk elemen <td>:

table, td, th {
    border: 1px solid black;
}
td {
    height: 50px;
    vertical-align: bottom;
}
Lihat ...

Padding Tabel

Untuk mengontrol spasi antara border dan isi dalam tabel, gunakan property padding di elemen <td> dan <th>:

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

td {
    padding: 15px;
}
Lihat ...

Warna Tabel

Contoh dibawah ini menentukan warna dari border, teks dan background dari elemen <th>:

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

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

Contoh - Contoh Lain

#customers {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    width: 100%;
    border-collapse: collapse;
}

#customers td, #customers th {
    font-size: 1em;
    border: 1px solid #98bf21;
    padding: 3px 7px 2px 7px;
}

#customers th {
    font-size: 1.1em;
    text-align: left;
    padding-top: 5px;
    padding-bottom: 4px;
    background-color: #A7C942;
    color: #ffffff;
}

#customers tr.alt td {
    color: #000000;
    background-color: #EAF2D3;
}

Membuat tabel yang indah

Contoh ini menunjukkan bagaimana membuat tabel yang indah.

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

caption {
    caption-side: bottom;
}

Mengatur posisi judul tabel

Contoh ini menunjukkan bagaimana mengatur posisi judul tabel.

Sebelumnya ...   Berikutnya ...

muhammad falah

Saya Muhammad Falah, jika Anda ingin langsung belajar dengan Saya, silakan ikuti kursus membuat web yang Saya bimbing atau ikuti Saya di :

Muhammad Falah Youtube Channel Muhammad Falah LinkedIn Muhammad Falah Google Plus Muhammad Falah Twitter Muhammad Falah Facebook

copy right © 2015