HTML基础教程之表格标签
表格标签
网页中有类似word里面的功能，当然，也会有类似excel里面的功能，表格就是其中之一
表格的结构
<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：边框粗细。
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>…</td>
<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>
