HTML表格与表单

最新推荐文章于 2024-06-15 21:20:00 发布

流萤free

最新推荐文章于 2024-06-15 21:20:00 发布

阅读量163

点赞数 4

文章标签： html

本文链接：https://blog.csdn.net/weixin_46331127/article/details/117520533

版权

HTML实训003

一、表格table
二、表单
三，练习代码

一、表格table

1、创建table

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
     ...
</table>

<table>、</able>、<tr> 、 <td> ，他们是创建表格的基本标签，缺一不可
注意：
(1) table定义一个表格，一个table就是一个表格
(2) tr定义一行，一个tr就是一行，table有几个tr标签说明有几行，tr必须嵌套在table里
(3) td就是单元格，td必须嵌套在tr里面，tr里面有几个td标签说明有几个单元格（几列）
(4) tr只能嵌套td，td下可以为任意元素

2、语法

<table>
<caption></caption>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>

3、属性

Table 属性
Width, align, border, bgcolor, cellpadding, cellspacing, frame, rules

tr 属性
Align, valign, bgcolor

td和th 属性
Align, valign, bgcolor, width, height
行合并列合并colspan, rowspan

表格需要用到的属性：
	    bordercolor:设置表格边框颜色 
		border:设置表格的边框 
		cellspacing:设置单元格和单元格之间的距离 
		cellpadding:设置单元格和内容之间的距离 
		width:设置表格的宽度/高度
		bgcolor:设置表格的背景色
		align:设置表格的对齐方式

合并单元格
跨行合并：rowspan 跨列合并：colspan
将多个内容合并的时候，就会有多余的东西，把它删除。例如把 3个 td 合并成一个，那就多余了2个，需要删除。公式：删除的个数 = 合并的个数 - 1 合并的顺序先上先左

<table border="1px" cellspacing="10px" cellpadding="10px" align="center">
        <caption>表格</caption>
        <thead>
         <th>饮料</th>
         <th>水果</th>
         <th>动物</th>
        </thead>
        <tbody> 
         <tr>
          <td>可口可乐</td>
          <td>苹果</td>
          <td>鱼</td>
         </tr>
         <tr>
          <td colspan="3"></td>
         <!--3个 td 合并成一个， 需要删除2个-->
         </tr>
        </tbody>
       </table>
</body>

结果如下：
在这里插入图片描述

二、表单

表单主要负责界面交互，实现客户端与服务器端的信息传递。在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作
表单域：他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

表单元素及格式
input标签属性
type：表单元素的类型。

可用选项有text、password、checkbox、radio、submit、reset、file、hidden、image和button。默认text。

name:表单元素的名称

 按名称来标识

value:元素表单的初始值

可选属性。如type为radio，必须指定一个值。

size:表单元素的初始宽度

如果type为text或password，表单元素的大小以字符为单位；如type为其他输入类型，宽度以像素为单位。

xlength:输入的最大字符数

指定text或password的最大字符数。默认无限大。

checked:按钮是否被选中

 输入类型为radio或checkbox时，使用此属性。

这里用我整理的学习笔记给大家展示一哈，表单的标签与input标签可定义输入型表单对象，话不多说，上图：
chu
由于截图问题，太大了截图不全，只能截小一点，截图放大看哈，还是可以看清楚的！

三，练习代码

根据表格表单的属性、对象、定义，小试牛刀的写了个人简历模板，求各位来一起讨论：

<tr>
                    <td style="text-align: center; width: 80px;">姓名</td>
                    <td style="width: 80px;text-align: center;">
                        <input type="text" name="name" id="name" style="width: 90%;text-align: center;" >
                    </td>
                    <td style="text-align: center; width: 80px;">性别</td>
                    <td style="width: 80px;text-align: center;">
                        <input type="text" name="sex" id="sex" style="width: 90%;text-align: center;" >
                    </td>
                    <td style="text-align: center; width: 80px;">出生年月</td>
                    <td style=" width: 80px;text-align: center;">
                        <input type="text" name="birthday" id="birthday" style="width: 90%;text-align: center;" >
                    </td>
                    <td rowspan="4" style="width: 90px;vertical-align: top;">
                        <input type="file" name="picture" id="picture" style="width: 90%;">
                    </td>
                </tr>

个人简历的第一行：
<td> rowspan=“4” style=“width: 90px;vertical-align: top;”>实现跨列，结果如下：
在这里插入图片描述
其他行依次类推，完整代码如下：

<div style="display:flex;justify-content: center;align-items: center;">
        <form action="">
            <table border="1px" bordercolor="#000000" cellspacing="0px">
                <caption><h3>个人简历</h3></caption>
    
                <!-- 第一行 -->
                <tr>
                    <td style="text-align: center; width: 80px;">姓名</td>
                    <td style="width: 80px;text-align: center;">
                        <input type="text" name="name" id="name" style="width: 90%;text-align: center;" >
                    </td>
                    <td style="text-align: center; width: 80px;">性别</td>
                    <td style="width: 80px;text-align: center;">
                        <input type="text" name="sex" id="sex" style="width: 90%;text-align: center;" >
                    </td>
                    <td style="text-align: center; width: 80px;">出生年月</td>
                    <td style=" width: 80px;text-align: center;">
                        <input type="text" name="birthday" id="birthday" style="width: 90%;text-align: center;" >
                    </td>
                    <td rowspan="4" style="width: 90px;vertical-align: top;">
                        <input type="file" name="picture" id="picture" style="width: 90%;">
                    </td>
                </tr>

                <!-- 第二行 -->
                <tr>
                    <td style="width: 80px; text-align: center;">民族</td>
                    <td style="width: 80px;text-align: center;">
                        <input type="text" name="nation" id="nation" style="width: 90%;text-align: center;">
                    </td>
                    <td style="text-align: center; width: 80px;">政治面貌</td>
                    <td style="width: 80px;text-align: center;">
                        <input type="text" name="face" id="face" style="width: 90%;text-align: center;">
                    </td>
                    <td style="text-align: center; width: 80px;">身高</td>
                    <td style="width: 80px;text-align: center;">
                        <input type="text" name="height" id="height" style="width: 90%;text-align: center;">
                    </td>
    
                </tr>
    
                <!--  -->
                <tr>
                    <td style="width: 80px; text-align: center;">学制</td>
                    <td style="width: 80px;text-align: center;">
                        <input type="text" name="学制" id="3-1" style="width: 90%;text-align: center;">
                    </td>
                    <td style="text-align: center; width: 80px;">学历</td>
                    <td style="width: 80px;text-align: center;">
                        <input type="text" name="学历" id="3-2" style="width: 90%;text-align: center;">
                    </td>
                    <td style="text-align: center; width: 80px;">户籍</td>
                    <td style="width: 80px;text-align: center;">
                        <input type="text" name="户籍" id="3-3" style="width: 90%;text-align: center;">
                    </td>
                </tr>
                
                <!--  -->
                <tr>
                    <td style="width: 80px; text-align: center;">专业</td>
                    <td style="width: 80px;text-align: center;">
                        <input type="text" name="专业" id="4-1" style="width: 90%;text-align: center;">
                    </td>
                    <td colspan="2" style="text-align: center; width: 160px;">毕业学校</td>
                    <td colspan="2"style="width: 160px;text-align: center;">
                        <input type="text" name="毕业学校" id="4-2" style="width: 95%;text-align: center;">
                    </td>
    
                </tr>
    
                <!--  -->
                <tr>
                    <th colspan="7" style="width: 570px;">技能、特长或爱好</th>
                </tr>
      
                <!--  -->
                <tr>
                    <td style="width: 80px; text-align: center;">外语等级</td>
                    <td colspan="2" style="width: 160px;text-align: center;">
                        <input type="text" name="外语等级" id="5-1" style="width: 95%;text-align: center;">
                    </td>
                    <td style="text-align: center; width: 80px;">计算机</td>
                    <td colspan="3" style="width: 250px;text-align: center;">
                        <input type="text" name="计算机" id="5-2" style="width: 97%;text-align: center;">
                    </td>
                </tr>
    
                <!--  -->
                <tr>
                    <td colspan="7" style="text-align: center;width: 560px;">个人履历</td>
                </tr>

                <!--  -->
                <tr>
                    <td style="width: 80px; text-align: center;">时间</td>
                    <td colspan="2" style="width: 160px;text-align: center;">单位</td>
                    <td colspan="4" style="width: 320px;text-align: center;">经历</td>
                </tr>
    
                <!--  -->
                <tr>
                    <td style="width: 80px;text-align: center;">
                        <input type="text" name="时间1" id="6-1" style="width: 90%;text-align: center;">
                    </td>
                    <td colspan="2" style="width: 160px;text-align: center;">
                        <input type="text" name="单位1" id="6-2" style="width: 95%;text-align: center;">
                    </td>
                    <td colspan="4" style="width: 330px;text-align: center;">
                        <input type="text" name="经历1" id="6-3" style="width: 97%;text-align: center;">
                    </td>
                </tr>
    
                <!--  -->
                <tr>
                    <td style="width: 80px;text-align: center;">
                        <input type="text" name="时间2" id="7-1" style="width: 90%;text-align: center;">
                    </td>
                    <td colspan="2" style="width: 160px;text-align: center;">
                        <input type="text" name="单位2" id="7-2" style="width: 95%;text-align: center;">
                    </td>
                    <td colspan="4" style="width: 330px;text-align: center;">
                        <input type="text" name="经历2" id="7-3"style="width: 97%;text-align: center;">
                    </td>
                </tr>
    
                <!--  -->
                <tr>
                    <td style="width: 80px;text-align: center;">
                        <input type="text" name="时间3" id="8-1" style="width: 90%;text-align: center;">
                    </td>
                    <td colspan="2" style="width: 160px;text-align: center;">
                        <input type="text" name="单位3" id="8-2" style="width: 95%;text-align: center;">
                    </td>
                    <td colspan="4" style="width: 330px;text-align: center;">
                        <input type="text" name="经历3" id="8-3" style="width: 97%;text-align: center;">
                    </td>
                </tr>
    
                <!--  -->
                <tr>
                    <td colspan="7" style="text-align: center;width: 570px;">联系方式</td>
                </tr>
    
                <!--  -->
                <tr>
                    <td style="text-align: center; width: 80px;">通信地址</td>
                    <td colspan="2" style="width: 160px;text-align: center;">
                        <input type="text" name="通信地址" id="9-1" style="width: 95%;text-align: center;">
                    </td>
                    <td style="text-align: center; width: 80px;">联系电话</td>
                    <td colspan="3"style="width: 250px;text-align: center;">
                        <input type="text" name="联系电话" id="9-2" style="width: 97%;text-align: center;">
                    </td>
                </tr>
    
                <!--  -->
                <tr>
                    <td style="text-align: center; width: 80px;">E-mail</td>
                    <td colspan="2" style="width: 160px;text-align: center;">
                        <input type="text" name="E-mail" id="10-1" style="width: 95%;text-align: center;">
                    </td>
                    <td style="text-align: center; width: 80px;">邮编</td>
                    <td colspan="3" style="width: 250px;text-align: center;">
                        <input type="text" name="邮编" id="10-2" style="width: 97%;text-align: center;">
                    </td>
                </tr>
    
                <!--  -->
                <tr>
                    <td colspan="7" style="text-align: center;width: 570px;">自我评价</td>
                </tr>

                <tr>
                    <td colspan="7" style="text-align: center; width: 570px;">
                        <textarea name="自我评价" id="11" cols="36" rows="16" style="width:98%;">&emsp;&emsp;</textarea>
                    </td>
                </tr>
    
    
    
            </table>
        </form>
    </div>

写的不好希望联系指正，最后求一键三连！！！！！！！

流萤free

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
HTML表格与表单

HTML实训003一、表格table二、表单三，练习代码一、表格table1、创建table<table> <tr> <td>单元格内的文字</td> ... </tr> ...</table><table>、</able>、<tr> 、 <td> ，他们是创建表格的基本标签，缺一不可注意：(1) table定义一个表格，一个table
复制链接

扫一扫