表格总结
1.表格作用和基本语法
它是用来描述具有二维结构的数据,可以让数据显示的非常的规整,可读性非常好。表格最合适的地方就是用来存储表格里数据的。
创建表格的基本语法:
< table>
< tr>
< td> 单元格内的文字< / td>
...
< / tr>
...
< / table>
1.table用于定义一个表格标签。
2.tr标签 用于定义表格中的行,必须嵌套在 table标签中。
3.td 用于定义表格中的单元格,必须嵌套在标签中。
他们是创建表格的基本标签,缺一不可
2.表格标签
标签 说明 table 用于定义一个表格 thead 定义表头 用于对 HTML 表格中的主体内容进行分组 tr 行 td 单元格 可以放任何东西 tbody 主干 用于组合 HTML 表格的主体内容 tfoot 尾 用于对 HTML 表格中的表注(页脚)内容进行分组 caption 定义表格标题 通常这个标题会被居中且显示于表格之上。
< ! DOCTYPE html>
< html>
< head>
< title> 表格标签< / title>
< / head>
< body>
< table border= "1" >
< caption> 表格标题< / caption>
< thead>
< tr>
< td> this text is in the thead< / td>
< / tr>
< / thead>
< tbody>
< tr>
< td> this text is in the tbody< / td>
< / tr>
< / tbody>
< tfoot>
< tr>
< td> this text is in the tfoot< / td>
< / tr>
< / tfoot>
< / table>
< / body>
< / html>
3.表格属性
属性 说明 border 表格边框(默认取0,表示无边框) width 表格宽度 height 表格高度 align 表格对齐方式 bgcolor 表格的背景颜色 background 背景图像(优先显示) cellpadding 表格边距(默认取值2px) cellspacing 表格间距(默认取值2px)
4.表格的嵌套和合并
4.1嵌套
< ! DOCTYPE html>
< html>
< head>
< title> 表格标签< / title>
< / head>
< body>
< table width= "500" border= "1" >
< tr>
< td> & nbsp; < / td>
< td>
< table width= "200" border= "1" align= "center" >
< tr>
< td> & nbsp; < / td>
< td> & nbsp; < / td>
< / tr>
< / table>
< / td>
< / tr>
< / table>
< / body>
< / html>
4.2合并
属性 说明 rowspan 合并的是行 单元格在垂直方向的合并 colspan 合并的是列 单元格在水平方向的合并
< ! DOCTYPE html>
< html>
< head>
< title> 表格合并< / title>
< / head>
< body>
< table width= "500" border= "1" >
< tr>
< td rowspan= "2" > & nbsp; < / td>
< td> & nbsp; < / td>
< td> & nbsp; < / td>
< / tr>
< tr>
< td> & nbsp; < / td>
< td> & nbsp; < / td>
< / tr>
< / table>
< / body>
< / html>
< ! DOCTYPE html>
< html>
< head>
< title> 表格合并< / title>
< / head>
< body>
< table width= "500" border= "1" >
< tr>
< td colspan= "2" align= "center" > & nbsp; < / td>
< / tr>
< tr>
< td> & nbsp; < / td>
< td> & nbsp; < / td>
< / tr>
< tr>
< td> & nbsp; < / td>
< td> & nbsp; < / td>
< / tr>
< / table>
< / body>