前端开发（form标签、单选框、多选框、file上传文件、按钮、label标签、下拉列(2)

当前位置:

首页 > Python基础教程 >

前端开发（form标签、单选框、多选框、file上传文件、按钮、label标签、下拉列(2)

> <fieldset> #设置方框样式表单 <legend>注册页面</legend> <p> ..... </p> </fieldset> </form> </body>

11.26 table标签

水平对齐和垂直对齐:

#水平对齐: align 可以给table、tr、td标签设置,    垂直对齐: valign 只能给tr、td标签设置
强调：table只能设置水平方向
#========水平对齐===========
align=“left”    align=“center”  align=“right”
1 给table标签设置水平对齐，可以让表格在水平方向上对齐
2 给tr设置水平对齐，可以控制当前行所有单元格内容都水平对齐
3 给td设置水平对齐，可以控制当前单元格内容水平对齐，tr与td冲突的情况下，以td为准

#========垂直对齐===========
valign=“top”    valign=“center”     valign=“bottom”
1 给tr设置垂直对齐可以让当前行所有单元格内容都垂直对齐
2 给td设置垂直对齐可以让当前单元格内容垂直对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body> #border边框边界  cellspacing单元格边界   bgcolor表格边框背景颜色
<table border="0px" cellspacing="1px" bgcolor="aqua">           #cellpadding单元格内内容距单元格边框
    <tr bgcolor="white">                                      #一行单元格背景颜色
        <td >姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>
    <tr bgcolor="white">
        <td>egon1</td>
        <td>male</td>
        <td>18</td>
    </tr>
</table>
</body>
</html>

11.261 表格结构

<table border="1" cellspacing="1px" bgcolor="black" width="300px" height="300px">#表格宽度和高度
    <caption>学员信息统计</caption>#1、表格的标题   
    
    <thead>                     #2、表格的表头
        <tr bgcolor="white">
            <th>姓名</th>         #表头行加粗，居中
            <th>性别</th>
            <th>年龄</th>
        </tr>
    </thead>
    
    <tbody>                     #3、表格的主体
        <tr bgcolor="white">
            <td>egon</td>
            <td>male</td>
            <td>18</td>
        </tr>
    </tbody>
    
    <tfoot>                     #4、表尾
        <tr bgcolor="white">
            <td>3</td>
            <td>3</td>
            <td>3</td>
        </tr>
    </tfoot>
</table>

11.262 单元格合并

1、水平向上的单元格colspan 可以给td标签添加一个colspan属性，来把水平方向的单元格当做多个单元格来看待

2、垂直向上的单元格rowspan 可以给td标签设置一个rowspan属性，来把垂直方向的的单元格当成多个去看待

<table border="0px" cellspacing="1px" bgcolor="aqua" width="200px" height="200px">
    <tr bgcolor="white">
        <td colspan="2"></td>   #第一行第一列向后合并一个单元格
        <td></td>              #相应删除一个列
    </tr>
    <tr bgcolor="white">
        <td></td>
        <td></td>
        <td rowspan="3"></td>   #第二行第三列向下合并两个单元格
    </tr>
    <tr bgcolor="white">
        <td></td>               #相应的这两行都只有两列
        <td></td>
    </tr>
    <tr bgcolor="white">
        <td></td>
        <td></td>
    </tr>
</table>

注意: 1、由于把某一个单元格当作了多个单元格来看待，所以就会多出一些单元格，所以需要删掉一些单元格2、一定要记住，单元格合并永远是向后或者向下合并，而不能向前或向上合并

栏目列表