关于HTML表格与表单的总结

最新推荐文章于 2026-03-11 06:06:41 发布

原创最新推荐文章于 2026-03-11 06:06:41 发布 · 331 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

本文详细介绍了HTML中表格的使用，包括宽度、边框和单元格布局，以及表单的属性如action、method和enctype。通过实例演示了如何创建一个用于填写个人信息的简历表单，包括表单控件的选择和布局设计。

对HTML进一步了解关于表格与表单

一、表格【展示数据】
- table
二、表单【填写数据】
- 1.属性
- 2.表单控件
知识结构图
案例——个人简历表

一、表格【展示数据】

table

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <!-- 
        width 表格的宽度
        border 表格的边框
        cellspacing 单元格之间的距离
        cellpadding 单元格边框与内容的距离
     -->
    <table width='500' border="1" cellspacing='0' cellpadding='5'>
        <!-- 表头 -->
       <thead>
           <tr>
               <th>编号</th>
               <th>姓名</th>
               <th>年龄</th>
               <th>性别</th>
           </tr>
       </thead>

       <!-- 表体 -->
       <!-- 
           tr 一行
           th 表头的单元格
           td 表体的单元格
           colspan 列合并
           rowspan 行合并
           algin='center' 文字水平居中
        -->
       <tbody align="center">
           <tr>
               <td>1</td>
               <td>张三</td>
               <td>13</td>
               <td>男</td>
           </tr>
            <tr>
               <td colspan='2'>2</td>
               <td>张三</td>
               <td>13</td>
               <td>男</td>
           </tr>
            <tr>
               <td rowspan="2">3</td>
               <td>张三</td>
               <td>13</td>
               <td>男</td>
           </tr>
           <tr>
               <td>4</td>
               <td>张三</td>
               <td>13</td>
               <td>男</td>
           </tr>
       </tbody>
    </table>
</body>
</html>

二、表单【填写数据】

给用户填写数据，并且将数据发送给后台

1.属性

action 用户将数据提交给后台的地址
method 表单发送数据给后台时所用提交方式

        post
        get

enctype 设置发送给后台的数据的格式

        查询字符串    [ application/x-www-form-urlencodeed]
            id=185&name=tom
            ->
            key1=val1&key2=val2
        json字符串    [ application/json]
            '{"key1":"val1","key2":"val2"}'

文件上传 [ multipart/data-form]

       图片、视频、文本文档

target 响应结果打开页面的方式

2.表单控件

input 输入框
type

            text    
            submit 提交表单
            password 密码框
            radio 单选框
            checkbox 复选框

知识结构图

在这里插入图片描述

案例——个人简历表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历</title>
</head>

<body>
    <table width='650' height='850' border="1" cellspacing='0'>
        <tbody align="center"  >
            <tr>
                <th>姓名</th>
                <th width='100'></th>
                <th width='70'>性别</th>
                <th width='100'></th>
                <th>出生年月</th>
                <th width='100'></th>
                <th  width='100' rowspan="3">照片</th>
            </tr>
            <tr>
                <td>籍贯</td>
                <td></td>
                <td>民族</td>
                <td></td>
                <td>身高</td>
                <td></td> 
            </tr>
            <tr>
                <td>政治面貌</td>
                <td></td>
                <td>学历</td>
                <td></td>
                <td>职业资格</td>
                <td></td>
            </tr>
            <tr>
                <td rowspan="2">家庭地址</td>
                <td rowspan="2" colspan="2"></td>
                <td colspan="2">联系电话</td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td colspan="2">E-mail</td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td rowspan="3">社会关系</td>
               <td >关系</td>
               <td>姓名</td>
               <td>政治面貌</td>
               <td colspan="3">工作单位</td>
            </tr>
            <tr>
                <td height='30'></td>
                <td></td>
                <td></td>
                <td colspan="3"></td>
            </tr>
            <tr>
                <td height='30'></td>
                <td></td>
                <td></td>
                <td colspan="3"></td>
            </tr>
            <tr height='110'>
                <td>教育背景</td>
                <td colspan="6"></td>
            </tr>
            <tr height='60'>
                <td>在职情况</td>
                <td colspan="6"></td>
            </tr>
            <tr height='90'>
                <td>获奖情况</td>
                <td colspan="6"></td>
            </tr>
            <tr height='40'>
                <td>特长爱好</td>
                <td colspan="6"></td>
            </tr>
            <tr height='180'>
                <td>个人自述</td>
                <td colspan="6"></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

在这里插入图片描述

标签

#html