HTML5初学——表格标签（02-08课）

02课、03课——表格标签

1、表格的主要作用：
主要用于显示、展示数据，因为它可以让数据显示地非常的规整，可读性非常好，特别是后台展示数据的时候，能够熟练运用表格就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有调理。
2、基本语法：

        <table>
            <tr>
                <td>单元格内的文字</td>
                ...
            </tr>
            ... 
        </table>

①<table></table>是用于定义表格的标签
②<tr></tr>用于定义表格中的行，必须嵌套在<table></table>标签中
③<td></td>用于单元格，必须嵌套在<tr></tr>中（td表示table data 即数据单元格的内容）
eg：

        <table>
            <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr>
            <tr> <td>ming</td> <td>man</td> <td>22</td> </tr>
        </table>

3、表头单元格：
一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示，<th>标签表示html表格的表头部分（table head）
其本质与<td>普通单元格同级，不过有加粗居中的buff而已
eg：

        <table>
            <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr>
            <tr> <td>ming</td> <td>man</td> <td>22</td> </tr>
        </table>

04——表格相关属性（了解）

表格属性在实际开发中不常用，因为用CSS来设置会更好
但是需要有对函数名的了解，因为CSS中的名称是一样的，也会用到

注意：以上属性都是标签<table>内部的属性
eg：

        <!-- 将表格置于页面最中央 -->
        <table align="center">
            <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr>
            <tr> <td>ming</td> <td>man</td> <td>22</td> </tr>
        </table>

05——小说排行榜按例

1、先表格结构
①table
②表头th
③普通单元格td
④单元格内容（文字链接图片都行）

2、后表格属性
①边框属性cellpadding \cellspacing
②对其属性align

        <table align="center" width="500" height="2" border="1" cellspacing="0">
            <tr> 
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>今日搜索</th> 
                <th>最近七日</th> 
                <th>相关链接</th> 
            </tr>
            <tr> 
                <td>1</td> 
                <td>鬼吹灯</td>
                <td><img src="domn.jpg"></td> 
                <td>345</td> 
                <td>123</td> 
                <td><a href="#">贴吧</a></td> 
            </tr>
            <tr> 
                <td>2</td> 
                <td>西游记</td> 
                <td><img src="up.jpg"></td> 
                <td>333</td> 
                <td>111</td> 
                <td><a href="#">贴吧</a></td> 
            </tr>
        </table>

06_表格结构标签

因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分
在表格标签中，分别用<thead>表示表格的头部区域，<tbody>表示表格的主体区域

eg：

        <table align="center" width="500" height="2" border="1" cellspacing="0">
            <thead>
                <tr> 
                    <th>排名</th>
                    <th>关键词</th>
                    <th>趋势</th>
                    <th>今日搜索</th> 
                    <th>最近七日</th> 
                    <th>相关链接</th> 
                    </tr>
            </thead>
            
            <tbody>
                <tr> 
                    <td>1</td> 
                    <td>鬼吹灯</td>
                    <td><img src="domn.jpg"></td> 
                    <td>345</td> 
                    <td>123</td> 
                    <td><a href="#">贴吧</a></td> 
                </tr>
                <tr> 
                    <td>2</td> 
                    <td>西游记</td> 
                    <td><img src="up.jpg"></td> 
                    <td>333</td> 
                    <td>111</td> 
                    <td><a href="#">贴吧</a></td> 
                </tr>                
            </tbody>
        </table>

作用：方便程序员阅读
（检查网页的html代码-鼠标右键-检查，即可查看）

07、合并单元格<td></td>

1、合并单元格方式：
①跨行合并rowspan="合并单元格个数"表示合并上下单元格
②跨列合并colspan="合并单元格个数"表示合并左右单元格

2、目标单元格：
①跨行：最上边单元格为目标单元格（起始单元格，向下合并），写合并代码
②跨列：最左边单元格为目标单元格（起始单元格，向右合并），写合并代码

3、删除多余的单元格

eg：将排名和关键词合并为一个单元格，名为“排名”

        <table align="center" width="500" height="2" border="1" cellspacing="0">
            <thead>
                <tr> 
                    <th colspan="2">排名</th> <!--合并左右单元格，删去多余的单元格-->
                    <th>趋势</th>
                    <th>今日搜索</th> 
                    <th>最近七日</th> 
                    <th>相关链接</th> 
                    </tr>
            </thead>
            
            <tbody>
                <tr> 
                    <td>1</td> 
                    <td>鬼吹灯</td>
                    <td><img src="domn.jpg"></td> 
                    <td>345</td> 
                    <td>123</td> 
                    <td><a href="#">贴吧</a></td> 
                </tr>
                <tr> 
                    <td>2</td> 
                    <td>西游记</td> 
                    <td><img src="up.jpg"></td> 
                    <td>333</td> 
                    <td>111</td> 
                    <td><a href="#">贴吧</a></td> 
                </tr>                
            </tbody>
        </table>

08、表格总结

1、表格相关标签
①table
②tr
③td
④th
⑤thead
⑥tbody

2、表格相关属性
①align
②border
③cellpadding（一般为0）
④cellspacing（一般为0）
⑤width
3、表格合并
①colspan
②rowspan