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