Latest web development tutorials

CSS Table (meja)

Gunakan CSS dapat sangat meningkatkan penampilan tabel HTML.

perusahaan kontak negara
Alfreds Futterkiste Maria Anders Jerman
Berglunds snabbkop Christina Berglund Swedia
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Perdagangan pulau Helen Bennett UK
Koniglich Essen philip Cramer Jerman
Tertawa Bacchus Winecellars Yoshi Tannamuri Kanada
Magazzini Alimentari Riuniti Giovanni Rovelli Italia
Utara / Selatan Simon Crowther UK
Paris specialites Marie Bertrand Prancis
The Big Cheese Liz Nixon Amerika Serikat
Vaffeljernet Palle Ibsen Denmark

tabel Perbatasan

Menentukan batas tabel CSS, menggunakan properti perbatasan.

Contoh berikut menetapkan tabel perbatasan hitam Th dan elemen TD:

contoh

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

Coba »

Perhatikan bahwa dalam contoh di atas, tabel memiliki perbatasan ganda. Hal ini karena meja dan th / elemen td memiliki perbatasan terpisah.

Dalam rangka untuk menampilkan satu frame dari meja, menggunakan properti border-collapse.

bingkai lipat

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

contoh

tabel
{
border-collapse: collapse;
}
meja, th, td
{
border: 1px solid hitam;
}

Coba »


lebar meja dan tinggi

Lebar dan atribut tinggi menentukan lebar dan tinggi tabel.

Contoh berikut diatur dengan lebar 100% table ketinggian 50 piksel th elemen:

contoh

table
{
width:100%;
}
th
{
height:50px;
}

Coba »


keselarasan bentuk teks

perataan teks meja dan sifat vertical alignment.

Properti text-align diatur keselarasan horisontal, seperti kiri, kanan, atau pusat:

contoh

td
{
text-align:right;
}

Coba »

properti pengaturan keselarasan vertikal vertical-align, seperti atas, bawah, atau tengah:

contoh

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

Coba »


pengisian formulir

Jika ruang antara kontrol perbatasan di daftar isi, Anda harus menggunakan td atribut fill dan elemen th:

contoh

td
{
padding:15px;
}

Coba »


tabel warna

Contoh berikut menentukan warna perbatasan, dan elemen th teks dan warna latar belakang:

contoh

table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}

Coba »


contoh

contoh yang lebih

Membuat bentuk personalisasi
Contoh ini menunjukkan bagaimana untuk membuat bentuk pribadi.

Mengatur posisi judul tabel
Contoh ini menunjukkan bagaimana posisi header tabel.