jadual CSS

Jadual dan borang CSS adalah elemen yang paling biasa pada halaman web Selain memaparkan data, jadual sering digunakan untuk reka letak.

Sempadan jadual dengan warna

Contoh di atas menentukan teks dan teks unsur Th, TD dan elemen ke dalam jadual Jidar warna latar belakang:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title>
<style type="text/css">
table.gridtable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
}
table.gridtable th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #dedede;
}
table.gridtable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #ffffff;
}
</style>
</head>
<body>
<!-- Table goes in the document BODY -->
<table class="gridtable">
<tr>
    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
    <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
    <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</table>
</body>
</html>

Untuk memaparkan satu jidar jadual, gunakan atribut runtuhan sempadan.

2 Lebar dan tinggi jadual

Atribut Lebar dan tinggi mentakrifkan lebar dan tinggi jadual.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
table,td,th
{
border:1px solid black;
}
table
{
width:50%;
}
th
{
height:50px;
}
</style>
</head>
<body>
<table>
<tr>
<th>汽车品牌</th>
<th>产地</th>
</tr>
<tr>
<td>马自达</td>
<td>日本</td>
</tr>
<tr>
<td>菲亚特</td>
<td>意大利</td>
</tr>
<tr>
<td>林肯</td>
<td>美国</td>
</tr>
</table>
</body>

Tiga Penjajaran teks jadual

Atribut penjajaran teks menetapkan penjajaran mendatar , Seperti kiri, kanan atau tengah

sifat jajar menegak menetapkan penjajaran menegak, seperti atas, bawah atau tengah

<!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>汽车品牌</th>
<th>产地</th>
</tr>
<tr>
<td>马自达</td>
<td>日本</td>
</tr>
<tr>
<td>菲亚特</td>
<td>意大利</td>
</tr>
<tr>
<td>林肯</td>
<td>美国</td>
</tr>
</table>
</body>


Meneruskan pembelajaran
||
<html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> table.imagetable { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px; border-color: #999999; border-collapse: collapse; } table.imagetable th { background-color: #f0ffff; border-width: 1px; padding: 8px; border-style: solid; border-color: #999999; } table.imagetable td { background-color: #f0fff0; border-width: 1px; padding: 8px; border-style: solid; border-color: #999999; } </style> </head> <body> <table class="imagetable"> <tr> <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th> </tr> <tr> <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td> </tr> <tr> <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td> </tr> </table> </body> </html>