Jadual CSS
Menggunakan CSS boleh meningkatkan penampilan jadual HTML dengan banyak.
Sifat Jadual CSS
Sifat jadual CSS boleh membantu anda meningkatkan penampilan jadual anda dengan sangat baik.
Sempadan jadual
Untuk menetapkan sempadan jadual dalam CSS, gunakan sifat sempadan.
Contoh berikut menetapkan sempadan biru untuk jadual, ke dan td:
jadual, ke, td
{
sempadan: 1px biru pepejal ;
}
Sila ambil perhatian bahawa jadual dalam contoh di atas mempunyai sempadan garisan dua. Ini kerana elemen jadual, th dan td mempunyai sempadan bebas.
Jika anda perlu memaparkan jadual sebagai sempadan satu baris, sila gunakan atribut runtuhan sempadan.
Rubuhkan jidar
sifat runtuh sempadan menetapkan sama ada jidar jadual diruntuhkan menjadi satu jidar atau dipisahkan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<p><b>注意；</b> 如果没有指定 !DOCTYPE border-collapse 属性在 IE8 及更早 IE 版本中是不起作用的。</p>
</body>
</html>Lebar dan ketinggian jadual
Sifat Lebar dan ketinggian menentukan lebar dan tinggi jadual.
Contoh berikut ialah jadual dengan lebar 100% dan ketinggian 50 piksel untuk elemen ke:
table
{
width:100%;
}
th
{
height:50px;
}Penjajaran teks jadual
Penjajaran teks dan sifat penjajaran menegak dalam jadual.
text-align属性设置水平对齐方式，像左，右，或中心：
td{text-align:right;}Sifat penjajaran menegak menetapkan penjajaran menegak, seperti atas, bawah atau tengah:
td
{
height:50px;
vertical-align:bottom;
}Isi jadual
Jika dalam Untuk mengawal sempadan antara ruang dalam kandungan jadual, atribut padding bagi elemen td dan th harus digunakan:
td
{
padding:15px;
}Warna Jadual
Contoh berikut menentukan warna jidar dan teks serta warna latar belakang elemen ke
rreee
bahagian seterusnya