1. 表格
作用:用来展示数据可以让数据显示整齐规范。
2.列表
作用:布局,列表可以使页面布局整齐规范
3.表单
作用:用来收集用户的信息
作用:规整的展示数据
会写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>