HTML基礎(chǔ)教學(xué)表格標(biāo)籤
表格標(biāo)籤
#網(wǎng)頁中有類似word裡面的功能，當(dāng)然，也會(huì)有類似excel裡面的功能，表格就是其中之一
表格的結(jié)構(gòu)
<table>
????????<tr>
?;</td>????????????????<td></td>?;????????????????<td></td> ;
????????</tr>
????????<tr>
????????????????<td></ td>
????????????????<td></td>
????????</tr>
< ;/table>
#<table>屬性
- #Width：表格寬度，單位可以是百分比，也可以是固定值。
- ?Height：表格高度。
- ?Align：表格水平對(duì)齊方式，取值：left、center、right
- ?Border：邊框粗細(xì)。
- ?Bordercolor：邊框顏色。
- ?bgColor：表格背景色。
- ?background：背景圖片URL。
- ?cellpadding：儲(chǔ)存格邊線到內(nèi)容間的距離(填滿距離)
?cellspacing：儲(chǔ)存格與儲(chǔ)存格之間的距離(間距)
?rules：合併儲(chǔ)存格邊框線，取值：all
##?注意：rules相容性不好，請(qǐng)使用CSS來取代它。
我們來實(shí)際畫一個(gè)表格吧<!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>工號(hào)</td>
<td>姓名</td>
<td>職位</td>
</tr>
<tr>
<td>001</td>
<td>小明</td>
<td>設(shè)計(jì)師</td>
</tr>
<tr>
<td>002</td>
<td>小方</td>
<td>工程師</td>
</tr>
<tr>
<td>003</td>
<td>小白</td>
<td>程序員</td>
</tr>
</table>
</body>
</html>
- <tr>屬性－行標(biāo)記
#bgColor：行的背景顏色
#########?height：行的高度############?align：行中的文字水平居中，取值：left、center、right###valign：垂直居中，取值：top(上)、middle(中)、 bottom(下)
?
<td>或<th>屬性
< td>是普通單元格，<th>是標(biāo)題單元各，居中加粗顯示。
?width：儲(chǔ)存寬度
#?height：儲(chǔ)存格高度
- ##?bgColor ：儲(chǔ)存格背景色
- ?background：儲(chǔ)存格背景圖片
- ?align：水平對(duì)齊
- ?valign：垂直水齊
- rowspan：上下儲(chǔ)存格合併。合併屬性必須放在第一個(gè)儲(chǔ)存格中。
- ?colspan：左右儲(chǔ)存格合併。合併時(shí)，有增就得有減，要確保每一行單元格的個(gè)數(shù)不變。
<!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>
註：屬性是區(qū)分大小寫的，bgColor如果寫成bgcolor是沒有效果的
#大家可以將每個(gè)屬性都輸入，查看輸出效果
caption標(biāo)籤
#為表格新增標(biāo)題與摘要
摘要
#摘要的內(nèi)容是不會(huì)在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜尋引擎更好的讀懂表格內(nèi)容，還可以使螢?zāi)婚喿x器更好的幫助特殊使用者讀取表格內(nèi)容。
?語法：<table summary="表格簡(jiǎn)介文字">
#標(biāo)題用以描述表格內(nèi)容，標(biāo)題的顯示位置：表格上方。
語法：
<table> ? ?<caption>標(biāo)題文字</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>
