html之3表的表格

mac2024-11-16  54

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>

最新回复(0)