制作表格/表单并用CSS美化

  1. 制作表格
    • 用到background-img设置表头背景图片（导航栏也可以这么用）
    • 用到设置单双行不同颜色的方法
    • 用到合并列colspan=number,合并行用rowspan=number
    • 用到设置表格范围宽度方法
<html>

<head>
    <!--Ctrl+S保存后就可以刷新浏览器预览-->
    <meta http-equiv="Content-type" content="text/html; charset=utf-8 " />
    <title>表格</title>
    <style type="text/css">
        body{
            font-size: 12px;
        }
        table{
            margin: auto;
            border: 1px solid #3a3a3a;
            color: #000000;
        }
        td{
            height: 20px;
            border: 1px solid #3a3a3a;
        }
        th{
            background-image: url(image/屏幕截图.jpg);/*用图片来当表头的背景*/
            background-repeat: repeat-x;
            height: 25px;/*设置的高度和图片的高度一致，可以让图片刚好在一行显示，没有间隙*/
            color: #ffffff;
            border: 1px solid #5f5f5f;
            padding: 0.2px;
        }
        /*单双行不同颜色*/
        .row{
            background-color: #d7d7d7;
            color: #000000;
        }
    </style>
</head>

<body>
    <!--设置表格范围边框-->
    <table width="800" border="0" align="center" cellpadding="0" cellsapcing="0">
    <tr>
        <!--合并单元格-->
        <!--合并列用colspan-->
        <!--合并行用rowspan-->
        <th colspan="5">表头合并</th>
    </tr>
    <tr class="row">
        <td>行1列1</td>
        <td>行1列2</td>
        <td>行1列3</td>
        <td>行1列4</td>
        <td>行1列5</td>
    </tr>
    <tr>
        <td>行2列1</td>
        <td>行2列2</td>
        <td>行2列3</td>
        <td>行2列4</td>
        <td>行2列5</td>
    </tr>
    <tr class="row">
        <td>行3列1</td>
        <td>行3列2</td>
        <td>行3列3</td>
        <td>行3列4</td>
        <td>行3列5</td>
    </tr>
    <tr>
        <td>行4列1</td>
        <td>行4列2</td>
        <td>行4列3</td>
        <td>行4列4</td>
        <td>行4列5</td>
    </tr>
    <tr class="row">
        <td>行5列1</td>
        <td>行5列2</td>
        <td>行5列3</td>
        <td>行5列4</td>
        <td>行5列5</td>
    </tr>
    <tr>
        <td>行6列1</td>
        <td>行6列2</td>
        <td>行6列3</td>
        <td>行6列4</td>
        <td>行6列5</td>
    </tr>
    <tr class="row">
        <td>行7列1</td>
        <td>行7列2</td>
        <td>行7列3</td>
        <td>行7列4</td>
        <td>行7列5</td>
    </tr>
    <tr>
        <td>行8列1</td>
        <td>行8列2</td>
        <td>行8列3</td>
        <td>行8列4</td>
        <td>行8列5</td>
    </tr>
</table>
</body>

</html>
  1. 制作表单
    • 用到form放置表单元素，比如文本字段，复选框，单选框，按钮等
    • 用到input标签和texttype输入文本框
    • 用到input标签和passwordtype输入密码
    • 用到input标签和radiotype成为单选框，单选框互斥需要名字一致
    • 用到input标签和checkboxtype复选框
    • 用到select标签和它的子标签option做选择器
    • 用到input标签和submittype做提交按钮
    • 用到input标签和reset做复位按钮
    • 用到textarea标签做文本输出显示
<html>

<head>
    <!--Ctrl+S保存后就可以刷新浏览器预览-->
    <meta http-equiv="Content-type" content="text/html; charset=utf-8 " />
    <title>表单</title>
    <style type="text/css">

    </style>
</head>

<body>
    <div id="logo">此处显示 ID "logo"的内容</div>
    <div>此处显示ID "title"的内容</div>
    <div id="main">
        <ul>
            <!--form用于放置表单元素，比如文本字段，复选框，单选框，按钮等-->
            <form action="" method="get">
                <li>
                    <!--label标签文本-->
                    <label>输入账号：</label>
                    <!--input输入文本框，类型text-->
                    <input name="username" type="text" class="txt" />
                </li>
                <li>
                    <label>输入密码：</label>
                    <!--input输入文本框，类型password-->
                    <input name="pass word" type="password" class="txt" />
                </li>
                <li>
                    <label>确认密码：</label>
                    <input name="pass word" type="password" class="txt" />
                </li>
                <li>
                    <!--把两个radio类型做成单选按钮-->
                    <!--两个单选按钮name必须一样，才能做成互斥-->
                    <!--checked表示默认-->
                    <label>单选项：</label>
                    <input name="rdoSex" type="radio" value="0" checked />
                    <img src="man.jpg" width="22" height="21" />
                    <input type="radio" name="rdoSex" value="1">
                    <img src="woman.jpg" width="23" height="20" />
                </li>
                <li>
                    <!--checkbox做复选框-->
                    <!--input后面的值内容是显示文本-->
                    <label>复选项：</label>
                    <input type="checkbox" value="sport" name="cbxHobby" />sport
                    <input type="checkbox" value="chat" name="cbxHobby" />chat
                    <input type="checkbox" value="game" name="cbxHobby" />game
                </li>
                <li>
                    <label>日期：</label>
                    <!--select选择和它的子标签option-->
                    <!--多个选择器组合为日期-->
                    <select name="year">
                        <option value="2020">2020</option>
                        <option value="2021">2021</option>
                        <option value="2022">2022</option>
                        <option value="2023">2023</option>
                        <option value="2024">2024</option>
                    </select>年
                    <select name="month">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>月
                    <input type="text" name="day" class="day"/>日
                </li>
                <li>
                    <!--添加按钮-->
                    <input type="submit" name="button" id="buton" value="提交"/>
                    <input type="submit" value="同意条款并提交"/>
                    <input type="reset" value="重来"/>
                </li>
                <li class="fwxy">
                     <!--添加文本显示-->
                    <textarea name="textarea" cols="70" rows="3">...显示输出文本信息...显示输出文本信息...显示输出文本信息...显示输出文本信息...显示输出文本信息...显示输出文本信息...显示输出文本信息...显示输出文本信息...显示输出文本信息...显示输出文本信息...显示输出文本信息...显示输出文本信息...显示输出文本信息...显示输出文本信息...显示输出文本信息...显示输出文本信息...</textarea>
                </li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </form>
        </ul>
    </div>
    <div id="about">此处显示ID "about"的内容</div>
</body>

</html>
  1. 常见的表单html标签

  • 表单标签<form></form>

  • 输入标签<input/>常用格式为<input type="" value="" name="" class=""/>,常用属性如下：

    • text:文本框
    • checkbox：复选框，同一组的checkbox的name应该相同，方便js后台查数据；不同的checkbox组名字不同
    • file:文件选择框
    • hidden:隐藏域，<input type="hidden" value="1"/>
    • image:图片框
    • password:密码框
    • radio:单选按钮框，注意一组radio名字要一样，才能单选
    • button:按钮框：<input type="button" value="value值会显示在按钮上">，value值会显示在按钮上
    • reset:重置按钮框，按下后会清空表单内全部数据
    • submit:提交按钮框，和button不一样的是，它会提交表单数据到指定位置

  • 下拉列表标签<select></select>及其子标签<option></option>

  • 文本域标签textarea,它的格式<textarea cols="" rows=""></textarea>可以定义显示长宽

  • 任何一个表单元素标签其实都能脱离表单form标签使用，这一点和table标签不一样

posted @   不愿透露姓名的小村村  阅读(92)  评论(0)  编辑  收藏  举报
相关博文：
·  制作导航栏并用CSS美化
·  [笔记]html+css基础知识
·  HTML表格
·  day07 -- > (HTML表单标签、CSS)
·  08-表格和表单
阅读排行：
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决
· 提示词工程——AI应用必不可少的技术
点击右上角即可分享
微信分享提示
AI IDE Trae