Html中各种表格的实现

最新推荐文章于 2023-12-21 17:38:09 发布
最新推荐文章于 2023-12-21 17:38:09 发布
阅读量1.1k 收藏 2
点赞数
分类专栏： Html、PHP学习 文章标签： 合并 应用 html 表格 细线表格
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ranger0220/article/details/21090989
版权

各种表格的实现：



<html>
	<head>
		<title align="center">表格的使用</title>
		<meta name="keywords" content="表格使用">
		<meta name="description" content="如何使用表格">
		<meta http-equiv="content-type" content="text/html;charset=gb2312">
		<meta http-equiv="refresh" content="30;URL=http://fashionentice.taobao.com">
	</head>
	<body bgcolor="pink">
	<center>
		<p align="center"><strong>表格的基本应用</strong></p>
		<ol type="1">
			<li>基本表格：</li>
				<table bordercolor="black" width="600" border="1" cellspacing="0" cellpadding="5">
					<tr>
						<td>1.1</td>
						<td>1.2</td>
						<td>1.3</td>
					</tr>
					<tr>
						<td>2.1</td>
						<td>2.2</td>
						<td>2.3</td>
					</tr>
					<tr>
						<td>3.1</td>
						<td>3.2</td>
						<td>3.3</td>
					</tr>
				</table>
				<br />
			<li>无边框表格：</li>
				<table width="600">
					<tr>
						<td>1.1</td>
						<td>1.2</td>
						<td>1.3</td>
					</tr>
					<tr>
						<td>2.1</td>
						<td>2.2</td>
						<td>2.3</td>
					</tr>
					<tr>
						<td>3.1</td>
						<td>3.2</td>
						<td>3.3</td>
					</tr>
				</table>
				<br />
			<li>双线表格：</li>
				<table bordercolor="blue" width="600" border="1" cellpadding="5">
					<tr>
						<td>1.1</td>
						<td>1.2</td>
						<td>1.3</td>
					</tr>
					<tr>
						<td>2.1</td>
						<td>2.2</td>
						<td>2.3</td>
					</tr>
					<tr>
						<td>3.1</td>
						<td>3.2</td>
						<td>3.3</td>
					</tr>
				</table>
				<br />
			<li>合并多列表格：</li>
				<table bordercolor="blue" width="600" border="1" cellpadding="5">
					<tr>
						<td colspan="3" align="center" height="50" valign="top">1.1</td>
					</tr>
					<tr>
						<td>2.1</td>
						<td>2.2</td>
						<td>2.3</td>
					</tr>
					<tr>
						<td>3.1</td>
						<td>3.2</td>
						<td>3.3</td>
					</tr>
				</table>
				<br />
			<li>合并多行表格：</li>
				<table bordercolor="blue" width="600" border="1" cellpadding="5">
					<tr>
						<td rowspan="3" valign="bottom" align="center">1.1</td>
						<td>2.1</td>
						<td>3.1</td>
					</tr>
					<tr>
						<td>2.2</td>
						<td>2.3</td>
					</tr>
					<tr>
						<td>3.2</td>
						<td>3.3</td>
					</tr>
				</table>
				<br />
			<li>复杂表格1：</li>
				<table bordercolor="blue" width="600" border="1" cellpadding="5">
					<tr>
						<td>1.1</td>
						<td colspan="2">2.1</td>
					</tr>
					<tr>
						<td>2.1</td>
						<td  rowspan="2">2.2</td>
						<td>2.3</td>
					</tr>
					<tr>
						<td>3.1</td>
						<td>3.3</td>
					</tr>
				</table>
				<br />
			<li>复杂表格2：</li>
				<table bordercolor="blue" width="600" border="1" cellpadding="5">
					<tr>
						<td>1.1</td>
						<td>1.2</td>
						<td>1.3</td>
					</tr>
					<tr>
						<td  colspan="2">2.1</td>
						<td  rowspan="2">2.3</td>
					</tr>
					<tr>
						<td>3.1</td>
						<td>3.2</td>
					</tr>
				</table>
				<br />
			<li>凸起表格：</li>
				<table width="600" border="1" cellpadding="5" bgcolor="gray" bordercolorlight="black" bordercolordark="white">
					<tr>
						<td>1.1</td>
						<td>1.2</td>
						<td>1.3</td>
					</tr>
					<tr>
						<td>2.1</td>
						<td>2.2</td>
						<td>2.3</td>
					</tr>
					<tr>
						<td>3.1</td>
						<td>3.2</td>
						<td>3.3</td>
					</tr>
				</table>
				<br />
			<li>凹陷表格：</li>
				<table width="600" border="1" cellpadding="5" bgcolor="gray" bordercolorlight="white" bordercolordark="black">
					<tr>
						<td>1.1</td>
						<td>1.2</td>
						<td>1.3</td>
					</tr>
					<tr>
						<td>2.1</td>
						<td>2.2</td>
						<td>2.3</td>
					</tr>
					<tr>
						<td>3.1</td>
						<td>3.2</td>
						<td>3.3</td>
					</tr>
				</table>
				<br />
			<li>细线表格：</li>
				<table width="600" border="0" cellspacing="1" bgcolor="black">
					<tr bgcolor="white">
						<td>1.1</td>
						<td>1.2</td>
						<td>1.3</td>
					</tr>
					<tr bgcolor="white">
						<td>2.1</td>
						<td>2.2</td>
						<td>2.3</td>
					</tr>
					<tr bgcolor="white">
						<td>3.1</td>
						<td>3.2</td>
						<td>3.3</td>
					</tr>
				</table>
		</ol>
	</center>
	</body>
</html>

寻箫之音
关注
专栏目录
html纯css实现表格样式
01-04
表格在 HTML 中通常使用 `<table>`、`<tr>`（行）、`<th>`（表头）和 `<td>`（单元格）等标签来创建。CSS 则通过选择器和属性来控制表格的样式。以下是一些关键知识点： 1. **基础表格样式**：首先，可以使用 `...
制作一个简单HTML中华传统文化网页（HTML+CSS）
HTML网页设计
08-02 1万+
📔网站布局方面计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面网站系统文件种类包含html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
入门HTML(含常见标签)—附实现案例
qq_63218110的博客
11-27 4787
HTML不同于我们所熟知的C，Java等编程语言，它是一种标签化语言，其形式类似于XML。本篇文章主要常见文本标签和文档结构标签。
html页面要少用table,为什么我们不建议用Table布局
weixin_33791941的博客
06-03 1281
我也说说体会：第1. 如果只是创建一个1行1列，或者很少的几行几列的布局，table确实代码量大一些。尤其对于一个1行1列的表格来说，与相比确实冗繁很多。但这应该是从代码简洁度的角度来说，而不是“占用服务器更多的流量资源”。在当前的网络条件下，对于绝大多数网站来说，还没到靠节约几个html标记来降低服务器流量的——毕竟在加载一个网页过程中，html代码只是其很小比例的一部分。甚至是微不足道的一部分...
html写出任意的table效果,HTML不使用Table标签怎么写出Table表格的效果-大型CMS开发实战第九期...
weixin_30198949的博客
06-04 461
实例html>如何在不使用Table标签怎么写出Table表格的效果*{padding:0;margin:0;font-size:1rem;}/*body{background:#000000;}*/.table{width:607px;height:300px;display:table;text-align:center;box-sizing:border-bo...
HTML实现
weixin_54447656的博客
12-08 262
表单标签： form标签：<form action="test.html"> ... </form> 描述了要把数据按照什么方式，提交到哪个页面中 input标签：type取值种类有button、checkbox、text、file、image、password、radio... 1）文本框 <input type="text"> ...
Python实现简单HTML表格解析的方法
09-21
### Python 实现简单HTML表格解析的方法 在处理网页数据时，经常会遇到需要从HTML表格中提取数据的情况。本文将详细介绍如何使用Python中的`libxml2dom`模块来解析简单的HTML表格，并提供具体的代码示例。 #### 一...
js 静态HTML表格排序功能实现
10-30
在网页开发中，为了提升用户体验，常常需要为HTML表格添加排序功能，使用户可以方便地按照某一列的数据进行升序或降序排列。本篇将详细介绍如何使用JavaScript实现静态HTML表格的排序功能。 首先，我们需要一个包含...
HTML表格边框的控制实现代码
09-28
HTML表格边框的控制是网页开发中经常需要面对的问题，尤其是对于初学者而言，表格的布局和边框设计可能会显得有些复杂。HTML中的表格是通过标签及其相关子标签如（表格行）、（表格头部单元格）和（表格数据单元格）...
html实现表格展示和修改
最新发布
10-07
html实现表格展示和修改
html实现浪漫的爱情日记（附源码）
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
02-28 9083
html实现浪漫的爱情日记（附源码），html实现爱情表白,html实现爱情浪漫，html实现甜蜜爱情，可以配置以爱情的相遇，相熟，相知，相爱的四个主题，然后以对话的方式记录下来，支持调整主题音乐，可以自动配置背景图片，改成自己的爱情背景图片 ，基于html5开发的，直接浏览器打开使用。兼容手机端和电脑web端。
HTML详细教程
weixin_54799350的博客
06-19 6700
新手小白想学前端,可以参考这篇文章,或者和我一样需要复习的小伙伴.临近秋招,系统的复习一下之前学过的知识.总结了一下,学习前端就是在前进的道路上捡了西瓜丢了芝麻,边学边忘.
html简单网页代码：使用html+css实现一个静态页面（含源码）
qq3200628753的博客
12-21 6894
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
使用html与css实现一个漂亮的网页
代码海中一粒米
03-20 6380
效果图： 实现的代码： html代码： <!DOCTYPE > <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
HTML代码实现简易购物车-web前端教程
web前端入门基础进阶教程-htmlcssjs
07-04 1万+
网上关于购物车实现的代码非常多，本次的这篇文章主要是和大家分享了HTML代码实现简易购物车，有需要的小伙伴可以看一下，接下来讲解一下具体的实现。 1、用html实现内容； 2、用css修饰外观； 3、用js(jq)设计动效。 第一步：首先是进行html页面的设计，我用一个大的p将所有商品包含，然后用不同的p将不同的商品进行封装，商品列表中我用了ul li实现，具体实现代码如下（代码中涉及到的商品都是网上随便copy的，不具有参考价值）： > <p id="goods"> > &g
html、css 实现一个漂亮的表格
热门推荐
Zhangguohao666的博客
12-06 8万+
利用html、css制作一个美观、大方的表格。（简单，易上手）
html页面表格选择,HTML表单、HTML表格（第14周）
weixin_39602615的博客
06-03 663
本周学习内容：HTML表格第一章至第四章HTML表单第一章至第四章注：1.在搭建谷歌搜索界面时，简单方法是将谷歌logo以图片形式插入，另一种方法是利用CSS盒模型调节样式来展示2.上周问题图像和超链接，图片中的路径描述不准确，在浏览器界面无法正常显示，可以采用以下方法解决找到对应文件夹下的图片---->右击点击“属性”---->“安全”对话框下的对象名称则为图片存储的路径，复制后写在...
HTML表格（HTML 表格的使用，收藏这一篇就够了）
weixin_47139649的博客
10-15 7万+
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 表单 表格 列表
YOUEZ的博客
11-30 1579
HTML 表格 表单 列表 HTML 表单用于搜集不同类型的用户输入，简而言之，就是用来搜集用户数据的。 HTML表单都是存在于<form ></form>标签里面的。 表单元素。 表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。 这些东西都具有一个交互性的特点。
HTML实现冻结表格效果
"html冻结表格实现方法" 在网页设计中，有时候我们需要模拟Excel的功能，让表格的标题行或列在用户滚动页面时始终保持可见，这就需要用到HTML的冻结表格技术。标题中提到的“html冻结表格”是指在HTML页面中创建一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值