CSS——（6）表格与表单

最新推荐文章于 2022-10-21 09:00:35 发布

nonono吧

最新推荐文章于 2022-10-21 09:00:35 发布

阅读量149

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/ileopard/article/details/108089920

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、表格

    <!-- 
        table标签  在html中创建表格
            tr标签 表格中的一行
            td标签 表示一个单元格
                属性：
                    rowspan 纵向的合并单元格
                    colspan 横向的合并单元格
     -->
    <table class="table1" border="1" width='50%' align="center">
        <tr>
            <td>1.1</td>
            <td>1.2</td>
            <td>1.3</td>
            <td>1.4</td>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
            <td>2.3</td>
            <td>2.4</td>
        </tr>
    </table>

二、长表格

<!-- 
        可以将一个表格分为三部分：
            头部 thead
            主题 tbody
            底部 tfoot

			th 表示头部的单元格
     -->
    <table class="table1" border="1" width='50%' align="center">
       <thead>
            <tr>
                <td>日期</td>
                <td>收入</td>
                <td>支出</td>
                <td>合计</td>
            </tr>
       </thead>

       <tbody>
            <tr>
                <td>2000.1.1</td>
                <td>500</td>
                <td>200</td>
                <td>300</td>
            </tr>
            <tr>
                <td>2000.1.1</td>
                <td>500</td>
                <td>200</td>
                <td>300</td>
            </tr>
            <tr>
                <td>2000.1.1</td>
                <td>500</td>
                <td>200</td>
                <td>300</td>
            </tr>
            <tr>
                <td>2000.1.1</td>
                <td>500</td>
                <td>200</td>
                <td>300</td>
            </tr>
       </tbody>

       <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td>合计</td>
                <td>900</td>
            </tr>
       </tfoot>
    </table>

三、表格的样式

<body>
    <table>
        <tr>
            <td>学号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>地址</td>
        </tr>
        <tr>
            <td>1</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>18</td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>2</td>
            <td>猪八戒</td>
            <td>男</td>
            <td>28</td>
            <td>高老庄</td>
        </tr>
        <tr>
            <td>3</td>
            <td>沙和尚</td>
            <td>男</td>
            <td>38</td>
            <td>流沙河</td>
        </tr>
        <tr>
            <td>4</td>
            <td>唐三藏</td>
            <td>男</td>
            <td>16</td>
            <td>女儿国</td>
        </tr>
    </table>

    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

/* 
    表格的样式
    尽量不要用表格对网页进行布局
    使用场景：需要格式化某些数据——课程表啥的
*/
table{
    width: 50%;
    border: 1px orange solid;
    margin: auto auto;
    /* 
        border-spacing 指定边框之间的距离
            设置为0px 此时看到的边框是两个边框的大小
    */
    /* border-spacing: 0px; */

    /* 
        为了达到边框合并的效果：
            border-collapse 设置边框的合并
    */
    border-collapse: collapse;
}

/* 
    单元格的样式
*/
td{
    border: 1px black solid;
    height: 100px;
    /* 
        默认情况下元素在td中是垂直居中的，可以通过 vertical-align 来修改
            bottom top middle。。。
        text-align 单元格内容水平对齐，默认left
            left center right
    */
    vertical-align: middle;
    text-align: center;

}

/* 
    如何把表格的隔行变色？
    tr:nth-child(even){
    background-color: palegreen;
    }

    如果表格中没有使用tbody而是直接使用tr
        那么浏览器会自动创建一个tbody，并且将tr全都放到tbody中
        tr不是table的子元素
    
    table>tr:nth-child(even) 这是无效的
    tbody>tr:nth-child(even) 这是有效的
*/
tbody>tr:nth-child(even){
    background-color: palegreen;
}


/* 
    使用div实现表格(了解就好了)
*/

.box1{
    width: 300px;
    height: 300px;
    background-color: orange;

    /* 
        将元素设置为单元格 td
    */
    display: table-cell;
    vertical-align: middle;
}

.box2{
    width: 100px;
    height: 100px;
    background-color: yellow;
    margin: 0 auto;
}

四、表单

<body>
    <div class="outer">
        <div class="logo"></div>
        <form class="box1" action="https://www.baidu.com" method="get" onsubmit="return formF();">
            <div class="box2">
                <input class="inner" type="text" autocomplete="off" id="phoneNumber" required name="phoneNumber" placeholder="请输入您的手机号" onblur="phoneNumberF();">
                <span id="phoneNumberSpan" class="img_span"></span>
            </div>
            <div class="box2">
                <input class="inner1" type="text" autocomplete="off" id="img_code" required name="img_code" placeholder="请输入图形验证码" onblur="img_codeF();">
                <div id="img_code_display"></div>
                <span id="img_codeSpan" class="img_span"></span>
            </div>
            <div class="box2">
                <input class="inner1" autocomplete="off" type="text" id="yz_code" required name="yz_code" placeholder="请输入验证码" onblur="yz_codeF();">
                <a href="https://www.baidu.com" id="yz_code_display" target="_blank">获取验证码</a>
                <span id="yz_codeSpan" class="img_span"></span>
            </div>

            <div class="box2">
                <input class="inner" type="password" id="password" required name="password" placeholder="8-16位数字或字母" onblur="passwordF();">
                <span id="passwordSpan" class="img_span"></span>
            </div>

            <div class="box3">
                <div class="xy_radio">
                    <input type="radio" id="x1" required name="xy">
                </div>
                <div class="xy_text">
                    <div class="d">已阅读并同意</div>
                    <div class="d">
                        <a href="https://">《用户注册协议》《隐私权政策》</a>
                    </div>
                </div> 
            </div>   

            <div class="box2">
                <input class="reg" type="submit" value="注册">
            </div>  
        </form>
    </div>
</body>

nonono吧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS——（6）表格与表单

一、表格  <table class="table1" border="1" width='50%' ali
复制链接

扫一扫