html标签总结之表格标签

2023-11-06

1、表格标签

在这里插入图片描述
表格属性:

  • border : 表格边框 写在table标签里面,数值代表边框像素

  • cellpadding : 单元格内的空间 写在table标签里面,数值代表空间像素

  • cellspacing : 单元格之间的空间 写在table标签里面,数值代表空间像素

  • rowspan : 合并行 【具体见下面总结,span v. 贯穿;包括】

  • colspan : 合并列

  • align : 左右对齐方式(right、left、center)

  • 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图表标签</title>
</head>
<body>
    <table>
        <caption>天气预报</caption>
        <tHead>
            <tr>
                <th>时间</th>
                <th>天气</th>
                <th>出行建议</th>
            </tr>
        </tHead>
        <tBody>
            <tr>
                <td>2022-1-2</td>
                <td><img src="./大雪.png" width=30 height="30"></td>
                <td>注意防寒</td>
            </tr>
            <tr>
                <td>2022-1-3</td>
                <td><img src="./小雨.png" width=30 height="30"></td>
                <td>注意带伞</td>
            </tr>
            <tr>
                <td>2022-1-4</td>
                <td><img src="./烈日.png" width=30 height="30"></td>
                <td>注意防嗮</td>
            </tr>
        </tBody>
        <tFood>
            <tr>
                <td>表格页脚</td>
                <td>表格页脚</td>
                <td>表格页脚</td>
            </tr>
        </tFood>
    </table>
</body>
</html>
  • 结果展示
    在这里插入图片描述

2、表格练习

  • 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签练习</title>
</head>
<body>
    <table border="1" cellspacing="0" cellpadding="5" align="center">
        <tHead><!--语义化标签-->
            <tr bgcolor="#F4F8F4">
                <th align="center" width="140">班级名称</th>
                <th align="center" width="140">科目</th>
                <th align="center" width="140">授课内容</th>
                <th align="center" width="140">增值服务</th>
                <th align="center" width="70">课时</th>
                <th align="center" width="100">价格</th>
                <th align="center" width="140">试听</th>
                <th align="center" width="140">购买</th>
            </tr>
        </tHead>
        <tBody><!--语义化标签-->
            <tr>
                <td align="center" rowspan="3"><strong>真题精解班</strong></td>
                <td align="center">行测+申论</td>
                <td align="center">全科历年真题精解</td>
                <td align="center" rowspan="3">课后赠2套模拟卷24小时以内答疑</td>
                <td align="center">48</td>
                <td align="center"><font color="red">1280元</font></td>
                <td align="center"><img src="./试听.png" width="30" height="30"></td>
                <td align="center"><img src="./购物.png" width="30" height="30"></td>
            </tr>
            <tr>
                <!-- <td>真题精解班</td> -->
                <td align="center">行测</td>
                <td align="center">行测历年真题精解</td>
                <!-- <td>课后赠2套模拟卷24小时以内答疑</td> -->
                <td align="center">32</td>
                <td align="center">980元</td>
                <td align="center"><img src="./试听.png" width="30" height="30"></td>
                <td align="center"><img src="./购物.png" width="30" height="30"></td>
            </tr>
            <tr>
                <!-- <td>真题精解班</td> -->
                <td align="center">申论</td>
                <td align="center">申论历年真题精解</td>
                <!-- <td>课后赠2套模拟卷24小时以内答疑</td> -->
                <td align="center">16</td>
                <td align="center" color='red'>580元</td>
                <td align="center"><img src="./试听.png" width="30" height="30"></td>
                <td align="center"><img src="./购物.png" width="30" height="30"></td>
            </tr>
            <!--高分技巧班-->
            <tr>
                <td align="center" rowspan="3"><strong>高分技巧班</strong></td>
                <td align="center">行测+申论</td>
                <td align="center">全科技巧强化</td>
                <td align="center" rowspan="3">入学试卷测评24小时以内答疑</td>
                <td align="center">32</td>
                <td align="center"><font color="red">980元</font></td>
                <td align="center"><img src="./试听.png" width="30" height="30"></td>
                <td align="center"><img src="./购物.png" width="30" height="30"></td>
            </tr>
            <tr>
                <!-- <td>高分技巧班</td> -->
                <td align="center">行测</td>
                <td align="center">行测速解技巧强化</td>
                <!-- <td>入学试卷测评24小时以内答疑</td> -->
                <td align="center">18</td>
                <td align="center">680元</td>
                <td align="center"><img src="./试听.png" width="30" height="30"></td>
                <td align="center"><img src="./购物.png" width="30" height="30"></td>
            </tr>
            <tr>
                <!-- <td>高分技巧班</td> -->
                <td align="center">申论</td>
                <td align="center">申论速解技巧强化</td>
                <!-- <td>入学试卷测评24小时以内答疑</td> -->
                <td align="center">14</td>
                <td align="center">580元</td>
                <td align="center"><img src="./试听.png" width="30" height="30"></td>
                <td align="center"><img src="./购物.png" width="30" height="30"></td>
            </tr>
        </tBody>
    </table>
</body>
</html>

  • 结果展示
    在这里插入图片描述

  • 总结:

    • 写表格很难理解的是合并行和列,简单的方法是,先写出没有合并之前的样子,然后再写要合并的,同时删掉被合并的语句。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

html标签总结之表格标签 的相关文章

  • PHP 在数组内循环

    我怎样才能在一个内部循环array在我的代码中 这是我的脚本的静态版本 val array array value gt Male label gt Male array value gt Female label gt Femal my
  • 如何在C#中使用默认浏览器打开带有锚点(#)的html文件

    我正在尝试在 C 中打开上下文帮助文件 当我没有指定锚点时 它工作得很好 Process Start C Help Help htm 但是当我指定锚点时 它不会打开 Process Start C Help Help htm Toc3420
  • <输入类型=按钮> 与 <按钮> [重复]

    这个问题在这里已经有答案了 我有点困惑 这些有什么区别呢 请不要引用非常旧的帖子 我注意到在 html 和样式表中访问某些样式是不同的内联样式
  • localStorage 获取 NULL?

    我不知道为什么 因为我之前已经这样做过并且工作正常 我认为这可能是因为浏览器问题 错误 localStorage setItem foo bar alert localStorage getItem foo 我使用的是 Firefox 3
  • 居中时仅在文本的最后一行下划线

    我只想在某些文本的最后一行下划线 当文本换行到更多行时 仍然只有最后一行需要加下划线 我找到了这个解决方案 https stackoverflow com questions 15180827 advanced css challenge
  • 调整下拉框中列表的高度[重复]

    这个问题在这里已经有答案了 可能的重复 下拉框显示的高度 https stackoverflow com questions 5600982 height of the dropdown box display hi 如何调整下拉列表中列表
  • 在响应模式下使用 CSS 更改元素顺序

    图1为桌面模式 下面两张图片和文字 总共三个div 图 2 是我希望它在移动浏览器 例如手机 中的显示方式 关于如何实现这一点有什么想法吗 我愿意接受任何建议 这个想法是让文本显示在图像上方 以最好地说明这两个图像的描述 在桌面版本中将文本
  • 如何实现右边缘倾斜的 div? [复制]

    这个问题在这里已经有答案了 我几天来一直在寻找使 div 的右边缘倾斜 45 度的代码 这是我特别想要得到的图像示例 似乎有很多 倾斜边缘 div 的示例 但我找不到任何具有特定右侧倾斜的示例 我花了很多时间试图改变其他人的代码 但结果却一
  • 当 MediaElementAudioSource 输出为零但 CORS 不再是问题时,如何才能播放音频?

    我正在尝试实施
  • 使用 获取用于 javascript 的 RSA 密钥?

    我的 Web 项目需要一个 RSA 密钥对 虽然有一些库 但我认为依靠浏览器 为了安全性和速度 为我生成密钥是个好主意 是否可以使用注册机或其他浏览器 API 来执行此操作 我不知道如何从注册机获取密钥 它们似乎是在提交时生成的 但我不想将
  • 拖放区缩略图宽度图像大小

    如何更改上传图像的缩略图大小 我在我的javascript中尝试过thumbnailWidth 350 但是这不会增加缩略图大小 而缩略图只是看起来放大了 如何操作图像缩略图大小 HTML section section
  • 在打印 CSS 上在每个页面周围绘制边框?

    打印时我需要在每个页面周围绘制边框 我最初是使用带有分页符的 div 来完成此操作 例如 media print contentContainer position inline height 98 width 100 top 0px le
  • 如何为 HTML5 音频元素制作加载栏?

    我正在尝试为 HTML5 音频元素制作一个加载栏 显示加载 缓冲的百分比 对于视频标签 可以使用以下方法进行计算 video buffered end 0 video duration 但我无法让它与音频标签一起使用 它只是返回一个固定值
  • 使组合高度等于浏览器窗口的高度

    http featuredfotografer com http featuredfotografer com Codemirror div 与 header div 结合占用的高度超过了浏览器的高度 我怎样才能使它们的总高度达到浏览器窗口
  • canvas.getContext('2D') 返回空值

    我创建了一个画布并将其命名为getContext 方法 但它返回null为上下文 这是我使用的代码 我在控制台中得到了这个
  • HTML 和 JavaScript - 将滚动操作从一个元素传递到另一个元素

    假设我有两个 div div div div A scrollable list div 我想让它当光标停在里面时 control并且鼠标滚轮滚动 view将会滚动 无论如何要实现这一目标 好的 快速修复对我有用 即使固定 div 不可滚动
  • iOS Safari Mobile 禁用上一个和下一个选择输入

    上周五我发现了关于此问题的类似问题 但似乎无法再次找到它 如果有人能指出我正确的方向 那就太好了 本质上我在一个页面上有多个选择菜单 第一个在加载时填充 第二个在第一个选择时填充 够简单的 但是 在 iOS 设备中 当您点击选择元素时 它会
  • `ie9` - contenteditable false 在父级可编辑时不起作用

    我正在尝试制作内容可编辑和不可编辑的容器 用户可以通过 3 种方式使用它 他们可以将内容与non editable 他们可以将内容与editable 他们可以在不选择其中之一的情况下放置内容 可编辑 我正在努力实现以下目标 content
  • 数字和小数的输入掩码

    在测试我的程序后 我发现了以下错误 我在 sqlserver 中的表包含 价格数字 6 2 我的程序的用户输入价格 555 00 就很好了 但是当他输入 555555 时 这是错误的 所以我需要指定掩码 其中尾数是可选的 0 到 999 小
  • 使用 JavaScript onclick 添加表格行

    我正在尝试使用 javascript 添加下面找到的完全相同的元素 我已经尝试了这里找到的所有解决方案 我什至尝试用php echo但没有运气 无需更改任何输入名称或类似内容 只需单击该按钮即可向表中添加另一行 仅此而已 这是该元素 tr

随机推荐

  • Java开发过程中的避坑点(一)

    1 典型空指针问题 包装类型的空指针问题 级联调用的空指针问题 Equals方法左边的空指针问题 ConcurrentHashMap 这样的容器不支持 Key 和 Value 为 null 集合 数组直接获取元素 对象直接获取属性 1 1包
  • RDA 升级

    烧录BOOT升级方式 1 连接 2 烧录BOOT 1 升级 bootrom raw bin 99K 这种升级方式需要Tera Term 工具 按 F5 U盘升级 编译的升级文件 RR8503 bin RR8501 bin RR52C bin
  • figma有哪些快速入门的好用技巧

    使用Figma在创建设计系统或处理大型设计项目时 总会涉及批量修改 快速定位 自动布局问题 MarcAndrew这篇文章分享了技巧 可以大大提高设计效率 希望对大家有所帮助 在这篇文章中 我列出了一些快速简单的方法来帮助你更快地使用它Fig
  • Morris Traversal方法遍历二叉树(非递归,不用栈,O(1)空间)

    本文主要解决一个问题 如何实现二叉树的前中后序遍历 有两个要求 1 O 1 空间复杂度 即只能使用常数空间 2 二叉树的形状不能被破坏 中间过程允许改变其形状 通常 实现二叉树的前序 preorder 中序 inorder 后序 posto
  • 猿如意中的【blender】工具详情介绍

    文章目录 一 工具名称 二 下载安装渠道 2 1 什么是猿如意 2 2 如何下载猿如意 三 工具介绍 四 blender介绍 4 1 blender简介 4 2 背景 4 3 主要功能 五 软件安装过程 5 1 如何在猿如意中下载开发工具b
  • 散列表习题

    1 考虑key的集合S 0 8 16 24 32 40 48 56 64 用除余法构造的散列函数 h1 key key 12 h2 key key 11 h1将S映射到的值域有几个元素 3 h2将S映射到的值域有几个元素 9 2 散列表的规
  • 【1分钟解决VS试用期到期】——登录用户时浏览器跳转失败

    登录 按钮下的 账户选项 将会默认跳转到左侧 环境 选项下的 账户 此界面中右上的 嵌入式Web浏览器 改为 系统Web浏览器 即可正常跳转登录 若没有微软账户可免费注册
  • easy poi 实现Excel文件的导入导出(SpringBoot整合)

    easypoi功能如同名字easy 主打的功能就是容易 让一个没见接触过poi的人员 就可以方便的写出Excel导出 Excel模板导出 Excel导入 Word模板导出 通过简单的注解和模板 语言 熟悉的表达式语法 完成以前复杂的写法 码
  • Win11任务栏怎么变小?Win11任务栏变小的设置方法

    很多Win11用户觉得win11任务栏太大了 用起来很不习惯 想要把任务栏变小 那要怎么进行操作 Win11的任务栏怎么变小 方法其实很简单的 系统之家小编这就分享给你 还不清楚的小伙伴们 快跟着小编一起来看看怎么操作吧 操作方法具体步骤
  • chatgpt赋能python:如何用Python进行数据清洗

    如何用Python进行数据清洗 在数据分析领域 数据清洗是非常重要的一步 因为原始数据往往包含大量的错误 缺失或者不一致的部分 对于这些 脏 数据 如果不进行清洗和处理 就会影响到后续的分析和建模工作 那么 如何用Python进行数据清洗呢
  • envi5.6处理gf3(SAR)详细过程记录

    未完结 待更新 可以参考的处理教程 SAR影像 雷达影像 的预处理 ENVI SARscape多极化单通道数据预处理流程 SARSCAPE中单雷达影像基础处理全过程 本文所使用的文件名 GF3 KAS UFS 017384 E108 9 N
  • 我的世界为什么服务器不显示皮肤,我的世界为什么皮肤没显示,为什么皮肤显示不出来怎么办...

    要正版账号盗版的话如果有皮肤MOD的话就可以看见了必须是安装了这个MOD的人才能看见 为什么显示不出更改后皮肤 用指令指令 skinset代码 英文或数字 怎么才能让我的世界人物皮肤能显示在服务器中 让每个玩家能看到 非官方的不好显示的 为
  • 2021-02-05

    1 字体类型 对于创造不同字体的文字类型时 每一个类型都得重新定义CFont 和 CStatic CStatic m cstatic title 标题名 CStatic m CStatic sys status CFont m Font C
  • mysql binlog 大小设置问题

    mysql开启了二进制日志binlog 如mysql bin 000005等 重启服务后会自动更新这个文件 如原来是000005的话会生成000006 请问 如果服务一直不重启 什么情况下会自动产生新的日志文件呢 是大小到了一定量时自动产生
  • 2016年中总结

    时间飞快 2016年上半年中收获很多 项目 学习 实习等 感慨颇多 一 学习 项目 走过BS 进入了Java的世界 在项目中实践对于自己的知识有了一个梳理和巩固 期间经历了ITOO5 0基础系统 对于基础系统的业务有了更多的了解 图书馆系统
  • 以不同的方向来处理数据倾斜

    一 程序层面 比如说在Hive中 经常遇到count distinct 操作 这样会导致最终只有一个Reduce任务 我们可以先group by 再在外面包一层count 就可以了 比如计算按用户名去重后的总用户量 优化前 只有一个redu
  • android开发之recycleView的adapter理解

    之前很长时间都是使用的listview 然后自己写适配器 主要都是继承自BaseAdapter 大致的思路呢 就是我们传入数据源以及上下文对象 然后我们在自定义适配器文件中实现了构造方法 然后将传入的上下文对象 context 以及数据源初
  • 【流水线】FPGA中流水线的原因和方法

    目录 写在前面 什么是流水线 无流水线设计 流水线设计 流水线的后果 结论 写在前面 对 FPGA 现场可编程门阵列 进行编程是一个定制其资源以实现确定逻辑功能的过程 这涉及使用FPGA的基本构建模块 如可编程逻辑模块 CLB 专用多路复用
  • 【MATLAB第62期】基于MATLAB的PSO-NN、BBO-NN、前馈神经网络NN回归预测对比

    MATLAB第62期 基于MATLAB的PSO NN BBO NN 前馈神经网络NN回归预测对比 一 数据设置 1 7输入1输出 2 103行样本 3 80个训练样本 23个测试样本 二 效果展示 NN训练集数据的R2为 0 73013 N
  • html标签总结之表格标签

    1 表格标签 表格属性 border 表格边框 写在table标签里面 数值代表边框像素 cellpadding 单元格内的空间 写在table标签里面 数值代表空间像素 cellspacing 单元格之间的空间 写在table标签里面 数