HTML-表格

表格


1.基本结构

  1. 一个完整的表格由:表格标题表格头部表格主体表格脚注,四部分组成
    在这里插入图片描述
  2. 表格涉及到的标签:
    table:表格
    caption:标题
    thead:表格头部
    tbody:表格主体
    tfoot:表格注脚
    tr:每一行(table row)
    th、td:每一个单元格(备注:表格头部中用 th ,表格主体、表格脚注中用: td ,table data)
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  3. 具体编码:
<table border="1"><!-- 表格标题 --><caption>学生信息</caption><!-- 表格头部 --><thead><tr><th>姓名</th><th>性别</th><th>年龄</th><th>民族</th><th>政治面貌</th></tr></thead><!-- 表格主体 --><tbody><tr><td>张三</td><td></td><td>18</td><td>汉族</td><td>团员</td></tr><tr><td>李四</td><td></td><td>20</td><td>满族</td><td>群众</td></tr><tr><td>王五</td><td></td><td>20</td><td>回族</td><td>党员</td></tr><tr><td>赵六</td><td></td><td>21</td><td>壮族</td><td>团员</td></tr></tbody><!-- 表格脚注 --><tfoot><tr><td></td><td></td><td></td><td></td><td>共计:4人</td></tr></tfoot>
</table>

2.常用属性

在这里插入图片描述
在这里插入图片描述
注意点:

  1. 元素的 border 属性可以控制表格边框,但 border 值的大小,并不控制单元格边框的宽度,只能控制表格最外侧边框的宽度,这个问题如何解决?—— 后期靠 CSS 控制。
  2. 默认情况下,每列的宽度,得看这一列单元格最长的那个文字。
  3. 给某个 th 或 td 设置了宽度之后,他们所在的那一列的宽度就确定了。
  4. 给某个 th 或 td 设置了高度之后,他们所在的那一行的高度就确定了。

3.跨行跨列

  1. rowspan :指定要跨的行数。
  2. colspan :指定要跨的列数。

课程表效果:
在这里插入图片描述
编写思路:
在这里插入图片描述
例如:

<table><caption></caption><thead><tr><th>1-1</th><th colspan="5">1-2</th></tr></thead><tbody><tr><td rowspan="4">3-1</td></tr></tbody>
</table>

然后再删除多余的单元格

4.常用标签补充

在这里插入图片描述

注意点:

  1. 不要用 br 来增加文本之间的行间隔,应使用 p 元素,或后面即将学到的 CSS的margin 属性。
  2. hr 的语义是分隔,如果不想要语义,只是想画一条水平线,那么应当使用 CSS 完成。

HTML中效果不重要,语义才重要,效果可以用css来实现

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/245743.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

算法基础之树状数组

文章目录 树状数组 树状数组 树状数组能解决的最关键的问题就是能够 O ( log ⁡ n ) O(\log n) O(logn)内&#xff0c;给某个位置上的数&#xff0c;加上一个数&#xff0c;或者求前缀和 他和前缀和数组的区别就是&#xff0c;树状数组支持修改原数组的内容&#xff0c;而前缀…

2.数据结构 顺序表(自留笔记)

文章目录 一.静态顺序表&#xff1a;长度固定二.动态顺序表1.下面证明原地扩容和异地扩容代码如下&#xff1a;2.下面是写一段Print&#xff0c;打印数字看看&#xff1a;3.头插4.尾删5.头删6.越界一定会报错吗7.下标插入8.下标删除9.查找数字10.应用&#xff1a;利用顺序表写一…

多维时序 | Matlab实现EVO-TCN-Multihead-Attention能量谷算法优化时间卷积网络结合多头注意力机制多变量时间序列预测

多维时序 | Matlab实现EVO-TCN-Multihead-Attention能量谷算法优化时间卷积网络结合多头注意力机制多变量时间序列预测 目录 多维时序 | Matlab实现EVO-TCN-Multihead-Attention能量谷算法优化时间卷积网络结合多头注意力机制多变量时间序列预测效果一览基本介绍程序设计参考资…

项目测试 手机系统 改串号 写IMEI 改MEID 改手机型号 等信息配置信息 演示视频 和一键新机

项目测试 手机系统 改串号 写IMEI 改MEID 改手机型号 等信息配置信息 演示视频 和配置说明 项目-手机系统支持直接改串号 IMEI MEID 手机型号 等信息配置信息 演示视频 支持 条形码 SN IMEI 1 IMEI 2 MEID 唯一SN 蓝牙地址 wifi地址 mac "一键新机"这个术语通常出现…

HTML-表单

表单 概念&#xff1a;一个包含交互的区域&#xff0c;用于收集用户提供的数据。 1.基本结构 示例代码&#xff1a; <form action"https://www.baidu.com/s" target"_blank" method"get"><input type"text" name"wd&q…

Spring 的存储和获取Bean

文章目录 获取 Spring 上下文对象的方式存储 Bean 对象的方式类注解配置扫描路径&#xff08;必须&#xff09;Controller&#xff08;控制器存储&#xff09;Service&#xff08;服务&#xff09;Repository&#xff08;持久层&#xff09;Component&#xff08;工具&#xff…

【WPF.NET开发】WPF 中的 Layout

本文内容 元素边界框布局系统测量和排列子元素面板元素和自定义布局行为布局性能注意事项子像素渲染和布局舍入 本主题介绍 Windows Presentation Foundation (WPF) 布局系统。 了解布局计算发生的方式和时间对于在 WPF 中创建用户界面非常重要。 1、元素边界框 在 WPF 中构…

【mongoDB】集合的创建和删除

目录 1.集合的创建 2. 查看所有集合 3.删除集合 1.集合的创建 格式&#xff1a; db.createCollection ( name ) 例如创建一个名为 bbb 的集合 还可以通过传递一个选项对象来指定集合的属性&#xff0c;例如最大文档的大小&#xff0c;索引选项等 例如 这样创建了一个名为 cc…

TCP 三次握手以及滑动窗口

TCP 三次握手 简介&#xff1a; TCP 是一种面向连接的单播协议&#xff0c;在发送数据前&#xff0c;通信双方必须在彼此间建立一条连接。所谓的 “ 连接” &#xff0c;其实是客户端和服务器的内存里保存的一份关于对方的信息&#xff0c;如 IP 地址、端口号等。 TCP 可以…

人工智能的未来展望:自然语言处理(NLP)与计算机视觉(CV)

NLP和CV是人工智能的两个重要分支&#xff0c;它们在处理和分析信息方面有不同的侧重点和挑战。 NLP&#xff08;自然语言处理&#xff09;旨在让计算机理解和生成人类语言&#xff0c;主要处理的是文本信息。NLP的研究和应用主要集中在如何让计算机理解和生成人类语言&#x…

Github 无法正常访问?一招解决

查询IP网址: https://ip.chinaz.com/ 主页如下&#xff1a; 分别查询以下三个网址的IP&#xff1a; github.com github.global.ssl.fastly.net assets-cdn.github.com 修改 hosts 文件&#xff1a; 将 /etc/hosts 复制到 home 下 sudo cp /etc/hosts ./ gedit hosts 在底下…

开源模型部署及使用

开源模型部署及使用 1.Langchain-Chatchat1.环境2.运行3.效果 2.facefusion1.环境2.运行3.效果 3.Aquila1.环境2.运行 1.Langchain-Chatchat Langchain-Chatchat这里面可以调用许多模型&#xff0c;我本地下载了chatglm3模型文件&#xff0c;所以就用这个模型。 1.环境 根据…

(数据结构练习题)合并两个有序数组

&#x1f308;前言&#xff1a;在刷题过程中发现超精简的代码。 力扣链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 &#x1f4ab;正文 首先这是题目内容&#xff0c;大家看到这个题时肯定会有很多不同的做法比如遍历链表将两个链表…

shared_ptr 与 unique_ptr 的转换 笔记

推荐B站文章&#xff1a; 6.shared_ptr与unique_ptr_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV18B4y187uL?p6&vd_sourcea934d7fc6f47698a29dac90a922ba5a3我的往期文章&#xff1a; 独占指针&#xff1a;unique_ptr 与 函数调用-CSDN博客https://blog.csdn.n…

ChatGPT 和文心一言 | 两大AI助手哪个更胜一筹

欢迎来到英杰社区&#xff1a; https://bbs.csdn.net/topics/617804998 欢迎来到阿Q社区&#xff1a; https://bbs.csdn.net/topics/617897397 &#x1f4d5;作者简介&#xff1a;热爱跑步的恒川&#xff0c;致力于C/C、Java、Python等多编程语言&#xff0c;热爱跑步&#xff…

TryHackMe-Umbrella

靶场介绍 Breach Umbrella Corp’s time-tracking server by exploiting misconfigurations around containerisation. 利用集装箱化的错误配置&#xff0c;破坏Umbrella公司的时间跟踪服务器。 Task 1 What is the DB password? 数据库的密码是多少&#xff1f; 端口扫描&am…

农业四情监测系统的工作原理

TH-Q3农业四情监测系统的工作原理主要涉及感知层、传输层、应用层和决策层四个部分。 首先&#xff0c;感知层负责通过各种传感器和检测设备对农作物、土壤、气象等因素进行实时监测。例如&#xff0c;土壤湿度传感器可以测量土壤的体积含水量&#xff0c;而自动监测系统则可以…

Tomcat运维

目录 一、Tomcat简介 二、系统环境说明 1、关闭防火墙&#xff0c;selinux 2、安装JDK 3、安装Tomcat 三、Tomcat目录介绍 1、tomcat主目录介绍 2、webapps目录介绍 3、Tomcat配置介绍&#xff08;conf&#xff09; 4、Tomcat的管理 四、Tomcat 配置管理页面(了解) …

8-小程序数据promise化、共享、分包

小程序API Promise化 wx.requet 官网入口 默认情况下&#xff0c;小程序官方异步API都是基于回调函数实现的 wx.request({method: , url: , data: {},header: {content-type: application/json // 默认值},success (res) {console.log(res.data)},fail () {},complete () { }…

STM32第一节——初识STM32

1 硬件介绍 1.1 硬件平台 配套硬件&#xff1a;以野火的STM32 F1霸道开发板为平台&#xff0c;若用的是别的开发板&#xff0c;可自己进行移植。 1.2 什么是STM32 STM32是由意法半导体&#xff08;STMicroelectronics&#xff09;公司推出的一系列32位的ARM Cortex-M微控制…