html常用标签详解5-表格标签

表格标签(如果有不对的,请大家多多指正。谢谢!)

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"----合并的总列数

 

上一篇:图片的上传


下一篇:html——table标签属性总结