亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

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中文網(wǎng)(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>產(chǎn)地</th>
</tr>
<tr>
<td>馬自達(dá)</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中文網(wǎng)(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>產(chǎn)地</th>
</tr>
<tr>
<td>馬自達(dá)</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中文網(wǎng)(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>