HTML中的table表格

2023-11-03

表格标签

分为行(tr)和列(td),行及列都可以进行合并操作
            table:定义表格
            tr:定义行
            td:定义列    //先有行,后有列
            th:多用于表头,定义表格中头部(加粗)
            border: 边框大小
            bordercolor:边框的颜色
            cellpadding:内容文本与单元格之间距离
            cellspacing:单元格与单元格之间距离

示例:

<body>
	<h1 align="center">员工表</h1>
	<hr width="90px" color="red" />
	<table border="1px" 
            align="center" 
            bordercolor="blue" 
            cellpadding="20px" 
            cellspacing="0px">
		<tr>
			<th>姓名</th>
			<th>性别</th>
			<th>工作</th>
			<th>薪资</th>
			<th>操作</th>
		</tr>
		<tr>
			<td>jack</td>
			<td>男</td>
			<td>后端开发</td>
			<td>8000</td>
			<td><a href="#">查询个人信息,这是个链接</a></td>
		</tr>
		<tr>
			<td>rose</td>
			<td>女</td>
			<td>前端开发</td>
			<td>7000</td>
			<td><a href="#">删除</a></td>
		</tr>
		<tr>
			<td>yiyan</td>
			<td>女</td>
			<td>小秘</td>
			<td>10000</td>
			<td><a href="#">删除</a></td>
		</tr>
	</table>
</body>

 

 

跨行跨列

rowspan跨行

原表格

<body>
	<h1 align="center"></h1>
	<hr width="90px" color="red" />
	<table border="1px" cellspacing="0px" 
            cellpadding="20px" align="center" 
            width="700px">
			<tr>
				<th>姓名</th>
				<th>联系方式</th>
			</tr>
			<tr>
				<td>jack</td>
				<td>0371-6666</td>
			</tr>
			<tr>
				<td>jack</td>
				<td>0371-8888</td>
			</tr>
		</table>
</body>

 实现跨行

<!-- 实现跨行 -->
		<table border="1px" cellspacing="0px" 
                cellpadding="20px" align="center"
                width="700px">
			<tr align="center">
				<th>姓名</th>
				<th>联系方式</th>
			</tr>
			<tr align="center">
				<!-- 跨行 -->
				<td rowspan="2">jack</td>
				<td>0371-6666</td>
			</tr>
			<tr align="center">
				<td>0371-8888</td>
			</tr>
		</table>

 

colspan跨列

原表格

<!-- 原始table表 -->
		<table border="1px" cellspacing="0px" 
                cellpadding="20px" align="center" 
                width="600px">
			<tr>
				<td>姓名</td>
				<td>联系方式</td>
				<td>联系方式</td>
			</tr>
			<tr>
				<td>rose</td>
				<td>0371-8888</td>
				<td>0371-9999</td>
			</tr>
		</table>

 

  实现跨列

<!-- colspan 实现跨列 -->	
		<table border="1px" cellspacing="0px" 
                cellpadding="20px" 
                align="center" 
                width="600px">
			<tr align="center">
				<td>姓名</td>
				<!-- colspan 实现跨列 -->
				<td colspan="2">联系方式</td>
			</tr>
			<tr align="center">
				<td>rose</td>
				<td>0371-8888</td>
				<td>0371-9999</td>
			</tr>
		</table>

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML中的table表格 的相关文章

  • 多彩文本框的想法?

    在我的网站中 我想实现一个文本框 人们可以在其中输入一组由分隔符分隔的字符串 例如本页底部的标签文本框 由空格 分隔符 分隔的标签 字符串 为了让用户更清楚 为每个字符串提供不同的背景颜色或其他视觉提示是很有意义的 我认为使用常规输入 文本
  • 加载 HTML 格式的大型视频文件

    这是我的问题 我想播放存储在 S3 存储桶中的大型视频文件 3 6Gb 但该文件似乎太大 并且加载 30 秒后页面崩溃 这是我播放视频的代码 var video document getElementById video const med
  • CSS条件注释适用于除IE之外的其他浏览器吗?

    据我所知 条件注释仅支持不同版本的IE 同样 我们也可以为其他浏览器提供条件注释吗 如果是 如何 如果不是 最好的选择是什么 CSS 条件注释仅适用于 IE http msdn microsoft com en us library ms5
  • 之后的脚本会阻止 DOM 加载

    考虑以下代码 div class box div 令我惊讶的是 DOM 延迟了十秒的加载 10秒后出
  • HTML 元素:属性排序

    分析几个页面并注意到不同的方法 写作风格 我想知道 HTML 元素属性的顺序是否有效 浏览器性能 渲染 明显或不明显 客户端 服务器计算资源 任何事物 他们是我应该考虑的订购标准吗 我只能认为它会影响 JQuery 对第 n 个属性的选择
  • 如何在索引视图中打印关联数据

    subjects this gt Subjects gt find all contain gt Users fields gt Users username Users email gt hydrate false gt toArray
  • 如何在绝对定位的 div 内用 CSS 创建粘性页脚?

    我想创建一个粘性页脚inside绝对定位的 div 元素 我的方法是将页脚 div 也绝对定位 在另一个相对定位的 页面 div 内 其中包含页面的实际内容 div class content div class page Some Lor
  • 如何使用 file:///F:/foldername 访问 ajax 中的本地文件夹?但它适用于 http://

    在这里 我使用以下代码使用 AJAX jQuery 动态创建文件名列表 window load function var fileExt csv document ready function ajax url file F foldern
  • 通过按 Enter 键提交表单而不使用提交按钮

    好吧 我试图通过按 Enter 键来提交表单 但不显示提交按钮 如果可能的话 我不想涉足 JavaScript 因为我希望一切都能在所有浏览器上运行 我知道的唯一 JS 方式是使用事件 现在的表格看起来像这样
  • 滚动时多个图像淡出

    我有一个页面 在每个导航点上 网站中间的图像通过淡入淡出来改变颜色 我设法淡入 active3 fadeIn 2000 不过 我遇到了再次淡出它的问题 让我尝试解释一下 我有 5 个导航点和 5 个不同的图像 如果我 例如 从第一个导航点滚
  • 如何访问 javascript 文件中的查询字符串

    可能的重复 如何获取查询字符串值 https stackoverflow com questions 901115 how can i get query string values 可以说 我们有一个
  • 从 HTML 字符串中解析和选择

    使用 ajax 调用 我返回了页面的partialView HTML 但在显示它之前 我希望从主 div 中提取信息 如果我创建一个浮动窗口 该数据只是大小信息 Code div class window details more data
  • 如何在 Android 上的 PhoneGap 中设置音频播放速率?

    有谁能够让音频播放速率在 Android 上工作吗 媒体播放器似乎覆盖 忽略音频标签的播放速率属性 None
  • Bootstrap

    我正在尝试使用 Bootstrap 构建一个网站 到目前为止 一切都按计划进行 我想要一个固定的导航栏 并且我正在使用内置函数 div class navbar navbar fixed top 这很棒 正是我所需要的 但我希望导航和标题从
  • 在 Dartlang 中下载大文件

    我需要使用 dartlang 从浏览器下载较大的文件 我一直在使用 data uri 来下载 但已经达到了该方法的大小限制 想知道最好的方法是什么 我研究了使用 HTML5 文件系统 API 但它已被弃用 显然在大多数浏览器中从未真正实现过
  • 使用 jQuery inputmask 插件范围 0-100

    如何创建 0 到 100 范围内的掩码 document ready function masked inputmask 您可以使用jquery inputmask regex extensions js为了那个原因 你可以找到带有所有扩展
  • 从链接打开本地文件夹

    如何通过单击任何链接打开本地文件夹视图 我尝试了很多选择 例如 a href Open folder a or a Open folder a or a Open folder a 解决方案 启动可下载链接 以下内容适用于所有浏览器 但一如
  • 如何在html中定义条件换行符?

    我希望这根绳子断在 如果需要的话 没有地方可以写了 7 380 Ft 159 Ft term kd jjal like 7 380 000 Ft 159 125 Ft term kd jjal 如何在html中实现这一点 nbsp 产生 错
  • 轮播滑动(未滑动)事件上的火灾事件,Bootstrap 3

    Bootstrap 2 似乎可以很好地处理幻灯片事件 请参阅这个问题 https stackoverflow com questions 9651466 how to attach slide slid events to the boot
  • 使用flex-basis控制行上显示的项目数

    我想在使用 Flex 时将元素推出以隐藏它们 例如 如果flex basis为 50 仅显示两个项目弯曲到给定空间 而其他元素则在overflow hidden 领土 Or if flex basis为 25 则仅显示 4 个 Flex 元

随机推荐

  • C++通讯录管理系统

    C 通讯录管理系统 开发环境 Visual studio 2019 1 系统需求 系统中需要实现的功能如下 添加联系人 向通讯录中添加新人 信息包括 姓名 性别 年龄 联系电话 家庭住址 最多记录10000人 显示联系人 显示通讯录中所有联
  • linux的etc相当于windows,Linux——LDAP(相当于Windows下的AD)

    LDAP 轻量级目录访问服务 通过配置这个服务 我们也可以在linux下面使用目录的形式管理用户 就像windows下面的AD一样 方便我们管理 下面我们就一起来配置openldap服务 本文运行环境 CentOS 5 软件需求 openl
  • Java 的JSON、XML转换方法——目录索引

    原文地址 http blog csdn net ibm hoojo article details 6366429 JSON及XML的Java序列化 反序列化 转换 在WebService Ajax数据传递中 用得比较多 如 在用ExtJS
  • 【Socket】Java Socket编程基础及深入讲解

    转自 https www cnblogs com yiwangzhibujian p 7107785 html Socket是Java网络编程的基础 了解还是有好处的 这篇文章主要讲解Socket的基础编程 Socket用在哪呢 主要用在进
  • 【模板】高精度乘低精度

    文章目录 1 数组 2 vector 推荐 1 数组 include
  • 使用ARIMA算法进行时间序列预测。

    本文以行健宏扬中国为例 提取数据 使用ARIMA算法进行时间序列预测 爬取数据 抓取行健宏扬中国基金 from bs4 import BeautifulSoup import requests headers Accept text jav
  • TTS

    2021 VITS Conditional Variational Autoencoder with Adversarial Learning for End to End Text to Speech Paper Conditional
  • 消息中间件:选型分析。

    前言 消息队列中间件 简称消息中间件 是指利用高效可靠的消息传递机制进行与平台无关的数据交流 并基于数据通信来进行分布式系统的集成 通过提供消息传递和消息排队模型 它可以在分布式环境下提供应用解耦 弹性伸缩 冗余存储 流量削峰 异步通信 数
  • 关于进程,I/O模型的文章

    PHP类 http rango swoole com archives 508 Node https github com DoubleSpout threadAndPackage
  • Windows双系统Ubuntu18.04安装分区过程

    声明 由于这个寒假过长 从1月到9月 期间无数次作死操作 导致windows和ubuntu崩了N次 所以现在把以前的东西重新做一遍 windows和ubuntu双系统 首先在windows完好的情况下 进入 计算机管理 选择 磁盘管理 压缩
  • 唐先杰遇上区块链:要加薪,也要改变世界

    区块链能带来什么 对于唐先杰来说 是 加薪 的现实收益 也是 改变世界 的精神满足 唐先杰是旺链科技的区块链系统架构师 拥有10余年技术经验 接触到区块链以及FISCO BCOS开源社区之后 在社区伙伴的帮助下 他成功完成了对公司产品的升级
  • js中把数字转换成汉字输出

    前言 在js中把数字转换成汉字输出的方法 直接可以拿来用 方法一 支持7位 也就是最大1234567 案例 this toChinesNum 10101010 得到 一千零一十万一千零一十 数字转成汉字 params num 要转换的数字
  • el-tree的使用与样式修改大全

    el tree的使用与样式修改大全 一 样式篇 1 修改节点选中后的背景样式 el tree node focus gt el tree node content background color 5daaf0 背景色 2 节点hover后
  • 开源大数据平台 集群搭建及使用

    1 Hadoop集群搭建及使用 1 集群规划 2 虚拟机准备 1 创建虚拟机 具体步骤不再展示 2 配置网络 ping外网 ping baidu com 如果ping不通 修改如下文件 vi etc sysconfig network sc
  • Flutter Icons内置图标库MaterialIcons大全

    Flutter 中的图标组件 Icon 专门用于显示图标 如 Icon Icons check rounded color Colors white size 18 图集预览
  • 报错解决方案1

    遇到报错 TypeError conv2d received an invalid combination of arguments got numpy ndarray Parameter Parameter tuple tuple tup
  • catkin build 的使用

    1 catkin build vs catkin make 初学的时候一般我们用catkin make 但是相较于catkin build而言 并没有那么好使 对比如下 catkin make 同时编译工作空间下的所有包 速度慢 不灵活 c
  • C++(11):生成随机字符串

    C 11 产生随机数 c 11 随机数 风静如云的博客 CSDN博客 介绍了如何生成随机数 可以基于随机数生成随机字符串 include
  • 华为OD机试 - 字符串划分(Java)

    题目描述 给定一个小写字母组成的字符串 s 请找出字符串中两个不同位置的字符作为分割点 使得字符串分成三个连续子串且子串权重相等 注意子串不包含分割点 若能找到满足条件的两个分割点 请输出这两个分割点在字符串中的位置下标 若不能找到满足条件
  • HTML中的table表格

    表格标签 分为行 tr 和列 td 行及列都可以进行合并操作 table 定义表格 tr 定义行 td 定义列 先有行 后有列 th 多用于表头 定义表格中头部 加粗 border 边框大小 bordercolor 边框的颜色 cellpa