表格标签(如果有不对的,请大家多多指正。谢谢!)
1、总的表格标签概览
<table><!--表格标签start--> <caption></caption><!--表格标题--> <thead><!--表格头--> <tr><!--表头行--> <th></th><!--表头单元格--> </tr> </thead> <tbody><!--表格体--> <tr><!--表格体行--> <td></td><!--表格体单元格--> </tr> </tbody> <tfoot><!--表格脚--> <tr> <td></td> </tr> </tfoot> </table><!--表格标签end-->
2、table
属性:
width="300"-----整个表格的宽度
height="200"-----整个表格的高度
border="1"-----整个表格的边框宽度
cellspacing="0"-----表格中每个单元格的间距
align="center"-----整个表格在网页中的位置
当没有css属性控制的时候,页面上展现的表格是:整个表格为边框色,cellspacing为每个单元格之间的距离,td的背景色为白色
table{
border:1px solid #ccc;
border-collapse:collapse;合并相邻边框
}
<style> table{ border: 1px solid red; /* 合并单元格边框 */ border-collapse: collapse; } </style>
<table border="5" width="300" height="500" cellspacing="0" align="center"><!--表格标签start--> <caption>表格标题</caption><!--表格标题--> <thead><!--表格头--> <tr><!--表头行--> <th>谁</th><!--表头单元格--> <th>地点</th> <th>干什么</th> </tr> </thead> <tbody><!--表格体--> <tr><!--表格体行--> <td>夏红</td><!--表格体单元格--> <td>厕所</td> <td>吃饭</td> </tr> <tr><!--表格体行--> <td>王妃</td><!--表格体单元格--> <td>蛋糕房</td> <td>放屁</td> </tr> </tbody> <tfoot><!--表格脚--> <tr> <td>仅仅娱乐</td> </tr> </tfoot> </table><!--表格标签end-->
3、thead 、tfoot 、tbody
可写可不写,这里只是格式上区分而已,但是tbody是不写浏览器也会加上的。
4、tr、td
tr和td都是指的行,但是td具有表格标题行的含义,而tr就是普通的行含义
属性:合并行
rowspan="2"----合并的总行数
5、td
单元格
属性:合并单元格
colspan="2"----合并的总列数