CSS 表格
CSS表格與表單是網(wǎng)頁(yè)上最常見(jiàn)的元素，表格除了顯示數(shù)據(jù)外，還常常被用來(lái)排版。
一 表格邊框帶顏色
面的例子指定了一個(gè)表格的Th，TD元素和th元素的文本和背景顏色邊框：
<!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>為了顯示一個(gè)表的單個(gè)邊框，使用 border-collapse屬性。
二 表格寬度和高度
Width和height屬性定義表格的寬度和高度。
<!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>汽車(chē)品牌</th>
<th>產(chǎn)地</th>
</tr>
<tr>
<td>馬自達(dá)</td>
<td>日本</td>
</tr>
<tr>
<td>菲亞特</td>
<td>意大利</td>
</tr>
<tr>
<td>林肯</td>
<td>美國(guó)</td>
</tr>
</table>
</body>三 表格文字對(duì)齊
text-align屬性設(shè)置水平對(duì)齊方式，像左，右，或中心
vertical-align 垂直對(duì)齊屬性設(shè)置垂直對(duì)齊，比如頂部，底部或中間
<!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>汽車(chē)品牌</th>
<th>產(chǎn)地</th>
</tr>
<tr>
<td>馬自達(dá)</td>
<td>日本</td>
</tr>
<tr>
<td>菲亞特</td>
<td>意大利</td>
</tr>
<tr>
<td>林肯</td>
<td>美國(guó)</td>
</tr>
</table>
</body>
