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

1. 制作表格

  • 用到background-img设置表头背景图片（导航栏也可以这么用）
  • 用到设置单双行不同颜色的方法
  • 用到合并列colspan=number,合并行用rowspan=number
  • 用到设置表格范围宽度方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<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>

2. 制作表单

  • 用到form放置表单元素，比如文本字段，复选框，单选框，按钮等
  • 用到input标签和texttype输入文本框
  • 用到input标签和passwordtype输入密码
  • 用到input标签和radiotype成为单选框，单选框互斥需要名字一致
  • 用到input标签和checkboxtype复选框
  • 用到select标签和它的子标签option做选择器
  • 用到input标签和submittype做提交按钮
  • 用到input标签和reset做复位按钮
  • 用到textarea标签做文本输出显示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<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>

3. 常见的表单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标签不一样

Front-end application > basic notes
#html #css #js
制作表格_表单并用CSS美化
http://example.com/2024/07/21/制作表格_表单并用CSS美化/
作者
xiao cuncun
发布于
2024年7月21日
许可协议