HTML基礎(chǔ)教程之表格標(biāo)簽
表格標(biāo)簽
網(wǎng)頁中有類似word里面的功能，當(dāng)然，也會有類似excel里面的功能，表格就是其中之一
表格的結(jié)構(gòu)
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table>屬性
Width：表格寬度，單位可以是百分比，也可以是固定值。
Height：表格高度。
Align：表格水平對齊方式，取值：left、center、right
Border：邊框粗細(xì)。
Bordercolor：邊框顏色。
bgColor：表格背景色。
background：背景圖片URL。
cellpadding：單元格邊線到內(nèi)容間的距離(填充距離)
cellspacing：單元格與單元格之間的距離(間距)
rules：合并單元格邊框線，取值：all
注意：rules兼容性不好，請使用CSS來取代它。
我們來實(shí)際畫一個表格吧
<!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>設(shè)計師</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：單元格寬度
height：單元格高度
bgColor：單元格背景色
background：單元格背景圖片
align：水平對齊
valign：垂直水齊
rowspan：上下單元格合并。合并屬性必須放在第一個單元格中。
colspan：左右單元格合并。合并時，有增就得有減，要保證每一行單元格的個數(shù)不變。
實(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是沒有效果的
大家可以將每個屬性都輸入，查看輸出效果
caption標(biāo)簽
為表格添加標(biāo)題和摘要
摘要
摘要的內(nèi)容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內(nèi)容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內(nèi)容。
語法：<table summary="表格簡介文本">
標(biāo)題
用以描述表格內(nèi)容，標(biāo)題的顯示位置：表格上方。
語法：
<table> <caption>標(biāo)題文本</caption>
<tr>
<td>…</td>
<td>…</td>
…
</tr>
…
</table>
實(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"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>
