### table 表格标签 使用格式 ``` <table 属性1="属性值1" 属性2="属性值2" ... ... >表格内容</table> ``` #### 属性 * width height 表示表格的宽度和高度,他的值可以是像素(px)也可以是父级元素的百分百(%) * border 表示表格外边框的宽度,`默认值为0` * align 表格的显示位置,默认值为left,可选值`left,center,right` * cellspacing 单元格之间的间距,`默认是2px` * cellpadding 单元格内容与单元格边框的显示距离 * frame 控制表格边框最外层的四条线框,`默认值void`,无边框 >[info] above 表示仅顶部有边框 > bottom 表示仅底部有边框 > hsides 表示仅有顶部边框和底部边框 > lhs 表示仅有左侧边框 > rhs 表示仅有右侧边框 > vsides 表示仅有左右侧边框 > box border 包含4个边框 * rules 控制是否显示以及如何显示单元格之间的分割线,默认值为none,无分割线 >[info] all 包含所有分割线 > rows 仅有行分割线 > cols 仅有列分割线 > groups 在行组和列祖之间有分割线 ### caption 表格标题标签 表示表格的标题 使用格式 ``` <caption>属性的插入位置,直接位于<table>属性之后,<tr>表格行之前 ``` #### 属性 align默认值为top,可选值`bottom,left,right` ### tr 表格行标签 定义表格的一行,对于每一个表格行,都是由一对`<tr>...</tr>`标记表示,每一行`<tr>`标记内可以嵌套多个`<td>`或者`<th>`标记 #### 属性 * bgcolor 设置背景颜色 * align 设置垂直方向对齐方式 `bottom,middle, top` * valign 设置水平方向对齐方式 `center,left,right` ### th 和 td `<th>`是表头标记,通常位于首行或者首列,`<th>`中的文字默认会被加粗,而`<td>`不会 #### 属性 * bgcolor 设置背景颜色 * width height 表示单元格的宽度和高度 * align 设置垂直方向对齐方式 `bottom,top,middle` * valign 设置水平方向对齐方式 `center,left,right` * rowspan 设置单元格所占行数 * colspan设置单元格所占列数 例子 表格嵌套时左对齐 ``` <!DOCTYPE html> <html> <head> <title>第8节课</title> <meta charset="utf8"> </head> <body topmargin='5%' leftmargin='0px' link="blue" vlink="red" alink="green"> <table width="90%" border="0px" align="center" cellspacing="0px" cellpadding="0px"> <tr bgcolor="green" height='90px' align="center"> <td> <font size="8" color="white"><b>head</b></font> </td> </tr> <tr > <td> <table width="30%" height='500px' bgcolor="yellow" align="left"> <tr align="center"> <td> <font size="8" color="white"><b>left</b></font> </td> </tr> </table> <table width="70%" height='500px' bgcolor="#ccc" align="left"> <tr align="center"> <td> <font size="8" color="white"><b>main</b></font> </td> </tr> </table> </td> </tr> <tr bgcolor="green" height='90px' align="center"> <td> <font size="8" color="white"><b>bottom</b></font> </td> </tr> </table> </body> </html> ``` 显示效果 ![](http://i4.buimg.com/567571/11ef6a52c25f8db7.png)