Jadual CSS
Menggunakan CSS boleh menambah baik penampilan jadual HTML.
Sempadan jadual
Tentukan sempadan jadual CSS menggunakan atribut sempadan.
Contoh berikut menentukan sempadan hitam untuk elemen Th dan TD jadual:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
table,th,td
{
border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>数学</th>
<th>语文</th>
</tr>
<tr>
<td>90</td>
<td>98</td>
</tr>
<tr>
<td>95</td>
<td>94</td>
</tr>
</table>
</body>
</html>Jalankan atur cara untuk mencubanya
Nota : Jadual dalam contoh di atas mempunyai sempadan berganda. Ini kerana jadual dan elemen th/td mempunyai sempadan yang berasingan.
Untuk memaparkan satu jidar jadual, gunakan atribut runtuhan sempadan.
Rubuhkan jidar
Sifat runtuh sempadan menetapkan sama ada jidar jadual diruntuhkan menjadi satu jidar atau pemisah Buka:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>数学</th>
<th>语文</th>
</tr>
<tr>
<td>90</td>
<td>98</td>
</tr>
<tr>
<td>95</td>
<td>94</td>
</tr>
</table>
</body>
</html>Jalankan program dan cuba
Lebar dan tinggi jadual
Lebar dan atribut ketinggian mentakrifkan lebar dan tinggi jadual.
Contoh berikut ialah jadual yang menetapkan lebar 100% dan ketinggian elemen ke 50 piksel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
table,td,th
{
border:1px solid black;
}
table
{
width:100%;
}
th
{
height:50px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>0</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>0</td>
</tr>
</table>
</body>
</html>Jalankan atur cara untuk mencubanya
Penjajaran teks jadual
Penjajaran teks dan sifat penjajaran menegak dalam jadual.
Atribut penjajaran teks menetapkan penjajaran mendatar, seperti kiri, kanan atau tengah:
Contoh
rreeeJalankan program dan cuba
Instance
Sifat penjajaran menegak menetapkan penjajaran menegak, seperti atas, bawah atau tengah:
rreeeJalankan program untuk mencubanya
Pelapik meja
Pelapik td dan elemen ke harus digunakan jika sempadan antara ruang dikawal dalam kandungan jadual Atribut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
table,td,th
{
border:1px solid black;
}
td
{
text-align:right;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>0</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>0</td>
</tr>
</table>
</body>
</html>Jalankan program dan cuba
Warna jadual
Contoh berikut menentukan warna sempadan dan teks serta warna latar belakang elemen ke:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
table, td, th
{
border:1px solid black;
}
td
{
height:50px;
vertical-align:bottom;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>0</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>0</td>
</tr>
</table>
</body>
</html>Jalankan atur cara untuk mencubanya
Contoh
Buat jadual yang diperibadikan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
table, td, th
{
border:1px solid black;
}
td
{
padding:15px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>0</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>0</td>
</tr>
</table>
</body>
</html>Jalankan program dan cuba
