HTML基礎教學表格標籤
表格標籤
#網頁中有類似word裡面的功能，當然，也會有類似excel裡面的功能，表格就是其中之一
表格的結構
<table>
<tr>
;</td> <td></td>; <td></td> ;
</tr>
<tr>
<td></ td>
<td></td>
</tr>
< ;/table>
#<table>屬性
- #Width：表格寬度，單位可以是百分比，也可以是固定值。
- Height：表格高度。
- Align：表格水平對齊方式，取值：left、center、right
- Border：邊框粗細。
- Bordercolor：邊框顏色。
- bgColor：表格背景色。
- background：背景圖片URL。
- cellpadding：儲存格邊線到內容間的距離(填滿距離)
cellspacing：儲存格與儲存格之間的距離(間距)
rules：合併儲存格邊框線，取值：all
## 注意：rules相容性不好，請使用CSS來取代它。
我們來實際畫一個表格吧<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<table border="2" width="300" height="100" bordercolor="blue" bgColor="#88cc66" cellspacing="0" cellpadding="2" rules="all">
<tr>
<td>工号</td>
<td>姓名</td>
<td>职位</td>
</tr>
<tr>
<td>001</td>
<td>小明</td>
<td>设计师</td>
</tr>
<tr>
<td>002</td>
<td>小方</td>
<td>工程师</td>
</tr>
<tr>
<td>003</td>
<td>小白</td>
<td>程序员</td>
</tr>
</table>
</body>
</html>
- <tr>屬性－行標記
#bgColor：行的背景顏色
######### height：行的高度############ align：行中的文字水平居中，取值：left、center、right###valign：垂直居中，取值：top(上)、middle(中)、 bottom(下)
<td>或<th>屬性
< td>是普通單元格，<th>是標題單元各，居中加粗顯示。
width：儲存寬度
# height：儲存格高度
- ## bgColor ：儲存格背景色
- background：儲存格背景圖片
- align：水平對齊
- valign：垂直水齊
- rowspan：上下儲存格合併。合併屬性必須放在第一個儲存格中。
- colspan：左右儲存格合併。合併時，有增就得有減，要確保每一行單元格的個數不變。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <table border="2" width="400" height="100" bordercolor="blue" bgColor="#88cc66" cellspacing="0" cellpadding="2" rules="all"> <tr bgColor="red" align="center"> <th>星期日</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> <th>星期六</th> </tr> <tr bgColor="yellow" align="center"> <td height="50">25</td> <td>26</td> <td>27</td> <td>28</td> <td>29</td> <td>30</td> <td>1</td> </tr> <tr align="center"> <td height="50">2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> </table> </body> </html>
註：屬性是區分大小寫的，bgColor如果寫成bgcolor是沒有效果的
#大家可以將每個屬性都輸入，查看輸出效果
caption標籤
#為表格新增標題與摘要
摘要
#摘要的內容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜尋引擎更好的讀懂表格內容，還可以使螢幕閱讀器更好的幫助特殊使用者讀取表格內容。
語法：<table summary="表格簡介文字">
#標題用以描述表格內容，標題的顯示位置：表格上方。
語法：
<table> <caption>標題文字</caption>
<tr>
<td<tr>
<td<tr>
gt; ## <td>…</td>
</tr>…</table>
#;<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<table border="2" width="400" height="100" bordercolor="blue" bgColor="#88cc66" cellspacing="0" cellpadding="2" rules="all"summary="日历信息">
<caption>2016.10日历</caption>
<tr bgColor="red" align="center">
<th>星期日</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
</tr>
<tr bgColor="yellow" align="center">
<td height="50">25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>1</td>
</tr>
<tr align="center">
<td height="50">2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
</body>
</html>
