表格和表单

憨憨励志学前端

已于 2022-05-05 18:14:33 修改

阅读量180

点赞数

分类专栏： CSS基础文章标签： css

于 2022-04-22 19:32:44 首次发布

本文链接：https://blog.csdn.net/weixin_52589346/article/details/124353129

版权

本文详细探讨了如何使用CSS进行表格和表单的设计，从代码实现到数据的读取，全面阐述了相关步骤和技术要点，帮助读者掌握这两项网页元素的美化技巧。

摘要由CSDN通过智能技术生成

文章目录

一、表格
- 1.代码
- 2.读出数据
二、表单
- 1.代码
- 2.读出数据
思维导图

一、表格

1.代码

 <style>
        table {
   
            border-collapse: collapse;
            border: aqua 1px solid;
        }

        .t1 {
   
            background-color: brown;
        }

        .t2 {
   
            text-align: center;
        }
    </style>
</head>


<body>
    <table border="1">
        <tr class="t1">
            <th colspan="2">日期</th>

            <th colspan="2">天气现象</th>

            <th>气温</th>
            <th>风向</th>
            <th>风力</th>


        </tr>

        <tr class="t3">
            <td rowspan="2">22日星期五</td>
            <td>白天</td>
            <td>太阳</th>
            <td class="t2">晴间多云</td>
            <td>高温7°</td>
            <td>无持续风向</td>
            <td>微风</td>

        </tr>


        <tr>


            <td>夜间</td>
            <td>月亮</td>
            <td class="t2">晴</td>
            <td>低温-4°</td>
            <td>无持续风向</td>
            <td>微风</td>

        </tr>

        <tr>
            <td rowspan="2">23日星期六</td>
            <td>白天</td>
            <td>太阳</td>
            <td class="t2">晴</td>
            <td>高温9°</td>
            <td>无持续风向</td>
            <td>微风</td>
        </tr>

        <tr>

            <td>夜间</td>
            <td>多云</td>
            <td class="t2">阴</td>
            <td>低温-2°</td>
            <td>无持续风向</td>
            <td>微风</td>

        </tr>

    </table>



</body>

2.读出数据

在这里插入图片描述

二、表单

1.代码

    <style>
        *{
   
            padding: 0;
            margin: 0

最低0.47元/天解锁文章

憨憨励志学前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表格和表单

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录一、表格1.代码2.读出数据二、表单1.代码2.读出数据思维导图一、表格1.代码 <style> table { border-collapse: collapse; border: aqua 1px solid; } .t1 { background-color: brown; .
复制链接

扫一扫

专栏目录