表格標籤
#網頁中有類似word裡面的功能,當然,也會有類似excel裡面的功能,表格就是其中之一
表格的結構
<table>
<tr>
;</td> <td></td>; <td></td> ;
</tr>
<tr>
<td></ td>
<td></td>
</tr>
< ;/table>
#<table>屬性
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>
#bgColor:行的背景顏色
######### height:行的高度############ align:行中的文字水平居中,取值:left、center、right###valign:垂直居中,取值:top(上)、middle(中)、 bottom(下)
<td>或<th>屬性
< td>是普通單元格,<th>是標題單元各,居中加粗顯示。
width:儲存寬度
# height:儲存格高度
<!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>