html5表格标签

最新推荐文章于 2023-07-18 19:11:12 发布
最新推荐文章于 2023-07-18 19:11:12 发布
阅读量304 收藏
点赞数
分类专栏： 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44116353/article/details/114858525
版权
前端 同时被 2 个专栏收录
15 篇文章 0 订阅
订阅专栏
html
13 篇文章 0 订阅
订阅专栏

表单的作用
并不是用来布局页面的只是用来展示数据可以更加清晰的展示了解到数据信息
表格的基本使用

    <table>
        <tr><td>姓名</td><td>性别</td><td>年龄</td></tr>
        <tr><td>刘德华</td><td>男</td><td>54</td></tr>
        <tr><td>张学友</td><td>男</td><td>51</td></tr>
        <tr><td>郭富城</td><td>男</td><td>56</td></tr>
        <tr><td>尊龙</td><td>男</td><td>59</td></tr>
    </table>

table相当于是一个大的表单
tr相当于是是表单的一行
td是tr那一行的每一个小格
th是表头标签里面的字体会加粗显示并且居中
在这里插入图片描述
表格属性
这里以后用CSS来实现但是可以记一下他的属性有哪些

属性属性值
aligncenter居中对齐 right右对齐 left左对齐
border1有边框或者" " 默认为""没有边框
cellpadding字体与边框的距离默认为1像素
cellspacing单元格直接的距离默认为2像素
width像素值或者百分比宽度
heigh像素值或者百分比长度
 <table align="center" border="1" cellpadding="20" cellspacing="0">
        <tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
        <tr><td>刘德华</td><td>男</td><td>54</td></tr>
        <tr><td>张学友</td><td>男</td><td>51</td></tr>
        <tr><td>郭富城</td><td>男</td><td>56</td></tr>
        <tr><td>尊龙</td><td>男</td><td>59</td></tr>
    </table>
姓名性别年龄
刘德华男54
张学友男51
郭富城男56
尊龙男59
<body>
    <table align="center" border="1" cellpadding="5" cellspacing="0" width="800">
        <tr>
            <th>排行</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>今日搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="https://www.easyicon.net/api/resizeApi.php?id=521668&size=128" alt="上升" width="20px"></td>
            <td>今日搜索</td>
            <td>最近七日</td>
            <td><a href="#">贴吧</a>  
                <a href="">图片</a>
                <a href="">百科</a>
            </td>
        </tr>


    </table>
</body>

</table>
排行关键词趋势今日搜索最近七日相关链接
1鬼吹灯上升今日搜索最近七日贴吧 图片 百科
简单实现一个表单案例

表单管理

thead
表单头部的部分
tbody
表单身体部分
用thead和tbody是为了更好的管理表单

   <table align="center" border="1" cellpadding="5" cellspacing="0" width="800">
       <thead> 
           <tr>
            <th>排行</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>今日搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="https://www.easyicon.net/api/resizeApi.php?id=521668&size=128" alt="上升" width="20px"></td>
            <td>今日搜索</td>
            <td>最近七日</td>
            <td><a href="#">贴吧</a>  
                <a href="">图片</a>
                <a href="">百科</a>
            </td>
        </tr>
    </tbody>

    </table>

在这里插入图片描述

表单合并

 <table border="1"cellspacing="0" align="center" width="500" height="400">
        <!-- 合并单元格
        1先确定跨行还是跨列
        2找到目标单元格，写上合并方式=合并单元格数量 跨列合并 左边单元格是目标单元格合并代码写在目标单元格里  <td colspan="2"></td>  
        跨行合并 目标单元格在上面 代码写目标单元格里面<td rowspan="2"></td> 
        3删除多余单元格 --> 
            <tr>
                <td></td>
                <td></td>
                <td colspan="2"></td>
                <!-- <td></td> -->需要删掉
            </tr>
        
        
            <tr>
                <td rowspan="2"></td> 
                <!-- 第二行第一个和第三行第一个合并 合并完以后相当于第一列只有两行删除第三行第一列那一格 -->
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <!-- <td></td> -->需要删掉
                <td></td>
                <td></td>
                <td></td>
            </tr>

            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>   
    </table>

在这里插入图片描述

列表标签

无序列表ul

 <h4>常用英雄</h4>
    <ul>

        <li>剑姬</li>
        <li>剑圣</li>
        <li> <a href="#">武器大师 </a>  </li>
    </ul>

ul里面只能放li标签
li里面可以放其他标签

有序列表ol

   <h4>英雄等级</h4>
    <ol>
          <li>99</li>
          <li>88</li>
          <li>77</li>
          <li>66</li>
    </ol>

仅做了解

英雄等级
  1. 99
  2. 88
  3. 77
  4. 66
每个元素前面有1234等等序号

自定义列表标签

关注我们
微博
微信
qq 
  <dl>
        <dt>关注我们</dt>
        <dd>微博</dd>
        <dd>微信</dd>
        <dd>qq</dd>
    </dl>

dl最外层
dt头部
dd内容
dt和dd是并列关系

input表单

<body>
    <!-- 创建input表单之前要创建一个form表单域来放置这个表单action是跳转的页面 method是请求方式 -->
    <form action="xxx.php" method="GET">
    <!-- type属性有text文本 radio要想实现单选name值要相同这里为sex        checkbox复选框 
    submit是吧表单域里面的表单的数据提交给后台
    reset是清除表单数据
    button一般和JavaScript一起使用 -->
    用户名：<input type="text" name="username" value="请输入用户名" ><br>
    用户密码：<input type="password" name="password" value="" maxlength="6" ><br>
    男<input type="radio" name="sex" value="男">
    女<input type="radio" name="sex" value="女">
    人妖<input type="radio" name="sex" value="人妖"><br>
    吃饭<input type="checkbox" name="hobby" value="吃饭">
    睡觉<input type="checkbox" name="hobby" value="睡觉"><br>
    <input type="submit" name="" value="点击注册"><br>
    <input type="reset" name="" value="重写填写"><br>
    <input type="button" name=""value ="点击获取短信验证码"><br>
</form>
</body>

使用label标签

<body>
    <!-- 创建input表单之前要创建一个form表单域来放置这个表单action是跳转的页面 method是请求方式 -->
    <form action="xxx.php" method="GET">
    <!-- type属性有text文本 radio单选 checkbox复选框 
    submit是吧表单域里面的表单的数据提交给后台
    reset是清除表单数据
    button一般和JavaScript一起使用 -->
    用户名：<input type="text" name="username" value="请输入用户名" ><br>
    用户密码：<input type="password" name="password" value="" maxlength="6" ><br>
    <label for="nan">男</label><input type="radio" name="sex" value="男" id="nan">
    <label for="nv">女</label><input type="radio" name="sex" value="女" id="nv">
    <label for="renyao">人妖</label><input type="radio" name="sex" value="人妖" id="renyao"><br>
    <label for="chifan">吃饭</label><input type="checkbox" name="hobby" value="吃饭" id="chifan">
    <label for="shuijiao">睡觉</label><input type="checkbox" name="hobby" value="睡觉" id="shuijiao"><br>
    <input type="submit" name="" value="点击注册"><br>
    <input type="reset" name="" value="重写填写"><br>
    <input type="button" name=""value ="点击获取短信验证码"><br>
<!-- label标签 for填写对应inpu标签的id然后就可以通过点击文字也能点击勾选框方便用户的操作优化体验-->
   
    
</form>
</body>

关于select表单的使用

<form action="">
    星球
<select name="" id="">
    <option value="">地球</option>
    <option value="">水星</option>
    <option value="">火星</option>
    <option value="" selected>月球</option>
    <!-- selectd可以默认吧选项定为某一项 -->
</select>

</form>

一个select表单至少有一对option

文本域使用
当用户输入的文本很多的时候就可以使用文本域标签


<form action="">
     <textarea name="" id="" cols="30" rows="10">
        这个是用文本域来描述的
     </textarea>
</form>
悠然少年心
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5系列 07 表格系标签
weixin_43422005的博客
07-13 335
table 表格标签 table标签用于定义一个表格。 它是一个块级标签，内部可用于嵌套的元素较多： caption - 表格标题 thead - 表头结构（仅语义化标签，无实际作用） tbody - 表体结构（仅语义化标签，无实际作用） tfoot - 表尾结构（仅语义化标签，无实际作用） th - 表头单元格 td - 表体单元格 tr - 表行 如下所示，定义一个4行3列的表格： <!DOCTYPE html> <html lang="en"> <head>
前端HTML5----第二天：表格标签
weixin_52943417的博客
02-28 292
使用场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主题两大部分。一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。这样可以更好的分清表格结构。以上两个标签都是放在。表格不是用来布局页面的，而是用来展示数据的。标签表示HTML表格的表头部分。
html5 列表/表格标签
weixin_49346755的博客
09-30 1054
HTML的列表主要有三种，一种是无序列表，一种是有序列表，还有一种是说明列表。无序列表用标签来定义，有序列表用标签来定义，说明列表用标签来定义。对于无序列表和有序列表，用标签来定义列表中项目；对于说明列表，用标签来定义列表项目，用标签来定义项目的说明。HTML中的表格用标签来定义。一个 HTML 表格包括一个 标签，一个或多个、 以及 标签。
HTML5--表格、表单标签
Lance2574的博客
08-09 366
一、表格标签 <table> <thead>--tr>th <tbody>--tr>td <tfoot> caption：作为table的子元素，表示表格的标题信息 colgroup：列分组，定义一个表中的一组列，作为table的子元素，同时放在caption的后面，其它元素的前面。 col：经常作为colgroup的子元素，又span属性...
html5 表格标签 table tr td
weixin_30699741的博客
06-15 3002
最重要的三个 <table> 表格声明标签 属性: boarder边框粗细 style可配合css 使用 <tr>行标签 table row 有表就可以建行 <td>单元格标签 table data 有行就可以建数据 属性: colspandata占用格子, 或者可以理解为这个单...
HTML5制作表格样式
09-27
通过这种方式，我们可以创建出具有专业外观的HTML5表格，不仅结构清晰，而且视觉效果出色。这样的表格适用于各种用途，包括报告、数据分析或网页中的信息展示。学习并掌握这些HTML和CSS技巧，将有助于提升你的网页...
HTML5标签小集
09-28
HTML5是超文本标记语言（HTML）的最新版本，它引入了许多新的标签和特性，旨在使网页设计更加语义化，提高用户体验，并简化开发者的工作。这些标签帮助开发者更清晰地定义网页内容的结构，增强可访问性和搜索引擎...
HTML5标签大全
12-14
不允许写结束标记的标签：area(定义图像映射中的区域)、base(为页面上的所有链接规定默认地址或默认目标)、br、col(为表格中一个或多个列定义属性值)、embed(定义嵌入的内容，比如插件–5)、hr、img、input、keygen...
html5标签大全
05-19
表格标签 * `<table>`：定义表格 * `<caption>`：定义表格标题 * `<col>`：定义表格中一个或多个列的属性值 * `<colgroup>`：定义表格中供格式化的列组 * `<thead>`：定义表格中的表头内容 * `<tbody>`：定义表格中...
HTML标签总结，包含HTML4和HTML5
12-31
本文总结了HTML4和HTML5中的常用标签，涵盖了基本结构标签、文本标签、图片标签、链接标签、表格标签、表单标签、多媒体标签、框架标签、动态标签等。 基本结构标签 * `<!DOCTYPE>`: 定义文档类型 * `<html>`: ...
HTML基础——表格标签
Ariel_欢
01-10 9513
在过去表格标签用的非常多，绝大多数的网站都是表格标签来制作的，也就是说表格标签是一个时代的代表。 1.什么是表格标签？ 表格标签的作用：用来给一堆数据添加表格语义。 其实表格是一种数据的展现形式，当数据量非常大的时候，表格这种展现形式被认为是最为清晰的一种展现形式。 2.表格标签的格式： <table> <tr> <td>需要显示的内容</td> </tr>...
HTML系列之表格标签
老__L的博客
10-25 5479
本文主要介绍caption、col、colgroup、table、tbody、td、tfoot、th、thead、tr标签。 table 开始标签和结束标签不能省略；表格中由行中的单元格组成；表格中没有列元素，列的个数取决于行的单元格个数；caption 开始标签和结束标签都不能省略；当 table 标签是 caption 的父元素，caption 是 figure 元素的唯一后代的时候，使用 figcaption 元素替代 caption；
HTML基础---表格标签
weixin_48055520的博客
04-15 1071
HTML--表格标签
HTML5基础学习-表格标签
weixin_61920612的博客
11-26 1707
学习内容： 1.综合案例 <!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">
7.表格标签
potato123232的博客
03-11 3523
表格一般用来展示数据，有时也用来布局，表格标签中有六种常用标签，table,tr,td,th,thead和tbody,我们先看前面三个 目录 1基本用法 2表格属性 3表格结构标签 4合并单元格 4.1跨行合并(竖着) rowspan 4.2跨列合并(横着) colspan 1基本用法 table是整个的大表格，tr是一行，td是一行中的一个 我们先简单写个例子 td可以创建后不写内容，再创建时会把前面的格子空过去 这个就是我们一个简单的表格 ...
表格常用标签及属性
weixin_60988128的博客
03-28 2535
网站首页下方的网站导航通常可以使用自定义列表来实现自定义列表的基本语法：
HTML表格与表单标签
最新发布
sun12345678_的博客
07-18 564
自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以标签开始。每个自定义列表项以开始。每个自定义列表项的定义以开始。< h2 > 减肥运动排行榜 < dl > < dt > 1、壁球 < dd > 每半小时消耗热量三百卡。可锻炼两腿灵活性，可增加速度能力。但心肺功能较差者不宜。 < dl > < dt id = " th1 " > 2、跳绳 < dd > 每半小时消耗热量四百卡。
基本表格标签
m0_61417029的博客
07-08 2557
表格基本标签
前端学习之HTML——表格
Jane_xxxxxy的博客
07-26 602
表格的主要作用 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理 表格不是用来布局页面的,而是用来展示数据的。 表格的具体用法： <table> <tr> <td>单元格内的文字</td> ... </tr>
wangeditor5过滤内容表格标签
06-13
可以使用wangEditor5提供的`filter`过滤器来过滤表格标签。 具体的代码实现如下： ```javascript // 创建编辑器实例 const editor = new wangEditor('#editor') // 注册过滤器 editor.config.filter = (html) => { // 去除表格标签 return html.replace(/<table[^>]*>[\s\S]*?<\/table>/g, '') } // 渲染编辑器 editor.create() ``` 在上面的代码中，我们注册了一个过滤器，用于过滤表格标签。具体过程是通过正则表达式匹配`<table>`标签，然后将其替换为空字符串，从而达到过滤表格标签的目的。 需要注意的是，这种方式仅仅是在渲染时过滤表格标签，而不是在提交表单时过滤表格标签。如果需要在表单提交时过滤表格标签，可以在提交表单前使用相同的过滤器过滤表单内容。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值