HTML表单表格标签通用案例

最新推荐文章于 2023-08-13 17:38:03 发布
最新推荐文章于 2023-08-13 17:38:03 发布
阅读量122 收藏
点赞数
分类专栏： HTML 文章标签： html 数学建模 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56653797/article/details/131258676
版权

员工表格

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工表格</title>
    <style type="text/css">
      table, tr, td,th {
        border: 2px solid blue;
        border-collapse: collapse; //收缩边框
      }
      table {
        background-color: #CCCCCC;
        /*表格中的文字居中*/
        text-align: center;
      }
    </style>
</head>
<body>
<!--
  table: 标签是表格标签border: 设置表格标签
  width: 设置表格宽度height: 设置表格高度
  align: 设置表格相对于页面的对齐方式
  cellspacing: 设置单元格间距
  tr: 是行标签 th是表头标签 td是单元格标签
  align: 设置单元格文本对齐方式
-->
<div align="center">
  <h1>雇员薪资信息</h1>
  <table width="500px">
    <tr>
      <th>编号</th>
      <th>名字</th>
      <th>性别</th>
      <th>薪水</th>
      <th>职位</th>
      <th>email</th>
    </tr>
    <tr>
      <td>111</td>
      <td>诉衷情の麻雀</td>
      <td>男</td>
      <td>10000.00</td>
      <td>总裁</td>
      <td>27830@qq.com</td>
    </tr>
    <tr>
      <td>111</td>
      <td>诉衷情の麻雀</td>
      <td>男</td>
      <td>10000.00</td>
      <td>总裁</td>
      <td>27830@163.com</td>
    </tr>
    <tr>
      <td>111</td>
      <td>诉衷情の麻雀</td>
      <td>男</td>
      <td>10000.00</td>
      <td>总裁</td>
      <td>sparrow@163.com</td>
    </tr>
  </table>
</div>
</body>
</html>

课程表 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程表</title>
</head>
<body>
<div align="center">
    <h1>课程表</h1>
    <table border="1px"  bordercolor="blue" width="500px">
        <tr>
            <th>项目</th>
            <th colspan="5">上课</th>
            <th colspan="2">休息</th>
        </tr>
        <tr>
            <th>星期</th>
            <th>周一</th>
            <th>周二</th>
            <th>周三</th>
            <th>周四</th>
            <th>周五</th>
            <th>周六</th>
            <th>周日</th>
        </tr>
        <tr>
            <td rowspan="4">上午</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>英语</td>
            <td>物理</td>
            <td>计算机</td>
            <td rowspan="4">休息</td>
        </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>政治</td>
            <td>毛概</td>
            <td>马克思</td>
            <td>体育</td>
            <td>数学</td>
            <td>语文</td>
        </tr>
        <tr>
            <td rowspan="2">下午</td>
            <td>历史</td>
            <td>政治</td>
            <td>地理</td>
            <td>心理</td>
            <td>美术</td>
            <td>音乐</td>
            <td rowspan="2">休息</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>数学</td>
            <td>语文</td>
            <td>语文</td>
            <td>体育</td>
            <td>美术</td>
        </tr>
    </table>
</div>
</body>
</html>

 用户注册信息表单

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单格式化</title>
</head>
<body>
<form>
  <h1>用户注册信息</h1>
  <table>
    <tr>
      <td>用户名称:　</td>
      <td><input type="text" name="username"></td>
    </tr>
    <tr>
      <td>用户密码:　</td>
      <td><input type="password" name="pwd1"></td>
    </tr>
    <tr>
      <td>确认密码:　</td>
      <td><input type="password" name="pwd2"></td>
    </tr>
    <tr>
      <td>选择你喜欢的运动项目: </td>
      <td><input type="checkbox" name="sport" value="lq">篮球 <input type="checkbox" name="sport" value="zq" checked>足球 <input type="checkbox" name="sport" value="sq">手球 </td>
    </tr>
    <tr>
      <td>请选择性别: </td>
      <td><input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female">女</td>
    </tr>
    <tr>
      <td>请选择城市: </td>
      <td><select name="city">
        <option>--选择--</option>
        <option value="cd">成都</option>
        <option value="bj">北京</option>
        <option value="sh">上海</option>
      </select></td>
    </tr>
    <tr>
      <td>自我介绍: </td>
      <td><textarea rows="6" cols="20"></textarea></td>
    </tr>
    <tr>
      <td>选择你的文件(头像)</td>
      <td><input type="file" name="myfile"></td>
    </tr>
    <tr>
      <td><input type="submit" value="提交"/></td>
      <td><input type="reset" value="重置"/></td>
    </tr>
  </table>


</form>
</body>
</html>

 跨行跨列表

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跨行跨列表格</title>
</head>
<body>
<!--
  合并列: colspan="列数"
  合并行: rowspan="行数"
  cellspacing: 指定单元格的空隙大小 :0 表示没有空隙
  bordercolor: 指定表格边框的演示
  border: 表格边框
  width: 表格的宽度
-->
<table border="1" bordercolor="#E87EFA" cellspacing="0"  width="500px" height="250px">
    <tr>
        <!--合并3列-->
        <td colspan="3" align="center">星期一菜谱</td>
    </tr>
    <tr>
        <td rowspan="2">素菜</td>
        <td>青草茄子</td>
        <td>花椒扁豆</td>
    </tr>
    <tr>
<!--        <td>第3行第一列</td>-->
        <td>小葱豆腐</td>
        <td>炒白菜</td>
    </tr>
    <tr>
        <td rowspan="2">荤菜</td>
        <td>油焖🦐</td>
        <td>海参乌龟🐢</td>
    </tr>
    <tr>
        <td>红烧肉 <img src="img/log.ico" width="100px"></td>
        <td>烤全羊</td>
    </tr>
</table>
</body>
</html>

诉衷情の麻雀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML表格标签的案例
weixin_45904557的博客
02-26 2381
前言 上一篇是表格的基本结构标签和一些属性以及怎么样合并单元格，这篇博客就来具体练习一下table的使用 1. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> td{ text-align: center; font-size: 24px
HTML表格标签
m0_57898822的博客
04-04 2725
html表格标签及属性
HTML表格标签的基础用法与实例
吴胡随笔的博客
06-27 585
文章目录一、表格的作用二、表格骨架标签三、表格的样式四、表格其他标签五、合并单元格六、综合练习 一、表格的作用 在CSS还未普及的时候一些简单的网站使用表格布局是十分快捷的，开发人员只要按照需求，简单的对表格进行行列的拆分，就能实现设计页面的布局；随着互联网的发展以及CSS的普及用户的审美提升，表格布局渐渐淡出了布局手段行列。虽然表格现在不常用于布局，但是在展示一些后台数据的时候表格可以让数据显示的非常清晰规整，阅读起来十分方便，所以我们常用表格来展示一些数据。 二、表格骨架标签 <table>
HTML -- 常用标签及示例总结
Qlz的博客
12-09 809
1 标签语义 1.1 标签属性 2 标题标签 h1 - h6 3 段落和换行标签 3.1 段落标签 3.2 换行标签 4 文本格式化标签 5 div和span 6 图像标签 7 超链接标签 7.1 链接的语法格式 7.2 链接分类 8 表格标签 8.1 表格的主要作用 8.2 表格的基本语法 8.3 表头单元格标签 8.4 表格属性 8.5 表格结构标签 8.6 合并单元格 9 列表标签 9.1 无序列表 9.2 有序列表 9.3 自定义列表 10 表单标签 10.1 为什么需要表单 10.2 表单的组成
公司员工信息纯HTML代码写表格table
qq_54108380的博客
09-07 1160
代码如下： border 为边框的厚度为1px(像素) rules 为合并相邻之间表格的边框 cellpadding：代表单元格边框到内容之间的距离（留白） cellspacing：用来指定表格各单元格之间的空隙。参数值是数字，表示单元格间隙的大小，单位为px。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格联系&lt...
超经典的Web前端与移动开发基础视频 Web前端基础开发视频教程 移动开发基础视频教程
08-20
31前端开发基础视频-表格标签的使用.avi 32前端开发基础视频-单元格的合并.avi 33前端开发基础视频-div和span标签的应用.avi 34前端开发基础视频-表单标签form-input-select-textarea.avi 35前端开发基础视频-...
（全）传智播客PHP就业班视频完整课程
10-30
图像 表格 实际应用-菜谱 课堂练习-课程表 8-11 5.无序列表 有序列表 框架 8-12 1.浮动窗口 表单及表单控件① 8-12 2.表单及表单控件② 8-12 3.多媒体页面 标签汇总① 地图映射1 8-12 4.多媒体页面 标签汇总① 地图...
史上最全韩顺平传智播客PHP就业班视频，10月份全集
03-26
图像 表格 实际应用-菜谱 课堂练习-课程表 8-11 5.无序列表 有序列表 框架 8-12 1.浮动窗口 表单及表单控件① 8-12 2.表单及表单控件② 8-12 3.多媒体页面 标签汇总① 地图映射1 8-12 4.多媒体页面 标签汇总① 地图...
史上最全韩顺平传智播客PHP就业班视频，9月份全集
03-26
图像 表格 实际应用-菜谱 课堂练习-课程表 8-11 5.无序列表 有序列表 框架 8-12 1.浮动窗口 表单及表单控件① 8-12 2.表单及表单控件② 8-12 3.多媒体页面 标签汇总① 地图映射1 8-12 4.多媒体页面 标签汇总① 地图...
HTML表格代码的示例
12-20
这是利用HTML表格代码制作出来的一个表格。
HTML表格（table）实例
热门推荐
hj1993的博客
07-30 5万+
HTML表格（table）实例 实例1：课程表 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;课程
（前端）HTML之表格
weixin_65479202的博客
04-21 1589
在HTML中学习表格非常有必要，表格的使用比较常见也很广泛！！！
入门HTML(含常见标签)—附实现案例
qq_63218110的博客
11-27 4549
HTML不同于我们所熟知的C，Java等编程语言，它是一种标签化语言，其形式类似于XML。本篇文章主要常见文本标签和文档结构标签。
HTML表单标签大全并附有详细代码+案例
小新的博客
08-13 5070
HTML表单标签 HTML 表单用于搜集不同类型的用户输入。 一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮。 1. 表单标签 HTML 表单用于收集用户输入，表单使用 标签创建。表单可包含文本字段、复选框、单选框、提交按钮等等。 注意：元素是块级元素，其前后会产生折行。
HTML——表格标签＜table＞与表格实现
qq_51869518的博客
06-25 4661
表格标签的实际应用和表格属性colspan和rowspan的详细解释与使用的实例和规则，以及不同形式的表格的实现；课程表、日历和的代码实现。欢迎大家能有更好的建议。
HTML的table表格元素及用法
qq_52016943的博客
05-26 2141
1.<table>标签 表格通过七个标签创建，分别是 <table>表格标签 <tr>行标签 <th>表头标 <td>表格数据标签 <thead>定义表头 <tbody> 元素用于对 HTML 表格中的主体内容进行分组 <tfoot> 元素用于对 HTML 表格中的表注（页脚）内容进行分组。 ...
html table 示例,HTML表格实例
weixin_33533797的博客
06-05 967
表格实例每个表格由 table 标签开始。每个表格行由 tr 标签开始。每个表格数据和英文由 td 标签开始。每个表格汉子由 th 标签开始。这是一个段落。这是另一个段落。这个单元包含一个表格：三行三列:思思的表格姓名电话2112你好31这个单元包含一个列表：11香蕉菠萝HELLO运行结果WechatIMG101.pngWechatIMG100.png单元格边距、间距、背景颜色、排列没有 cel...
HTML5作业1员工信息登记表
Sad_dog的博客
03-06 2629
首先，我们的作业是写个表单，如图所示然后我们开始对它进行分析排版 1、一般来说表单位置应当居中，我们可以在外部利用margin: 0 auto;position: relative;内部利用left: 50%;margin-left:来达到居中的目的。 2、标题可使用h标签，主体部分明显行高相同，可使用有序标签ul>li达到排版的目的 3、由于在li行列只有最后一行不同，其他都是三列，故li...
html表单案例练习
最新发布
09-28
标签是用来创建HTML表单的，其中的action属性用于指定表单提交的URL地址，method属性用于指定表单提交的方式（可以是get或post）。<input>标签可以用来创建不同类型的表单元素，其中的type属性用于指定元素的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

诉衷情の麻雀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值