HTML标签之表格标签和表格案例

最新推荐文章于 2024-05-01 23:43:22 发布
最新推荐文章于 2024-05-01 23:43:22 发布
阅读量376 收藏 3
点赞数 4
分类专栏： # HTML 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45922256/article/details/137287229
版权

表格标签的使用案例

<!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>Document</title>
</head>
<body>
    <!-- 
        <table></table> 是用于定义表格的标签。
        <tr></tr> 标签用于定义表格中的行，必须嵌套在<table></table>标签中。
        <td></td> 用于定义表格中的单元格，必须嵌套在<tr></tr> 标签中.
        字母 td 指表格数据（table data），即数据单元格的内容。
        <th> 标签表示HTML表格的表头部分，里面的文本内容会加粗居中显示
     -->
     <table>
        <tr><th>姓名</th><th>性别</th> <th>年龄</th></tr>
        <tr><td>罗小黑</td><td>男</td> <td>21</td></tr>
        <tr><td>胡歌</td><td>男</td> <td>27</td></tr>
        <tr><td>刘亦菲</td><td>女</td> <td>21</td></tr>
        <tr><td>赵丽颖</td><td>女</td> <td>26</td></tr>
         
     </table>
     <!-- 
         align           left、center、right     规定表格相对周围元素的对齐方式
         border          1或“”                   规定表格单元是否拥有边框，默认为“”，表示没有边框
         cellpadding     像素值                   规定单元边沿与其内容之间的空白，默认1像素
         cellspacing     像素值                   规定单元格之间的空白，默认2像素
         width           像素值或百分比            规定表格的宽度
      -->
      <table align="center" border="1" cellpadding="20">
        <tr><th>姓名</th><th>性别</th> <th>年龄</th></tr>
        <tr><td>罗小黑</td><td>男</td> <td>21</td></tr>
        <tr><td>胡歌</td><td>男</td> <td>27</td></tr>
        <tr><td>刘亦菲</td><td>女</td> <td>21</td></tr>
        <tr><td>赵丽颖</td><td>女</td> <td>26</td></tr>
         
     </table>

     <table align="left" border="1" cellspacing="0" width="300" height="200">
        <tr><th>姓名</th><th>性别</th> <th>年龄</th></tr>
        <tr><td>罗小黑</td><td>男</td> <td>21</td></tr>
        <tr><td>胡歌</td><td>男</td> <td>27</td></tr>
        <tr><td>刘亦菲</td><td>女</td> <td>21</td></tr>
        <tr><td>赵丽颖</td><td>女</td> <td>26</td></tr>
         
     </table>
</body>
</html>

在这里插入图片描述

使用表格标签实现一个关于电影关键字和表格内图片展示

<!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 align="center" cellspacing="0" width="500" height="200" border="1">
        <tr>
            <th>排名</th>
            <th>关键字</th>
            <th>趋势</th>
            <th>今日搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="https://cdn.jsdelivr.net/gh/luoxiaohei520/MyPics@img/img/202404021941672.png" width="25"></td>
            <td>333</td>
            <td>222</td>
            <td><a href="https://cn.bing.com/">必应</a>  <a href="http://www.baidu.com/">百度</a>  <a href="#">图片</a></td>
        </tr>

        <tr>
            <td>2</td>
            <td>盗墓笔记</td>
            <td><img src="https://cdn.jsdelivr.net/gh/luoxiaohei520/MyPics@img/img/202404021941672.png" width="25"></td>
            <td>333</td>
            <td>222</td>
            <td><a href="https://cn.bing.com/">必应</a>  <a href="http://www.baidu.com/">百度</a>  <a href="#">图片</a></td>
        </tr>

        <tr>
            <td>3</td>
            <td>西游记</td>
            <td><img src="https://cdn.jsdelivr.net/gh/luoxiaohei520/MyPics@img/img/202404021941672.png" width="25"></td>
            <td>333</td>
            <td>222</td>
            <td><a href="https://cn.bing.com/">必应</a>  <a href="http://www.baidu.com/">百度</a>  <a href="#">图片</a></td>
        </tr>
    </table>
</body>
</html>

表格标签合并单元格

<!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>
    <!-- 
        跨行合并：rowspan=“合并单元格的个数”    把最上侧单元格为目标单元格，写合并代码
        跨列合并：colspan=“合并单元格的个数”    把最左侧单元格为目标单元格，写合并代码
     -->

     <!-- 
         合并单元格的三部曲
         1.先确定是跨行还是跨列合并。
         2.找到目标单元格，写上合并方式=合并的单元格数量。比如：<td colspan="2"></td>
         3.删除多余的单元格
      -->
     <table width="500" height="250" border="1" cellspacing="0">
         <tr>
             <td></td>
             <td colspan="2"></td>
            
         </tr>
         <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
         
            <td></td>
            <td></td>
        </tr>
     </table>
</body>
</html>
Miaow.Y.Hu
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML 使用表单标签实现注册页面的实例代码
12-14
案例说明：　   　- 使用表格实现页面效果  - 超链接不想要有效果，使用href="#" 　- 如果表格里面的单元格没有内容，使用空格作为占位符   　- 使用图片标签提交表单 <input type="image" src="图片的...
HTML超详细--表格标签+相应案例（小说排行榜+三样表格合并）
weixin_45586870的博客
09-29 1181
一、表格标签 表格不是用来布局页面的,而是用来展示数据的。 1.1.表格的具体用法： <table> <tr> <td>单元格内的文字</td> ... </tr> ... </table> 1.<table> </table> 是用于定义表格的标签。 2.<tr> </tr> 标签用于定义表格中的行，必须嵌套在 <tab
table标签使用典例
weixin_42620513的博客
07-27 411
@[<!doctype html> Document </tr><!--行数--> <tr> <td>2行1列的内容</td><!--列数--> <td>2行2列的内容</td><!--th,td比较，<th>的内容显示为粗体，<...
HTML表格标签的案例
weixin_45904557的博客
02-26 2351
前言 上一篇是表格的基本结构标签和一些属性以及怎么样合并单元格，这篇博客就来具体练习一下table的使用 1. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> td{ text-align: center; font-size: 24px
HTML 表格标签、列表标签、表单标签（案例： 注册页面）
酷爱前端的小陈博客
04-16 2209
1. 表格标签 表格是实际开发中非常常用的标签: 1. 表格的主要作用 2.表格的基本语法 1.1 表格的主要作用 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。 总结: 表格不是用来布局页面的,而是用来展示数据的。 1.2 表格的基本语法 1. <table> </table> 是用于定义表格的标签。 2. &...
HTML常用标签之表格标签
qq_47412862的博客
04-07 5339
一、表格主要作用 表格主要是用于显示、展示数据，而不是用来布局页面的。 二、表格的基本语法 1.<table></table>是用于定义表格的标签； 2.<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中； 3.<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中； 4.字母td指表格数据(table data)，即
160个jQuery案例.zip
09-29
HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散...HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
HTML基础课程
06-18
HTML是学会制作网页的第一步，是从事web前端工程师必须学会的标记语言，本课程从基本的HTML入门和作用入手，主要介绍了HTML常见标签如：排版标签、列表、图片、标题、超链接、表格、表单等等。之后扩充讲解了HTML5...
java关于html+css的18点重要内容
07-06
java关于html+css的18点重要基础内容 1、访问协议 2、图片标签的使用 3、HTML 列表 4、HTML 区块（区块元素、行内元素） 5、HTML 表格 6、HTML 内联框架（页面中嵌套页面） ...18、导航菜单案例
HTML5（1）
cookies_s_的博客
04-28 1268
网页制作思路：从上到下，先整体再局部，逐步分析制作分析内容->写代码->保存->刷新浏览器->看效果Vue.js(发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，可以高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
HTML5实用大全(Part.1)
2301_79539778的博客
05-01 1092
本篇博客主要为了帮助大家了解HTML5新特性以及HTML的简单知识部分
HTML5废除的元素
yuxingwu9872的博客
04-25 1327
HTML5中不支持frame框架，只支持iframe框架，或者用服务器方创建的由多个页面组成的符合页面的形式，废除plaintex使用“text/plian”（无格式正文）MIME类型替代。applet、bgsound、blink、marquee等标签。废除acronym使用abbr替代。废除rb, 使用ruby替代。2、不再使用frame框架。废除dir使用ul替代。
infrared-remote-candroid studiodemo
05-05
android studio下载
【新质生产力】新质生产力赋能智能制造数字化解决方案.pptx
05-05
【新质生产力】新质生产力赋能智能制造数字化解决方案.pptx
基于matlab实现的用于应用布格重力异常数据反演地下异常密度体.rar
05-05
基于matlab实现的用于应用布格重力异常数据反演地下异常密度体.rar
node-v8.10.0-linux-x64.tar.xz
最新发布
05-05
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
html网页制作表格代码案例
12-15
以下是一个简单的HTML表格代码案例： ```html <table> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <tr> <td>张三</td> <td>20</td> <td>男</td> </tr> <tr> <td>李四</td> <td>22</td> <td>女</td> </tr> </table> ``` 这个表格包含了一个表头和两行数据，每行数据包含了三列：姓名、年龄和性别。在HTML中，表格由`<table>`标签开始，由`</table>`标签结束。表头由`<tr>`标签开始，由`</tr>`标签结束，并且表头中的每一列都由`<th>`标签开始，由`</th>`标签结束。数据行也由`<tr>`标签开始和结束，但是每一列都由`<td>`标签开始和结束。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Miaow.Y.Hu

赏一口饭吃吧，大大们

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

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

打赏作者

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

抵扣说明：

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

余额充值