masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Jadual CSS

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


Meneruskan pembelajaran
||
<!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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492417 permainan