CSS 表格
CSS表格與表單是網頁上最常見的元素，表格除了顯示數據外，還常常被用來排版。
一 ?表格邊框帶顏色
面的例子指定了一個表格的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>為了顯示一個表的單個邊框，使用 border-collapse屬性。
二 ?表格寬度和高度
Width和height屬性定義表格的寬度和高度。
<!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>三?表格文字對齊
text-align屬性設置水平對齊方式，像左，右，或中心
vertical-align?垂直對齊屬性設置垂直對齊，比如頂部，底部或中間
<!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>
