html之3表的表格

3表：让数据排列整齐

1. 表格

作用：用来展示数据可以让数据显示整齐规范。

2.列表

作用：布局，列表可以使页面布局整齐规范

3.表单

作用：用来收集用户的信息

 

表格  table标签

作用：规整的展示数据

会写n行m列的表格、合并单元格、边框

很久很久之前成员用表格布局，发现苦逼啊

4个不能分割的标签table、th、tr、td  分别为表、表头单元格、行、单元格标签  （没有列的概念哦）

td=table data即单元格标签存放都是数据

表格的属性

 

cellpadding是单元格内容与表边框最近的距离

<table border="1" width="500" height="200" align="center" cellpadding="20" cellspacing="0">
        <tr> 
            <td>姓名</td>  
            <td>年龄</td>  
            <td>性别</td>  
        </tr>
        <tr> 
            <td>张三</td>  
            <td>18</td>  
            <td>男</td>  
        </tr>
        <tr> 
            <td>张三丰</td>  
            <td>99</td>  
            <td>女</td>  
        </tr>
        <tr> 
            <td>张疯子</td>  
            <td>199</td>  
            <td>未知</td>  
        </tr>
    </table>

 

 

合并单元格：

1. 2种  跨行合并 rowspan=“合并单元格的个数”或

            跨列合并 colspan=“合并单元格的个数”

2. 合并单元格顺序：先上后下、先左后右的顺序

3. 合并单元格三步骤：

1> 先确定是跨行还是跨列合并

2>根据先上后下，先左后右的顺序，找到目标单元格（eg:跨行就是先上后下，所以最上面的单元格就是目标单元格）

目标单元格就是使用colspan或rowspan的地方

3>删除多余的单元格（被合并的单元格）

<table border="1" width="500" height="240" align="center" cellspacing="0">
        <caption> 个人简历 </caption>
        <tr>
            <td>刘德华</td>
            <td>男</td>
            <td>18</td>
            <!-- 目标单元格  先上后下 -->
            <td rowspan="2">照片</td>
        </tr>
        <tr>
            <td>身高 180</td>
            <td>汉族</td>
            <td>已婚</td>
            <!-- <td>照片</td> 这个单元格是多余的 -->
        </tr>
        <tr>
            <td>个人作品</td>
            <!-- 第二个单元格是目标单元格 -->
            <td colspan="3">个人作品</td>
            
        </tr>
        <tr>
            <td>个人简历</td>
            <td colspan="3">个人简历</td>
        </tr>
    </table>

表格分割成三个部分

对于比较复杂的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注， 这样更好的分清表格结构

1. <thead></thead>：用于定义表格的头部。用来放标题之类的东西。<thead> 内部必须拥有 <tr> 标签！
2. <tbody></tbody>：用于定义表格的主体。放数据本体 。
3. <tfoot></tfoot>放表格的脚注之类。
4. 以上标签都是放到table标签中。

 

<table border="1" cellspacing="0" align="center" width="500">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>刘德华</td>
                <td>男</td>
                <td>55</td>
            </tr>
            <tr>
                <td>刘若英</td>
                <td>女</td>
                <td>35</td>
            </tr>
            <tr>
                <td>刘晓庆</td>
                <td>女</td>
                <td>65</td>
            </tr>
            <tr>
                <td>刘三姐</td>
                <td>女</td>
                <td>15</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>信息地址</td>
                <td colspan="2"> 北京市金燕龙校区举办演唱会</td>        
            </tr>
        </tfoot>
    </table>