web_02_表格标签

1、表格标签

　　主要作用：显示，展示数据

　　基本语法：

　　<table>  　　　　　　 //用于定义表格的标签

        <tr>       　　　　　　//用于定义表格中的行，必须嵌套在<table>标签中

            <td> </td>　　　　//用于定义表格中的单元格，必须嵌套在<tr>标签中。td指table data,数据单元

            <td> </td>

        </tr>

     </table>

 

图示：

　　　　

 

 2、表头单元格标签   <th>  内容</th>

　　一般位于表格的第一行或第一列，表头单元格里的文本内容会加粗居中显示

3、表格属性

　　这些属性要写到表格标签<table>里面去

　

例：

 <table align="center" border="1" cellpadding="20px" cellspacing="0" with="400px" height="400px" bordercolor="red">

        <tr>

            <th>排名</th>

            <th>关键词</th>

            <th>趋势</th>

            <th>今日搜索</th>

            <th>最近七日</th>

            <th>相关链接</th>

        </tr>

        <tr>

            <td> 1</td>

            <td> 鬼吹灯</td>

            <td><img src="images2/up.jpg" alt=""> </td>

            <td>345 </td>

            <td>87864 </td>

            <td><a href="###">贴吧</a> <a href="###">图片</a> <a href="###">百科</a> </td>

        </tr>

        <tr>

            <td> 2</td>

            <td> 盗墓笔记</td>

            <td><img src="images2/up.jpg" alt=""> </td>

            <td>125 </td>

            <td>84862 </td>

            <td><a href="###">贴吧</a> <a href="###">图片</a> <a href="###">百科</a> </td>

        </tr>

        <tr>

            <td> 3</td>

            <td> 西游记</td>

            <td><img src="images2/down.jpg" alt=""> </td>

            <td>353 </td>

            <td>13453 </td>

            <td><a href="###">贴吧</a> <a href="###">图片</a> <a href="###">百科</a> </td>

        </tr>

        <tr>

            <td> 4</td>

            <td> 甄嬛传</td>

            <td><img src="images2/up.jpg" alt=""> </td>

            <td>365 </td>

            <td>89312 </td>

            <td><a href="###">贴吧</a> <a href="###">图片</a> <a href="###">百科</a> </td>

        </tr>

    </table>

 

运行结果：

　　　　　　

 4、表格结构标签（位于<table> 里面）

　　<thead> 表格的头部标签

　　<tbody>表格的主体区域

 因为表格可能很长，为了更好地表达语义，将表格划分为表格头部和表格主体

 

 5、合并单元格

　　合并单元格方式：

　　　　跨行合并：rowspan="个数"

　　　　跨列合并：colspan="个数"

　　　

 

 

 　目标单元格：

　　　　　跨行 ：最上侧单元格为目标单元格,写合并代码

　　　　　跨列 :  最左侧单元格为目标单元格,写合并代码

 

合并单元格三部曲：

　　①、确定跨行、跨列

　　②、找到目标单元格，写上合并方式=合并单元格数量   <td colspan="2"></td>    <td sparown="2"></td>

　　③、删除多余的单元格