HTML表格

最新推荐文章于 2024-09-06 22:20:29 发布
最新推荐文章于 2024-09-06 22:20:29 发布
阅读量82 收藏
点赞数 1
分类专栏： 笔记整理 文章标签： 前端 html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woiyuan/article/details/138661572
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML表格</title>
	</head>
	<body>
		<!-- HTML的表格
			1.表格标签为<table>,每个表格均有若干行用<tr>，每行被分割为若干单元格用<td>。
			2.<td>元素指表格的单元格内容，其内容可以是文本、图片、列表、段落、表单、水平线、表格等
			3.表格的边框属性为border，不定义时将不显示边框
			4.表格的表头使用<th>标签进行定义（文本一般会被粗体居中）
			5.单元格内无内容时不会显示该单元格边框（常用空格占位符&nbsp解决） -->
		<h1>HTML的表单</h1>
			<p>没有边框的表格</p>
			<table>
				<tr>
					<td>老大</td>
					<td>伊藤润二</td>
				</tr>
				<tr>
					<td>张三</td>
					<td>李四</td>
				</tr>
			</table>
			<p>带有标题的列表</p>
			<table border="2">
				<caption>名单</caption><!-- 表单标题标签 -->
				<th>一班</th><th>二班</th>
				<tr>
					<td>老大</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>张三</td>
					<td>李四</td>
				</tr>
			</table>
			<table border="1">
				<caption>横跨俩列的单元格标签</caption>
				<th>姓名</th>
				<th colspan="2">电话</th><!-- colspan水平合并单元格 -->
				<tr>
					<td>傻鸟</td>
					<td>108874</td>
					<td>15157</td>
				</tr>
			</table>
			<table border="1">
				<caption>横跨俩行的单元格</caption>
				<tr>
					<th>姓名</th>
					<td>傻鸟</td></tr>
				<tr>
					<th rowspan="2">电话</th><!-- rowspan垂直合并单元格 -->
					<td>18874</td>
				</tr>
				<tr>
					<td>15157</td>
				</tr>
			</table>
			<table border="1">
				<caption>表格单元格内容多样</caption>
				<tr>
					<td>
						<p>这是一个段</p>
						<p>这是另一个段</p>
					</td>
				
				<td>
					<p>这里包含了另一个表格</p>
					<table border="1">
						<tr>
							<td>A</td>
							<td>B</td>
						</tr>
						<tr>
							<td>C</td>
							<td>D</td>
						</tr>
					</table>
				</td>
				</tr>
				<tr>
					<td>
						<ul>
							<p>这是一个列表</p>
							<li>苹果</li>
							<li>香蕉</li>
							<li>菠萝</li>
						</ul>
					</td>
					<td>
						HELLO
					</td>
				</tr>
			</table>
			<table border="1" cellpadding="20"><!-- cellpadding单元格内边距设置属性 -->
				<caption>单元格边距</caption>
				<tr>
					<td>老大</td>
					<td>伊藤润二</td>
				</tr>
				<tr>
					<td>张三</td>
					<td>李四</td>
				</tr>
			</table>
			<table border="1" cellspacing="10"><!-- cellspacing单元格间距属性 -->
				<caption>单元格间距</caption>
				<tr>
					<td>老大</td>
					<td>伊藤润二</td>
				</tr>
				<tr>
					<td>张三</td>
					<td>李四</td>
				</tr>
			</table>
			<table border="1" bgcolor="red">
				<caption>表格背景颜色</caption>
				<tr>
					<td background="img/绿.gif">单元格的设置同理</td>
					<td>伊藤润二</td>
				</tr>
				<tr>
					<td>张三</td>
					<td>李四</td>
				</tr>
			</table>
			<table border="1" background="img/绿.gif">
				<caption>表格图像背景设置</caption>
				<tr>
					<td > 单元格的设置同理</td>
					<td>伊藤润二</td>
				</tr>
				<tr>
					<td bgcolor="red">张三</td>
					<td>李四</td>
				</tr>
			</table>
			<table border="1" width="400">
				<caption>单元格内文本排列</caption>
				<tr>
					<th align="left">消费项目...</th>
					<th align="right">一月</th>
					<th align="right">二月</th>
				</tr>
				<tr>
					<td align="left">衣服</td>
					<td align="right">￥241.10</td>
					<td align="right">￥50.20</td>
				</tr>
				<tr>
					<td align="left">化妆品</td>
					<td align="right">￥30.00</td>
					<td align="right">￥44.45</td>
				</tr>
				<tr>
					<td align="left">食物</td>
					<td align="right">￥730.40</td>
					<td align="right">￥650.00</td>
				</tr>
				<tr>
					<th align="left">总计</th>
					<th align="right">￥1001.50</th>
					<th align="right">￥744.65</th>
				</tr>
			</table>
			<p>框架属性frame，在IE浏览器中无法正确显示</p>
			<p>外边框</p>
			<table frame="box">
				<tr>
					<th>month</th>
					<th>Savings</th>
				</tr>
				<tr>
					<td>January</td>
					<td>$100</td>
				</tr>
			</table><br />
			<p>上边框</p>
			<table frame="above">
				<tr>
					<th>month</th>
					<th>Savings</th>
				</tr>
				<tr>
					<td>January</td>
					<td>$100</td>
				</tr>
			</table><br />
			<p>下边框</p>
			<table frame="below">
				<tr>
					<th>month</th>
					<th>Savings</th>
				</tr>
				<tr>
					<td>January</td>
					<td>$100</td>
				</tr>
			</table><br />
			<p>上下边框</p>
			<table frame="hsides">
				<tr>
					<th>month</th>
					<th>Savings</th>
				</tr>
				<tr>
					<td>January</td>
					<td>$100</td>
				</tr>
			</table><br />
			<p>左右边框</p>
			<table frame="vsides">
				<tr>
					<th>month</th>
					<th>Savings</th>
				</tr>
				<tr>
					<td>January</td>
					<td>$100</td>
				</tr>
			</table><br />
			<br />
			<a href="6.HTML列表.html" style="text-decoration:none">上一节</a>
			<a href="8.HTML的表单.html" style="text-decoration:none">&nbsp;下一节</a>
	</body>
</html>

妧徽
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML 表格
木木木森林
12-04 1万+
目录1. 创建表格2. 表格属性3. 表头单元格标签th4. 表格标题caption5. 合并单元格(难点)5.1 合并单元格2种方式5.2 合并单元格顺序5.3 合并单元格三步曲6. 总结表格7. 拓展阅读@ 1. 创建表格 在HTML网页中，要想创建表格，就需要使用表格相关的标签。 创建表格的基本语法： <table> <tr> <td>单元格内的文字</td> ... </tr> ... </table&gt
HTML表格table
weixin_58139900的博客
09-15 2076
表格简介 表格由 table 标签来定义。每个表格均有若干行（由tr 标签定义），每行被分割为若干单元格（由 td 标签定义）。 类比：excel表格&网页中的表格 表格的作用 之前：web开发人员过去也常常使用表格来完成整个网页布局，结构嵌套复杂修改维护困难被DIV+CSS取代 现在：用于显示、展示数据,(能够简捷迅速地查找或呈现不同类型的数据及它们之间的关系) 注意：现在HTML 表格应该用于表格数据，而不是来实现网页布局 表格基本标签 ..
HTML表格样式
ZYX13721846745的博客
10-08 8051
9675人阅读 行跟列背景颜色的选择，合并等 列的颜色选择代码 <colgroup span="1" bgcolor="lightgreen"></colgroup> <colgroup span="1" bgcolor="lightyellow"></colgroup> <colgroup span="2" bgcolor="lightgreen"> <col bgcolor="lightgray"> <col&
HTML表格（HTML 表格的使用，收藏这一篇就够了）
热门推荐
weixin_47139649的博客
10-15 6万+
HTML基础之表格 文章目录HTML基础之表格1. 表格的定义2. 表格的标签3. 单元格边框(border)4. 合并单元格4.1 合并行单元格(colspan)4.2 合并列单元格(rowspan)5. 表格格式设置5.1 单元格的对齐（align）（居中，左对齐，右对齐）5.2. 背景色&图片（bgcolor & background）5.2.1 单元格背景色&图片5.2.2 表格背景色&图片5.3 单元格的边距（cellpadding）5.4 单元格间的距离(cel
HTML表格制作
哇塞
06-11 4万+
HTML中制作表格有两种方法： （1）先把最原始的表格画出来，每一个都是单个单元格，然后再根据要求进行行合并或列合并，有的表格需要行列都合并，则也是把它分为两步做，先合并行再合并列（或者先合并列再合并行），若进行了colspan和rowspan的合并，则将之后同一行或同一列的单元格删除，但这种方法较麻烦，容易搞混。 （2）直接根据最终要生成的表格来操作，将每个合并的单元格看做一个小的单元格，不...
HTML表格标签
weixin_52629158的博客
10-23 2150
HTML表格标签
html表格标签
weixin_44992737的博客
06-06 5341
html表格标签详解
HTML表格布局
m0_64482760的博客
07-24 3722
HTML表格布局（以物资验收入库表为例）
HTML表格标签详解
实泽有之，无泽虚之
03-26 8989
本文对HTML表格标签进行详解，大体分为三部分： 第一部分，主要讲解以下标签：table、tr、td、th、caption、colgroup、col、thead、tfoot、tbody；第二部分，主要讲解以下属性：border、rowspan、colspan、cellpadding、cellspacing、width、summary；第三部分，通过HTML样例代码和运行结果进行展示。
HTML表格标记教程(3):宽度和高度属性WIDTH、HEIGHT
12-01
首先，我们要了解默认情况下，HTML表格会根据其内容自适应地调整宽度和高度。然而，为了更好地控制表格的布局和视觉效果，我们可以使用`WIDTH`和`HEIGHT`属性来手动设定表格尺寸。这两个属性允许你为表格指定一个...
表格生成器 Html表格生成器 v1.0
11-10
《Html表格生成器 v1.0：打造个性化数据展示的新利器》 在信息化时代，数据的展示和交流已经成为日常工作中不可或缺的一部分。而HTML表格作为网页中最常见、最实用的数据展示工具，其灵活性和广泛性不言而喻。然而...
table_go:简单、灵活、快速的 html 表格生成器
06-08
简单、灵活、快速的 html 表格生成器 安装 将此行添加到应用程序的 Gemfile 中： gem 'table_go' 然后执行： $ bundle 或者自己安装： $ gem install table_go 用法 HAML 中的示例（或更多此处： : ） = ...
实验三-HTML表格与HTML表单.doc
07-15
HTML 表格与 HTML 表单 HTML 表格是 HTML 中的一种基本结构元素，用于组织和显示数据。HTML 表格由多个表格单元格组成，每个单元格可以包含文本、图像、表单元素等内容。HTML 表格的基本结构由 `<table>` 标记定义...
Vue2 中对数组进行操作时需要注意什么
最新发布
m0_73882020的博客
09-06 461
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
WHAT - React 函数与 useMemo vs useCallback
weixin_58540586的博客
09-03 948
目录介绍`useMemo` 与 `useCallback` 的区别示例代码`useMemo` 示例`useCallback` 示例总结 介绍 在 React 中，useMemo 和 useCallback 是两个用于性能优化的钩子，尽管它们有些相似，但各自有不同的用途和应用场景。理解它们的区别和适用情况可以帮助你更有效地管理组件的性能和状态。 useMemo 与 useCallback 的区别 useMemo: 目的: 用于记忆化（缓存）计算结果。它接受一个计算函数和依赖项数组，只有当依赖项发生变化时
使用stripe进行在线支付、退款、订阅、取消订阅功能(uniapp+h5)
weixin_52479803的博客
09-05 539
使用stripe进行在线支付、退款、订阅、取消订阅功能(uniapp+h5)
web开发
2301_76876837的博客
09-04 447
我们在访问的网站的时候，一般就是在浏览器的网址栏里输入，再敲个回车，我们就可以访问到我们想要的网站（比如京东）。这是为什么呢？我们访问的浏览器是一个程序，京东也是一个程序，只是京东在人家电脑上运行着，我们只是远程访问了人家的前端页面。我们根据下图来讲解一下web网站的工作流程：我们在浏览器输入我们想要查找的域名，回车（搜索）后，会到，前端服务器接受到请求后会把相对应的前端代码返回给浏览器，浏览器会自动解析前端代码（因为内置了解析引擎），展示出页面效果。前端代码里由一句代码会是访问。
html表格
05-27
HTML表格是一种用于展示数据的标准化格式，可以使用HTML的、、等标签来创建表格。 以下是一个简单的HTML表格示例： ```html 姓名 年龄 性别 张三 <td>25 男 李四 <td>30 女 ``` 在上面的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值