HTML表格的使用

最新推荐文章于 2024-03-18 18:50:29 发布
最新推荐文章于 2024-03-18 18:50:29 发布
阅读量1k 收藏 1
点赞数
文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62898618/article/details/122291732
版权

1.表格的基本使用

表格标签(table)的基本语法

table:表格容器
tr:列
td:单元格
th:粗体
caption:标题列


【例子】<table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#00FF00" bordercolordark="#00FFFF" cols="2">   

    ①cellspacing="2" 
    表格格线厚度。

    ②cellpadding="2" 
    文字与格线的距离
    ③align="CENTER" 
    表格的摆放位置（水平），可选值为： left, right, center。
    ④valign="TOP". 
    表格内字画等的摆放贴　位置（垂直），可选值为： top, middle, bottom。 
 

【跨行跨列例子】colspan、rowspan
    【案例】见PPT


表格(table)与表单(form)的综合运用  
    【案例】登录注册


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- 
		表格的使用
			HTML中提供的表格标签：
				table   表格框架
				tr 		行标签
				td 		单元格标签

	 -->
	<!-- 需求：5行4列的表格 -->
	<!-- 
		表格的属性
			border  边框  0 隐藏 1显示 >1 控制粗细
			width|height  宽度   高度
			bgcolor 背景颜色
			cellspacing 控制单元格与单元格之间的间距
			cellpadding 内填充（单元格的边框与文本的间距）
			align    水平对齐  left center  right
			valign   垂直居中  top  middle  bottom
            background 背景 图片 设置

	 -->
	<table borderColor = "red" background = "imgs\\刘亦菲.jpg" align="center" border="1" width="70%" height = "800" cellspacing="0" cellpadding="0">
		<!-- 第一行 -->
		<tr align="center" valign="top">
			<td>第1行第1个单元格</td>
			<td>第1行第2个单元格</td>
			<td>第1行第3个单元格</td>
			<td>第1行第4个单元格</td>
		</tr>
		<tr bgcolor="red" style = "color: yellow;">
			<td>第2行第1个单元格</td>
			<td>第2行第2个单元格</td>
			<td>第2行第3个单元格</td>
			<td>第2行第4个单元格</td>
		</tr>
		<tr>
			<td bgcolor="blue">第1行第1个单元格</td>
			<td>第1行第2个单元格</td>
			<td>第1行第3个单元格</td>
			<td>第1行第4个单元格</td>
		</tr>
		<tr>
			<td>第1行第1个单元格</td>
			<td>第1行第2个单元格</td>
			<td>第1行第3个单元格</td>
			<td>第1行第4个单元格</td>
		</tr>
		<tr>
			<td>第1行第1个单元格</td>
			<td>第1行第2个单元格</td>
			<td>第1行第3个单元格</td>
			<td>第1行第4个单元格</td>
		</tr>
	</table>


</body>
</html>

2.表格标签的使用 标题表头


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- table标签中的其他子标签使用
		另类单元格标签   th
			特点：自动加粗+自动居中
			作用：作用在表头

		captin标签
			设置表格的标题

		thead|tbody|tfoot
			HTML中将表格可以分为三个等分
	 -->
	 <table align="center" border = "1" width="400">
	 	<caption><h2>学员信息表</h2></caption>
	 	<thead>
			<tr>
		 		<th>学号</th>
		 		<th>姓名</th>
		 		<th>性别</th>
		 	</tr>
	 	</thead>
	 	<tbody>
	 	<tr>
	 		<td>item1</td>
	 		<td>item2</td>
	 		<td>item3</td>
	 	</tr>
	 	<tr>
	 		<td>item1</td>
	 		<td>item2</td>
	 		<td>item3</td>
	 	</tr>
	 	<tr>
	 		<td>item1</td>
	 		<td>item2</td>
	 		<td>item3</td>
	 	</tr>
	 	</tbody>
	 	<tfoot>
			<tr>
		 		<td>xxxx</td>
		 		<td>xxxxx</td>
		 		<td>xxxxx</td>
		 	</tr>
	 	</tfoot>
	 </table>
</body>
</html>

3.表格的跨行与跨列 （就是合并单元格）


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- 
		1.表格的跨行与跨列
			colspan|rowspan  针对的是单元格

		rowspan  跨行
		colspan  跨列
			算上本身
	 -->
	 <table width="50%" border="1">
	 	<tr>
	 		<td colspan="3">item1</td>
	 		<!-- <td>item2</td>
	 		<td>item3</td> -->
	 	</tr>
	 	<tr>
	 		<td>item1</td>
	 		<td rowspan = "2">item2</td>
	 		<td>item3</td>
	 	</tr>
	 	<tr>
	 		<td>item1</td>
	 		<!-- <td>item2</td> -->
	 		<td>item3</td>
	 	</tr>
	 </table>
</body>
</html>

4.表格中嵌套表格


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table border="1" width="100%">
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>
            嵌套的表 
				<table border="1" width="100%">
					<tr>
						<td>&nbsp;</td>
						<td>&nbsp;</td>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td>&nbsp;</td>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td>&nbsp;</td>
						<td>&nbsp;</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>

	</table>
</body>
</html>

5.表格表单的嵌套使用


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body bgcolor="pink">
	<form action="#" method = "post" >
		<table border="0"align = "center">
			<caption><h3>用户登录</h3></caption>
			<tr>
				<td>账号</td>
				<td><input type="text" placeholder="输入账号"></td>
			</tr>
			<tr>
				<td>密码</td>
				<td><input type="password"></td>
			</tr>
			<tr align="center">
				<td colspan = "2">
					<input type="submit" value = "登录">
					<input type="reset" value="重置">
				</td>
			</tr>


		</table>


	</form>
</body>
</html>

嘴强程序员
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Html 表格使用
newone77的博客
03-18 398
一、基本使用： 1.表的构造： table caption标题 colgroup(width）列组：定义列样式，class或style，注意span不会合并单元格，只代表跨多少列样式 col(width)列：定义列样式，非闭合标签 thead表眉：默认垂直居中加粗样式 tr-td(colspan rowspan)tr为表行table row，td为单元格table data，cols......
HTML表格布局实际使用详解
09-28
本篇文章将深入探讨HTML表格的实际使用和布局计算。 首先，表格在HTML中以`<table>`标签开始，由`<tr>`（行）标签定义每一行，`<td>`（数据单元格）标签定义单元格，`<th>`（表头）标签用于创建表头单元格。表格的...
html表格用法
hmwck0215的博客
11-28 376
一、如何隐藏表格的四个边框。 表格边框的显示与隐藏，是可以用frame参数来控制的。请注意它只控制表格的边框图，而不影晌单元格。 只显示上边框 只显示下边框 只显示左、右边框 只显示上、下边框 只显示左边框 只显示右边框 不显示任何边框 　 二、表格边框和单元格的特殊效果。 普 表 通 格这是一普通的表格 普表 通格 细线表格 表格加上了漂亮的细线 (利用cellspacin...
HTML 表格的使用方法
chen983234416的博客
11-15 1279
    首先我先把所有熟悉的都列举出来，包括表格一些最常用的属性，很生僻的我就不列举啦，要是想要了解的话，到W3C手册上查询。首先表格的开始是由&lt;table&gt;&lt;/table&gt;标签引导的，接下来我先写出所有的标签，以及属性，然后在它们的旁边做一一的解释。   &lt;table border="1" width="200px"  height="200px" cellsp...
html中表格的用法
weixin_41105207的博客
10-09 332
怎样建立一个表格 ①首先在使用html语言建立一个表格时，要先弄清楚这个表格有多少行，多少列。要注意是否有单元格的合并，要以最小格子来算行和列。 ②在理清表格的结构之后，就要对应html中的标签，明确要使用的标签之间的关系。如：table  tbody tr  th td等等。 例如：下图为一个关于天气情况的表格，首先分析出这个表格有三行七列。而且需要把前四个单元格合并成两个，跨列合并使用c...
详解HTML表格|l-639642.pdf
11-20
作用：数据的展示，表格应用场景. 表格 行 单元格 格式： 　<caption>...</caption><!-表格标题，居中显示--> 　 　<th>...</th>...　<!-表格头，内容居中，加粗显示-->　 　 　 　<td>...</td>... ...
HTML制作表格.ppt
11-15
本章节将介绍HTML制作表格的相关知识点，以便读者能够快速掌握HTML表格的制作方法和美化技巧。 一、为什么使用表格？ 表格是HTML文档中的一种常见结构，广泛应用于网页上的文本和图像存放。它可以将数据以表格形式...
漂亮的表格css+html
04-20
首先，HTML表格的基本结构包括`<table>`标签，它定义了一个表格。表格由`<tr>`（行）标签组成，每一行中又包含`<th>`（表头）和`<td>`（数据单元格）标签。例如： ```html 表头1 表头2 数据1 数据2 `...
HTML5制作表格样式
09-27
本篇文章将详细介绍如何使用HTML5来制作一个美观、易于理解的表格，并通过CSS进行样式定制，使其更具吸引力。首先，我们来看一下基本的HTML结构。 ```html <!DOCTYPE html> <html> 表格 /* CSS样式代码 */ ...
merge-table:对HTML表格进行合并拆分操作
05-31
merge-table HTML表格设计器可以快速的可视化设计一个表格，可以对单元格进行合并，拆分，添加，删除以及设置样式等操作，API简单易懂 ###第一步: grunt /*运行任务，生成js主文件*/ ###第二步: bower install /*安装依赖库*/ ###第三步： npm start /*运行项目*/ ##API merge 合并多个单元格 MergeTable.merge(); splitH 横拆单元格MergeTable.splitH(); splitV 竖拆单元格MergeTable.splitV(); deleteCol 删除列MergeTable.deleteCol(); deleteRow 删除行MergeTable.deleteRow(); addRowTop 在当前选中的单元格上方添加行MergeTable.addRowTop(); addRowBot
html 表格的使用
wgchen
07-12 1055
html 表格的使用...
html表格的使用
鹿蹊zz的博客
05-11 584
目录 1. 表格的定义： 2. 表格的标签 3. 单元格边框(border) 4. 合并单元格 5.表格格式 5.1 单元格的对齐 5.2 背景色&图片（bgcolor & background） 5.3 单元格的边距（cellpadding） 5.4 单元格间的距离(cellspacing) 5.5 显示部分边框（frame & rules） 练习1 练习2 1. 表格的定义： <table> 标签定义 HTML 表格。简单的 HTML ..
HTML表格使用
kissLife的博客
04-03 839
HTML表格使用
html的表格使用
wenqi1的博客
07-11 721
table表示表格，align="center"表示居中，width表示宽度，height表示高度 tr表示有几列，td表示有几行 border="1"表示表格的线框，是双线，使用这个时，table和tr里不用设置颜色 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> &
HTML表格（HTML 表格的使用，收藏这一篇就够了）
最新发布
u013179804的博客
03-18 9235
你好，我是云桃桃。一个希望帮助更多朋友快速入门 WEB 前端的程序媛。今天聊聊 table。HTML元素用于创建表格，它是一种将数据按行和列组织排列的结构，用于在网页中呈现复杂的数据集。HTML 表格具有以下 2 种主要用途：1、最常见的用途是以表格形式展示数据，如产品价格、学生成绩、电影时间表等。表格可以清晰地展示数据的结构和关系。2、表格可以用于创建网页表单，通过在表格单元格中放置表单控件（如文本框、复选框、下拉菜单等），用户可以方便地输入数据。
html列表、表格基本用法
一个半路出家的人
08-21 861
一,列表 1,无序列表  &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;列表&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;!
HTML表格的语法及使用(详细代码案例讲解)
weixin_69026046的博客
12-09 1128
HTML表格的语法及使用(详细代码案例讲解)
HTML表格标签用法
我用键盘敲出一个世界
09-19 940
今天偶然发现自己对表格中的一些标签用法不是很熟悉，经过在网上一些查找，让自己更加熟悉，在此进行记录。 1、form，<form> 标签用于为用户输入创建 HTML 表单。 表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。 表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。 表单用于向服务器传输数据。需要注意是for
python解析html表格使用lxml库
04-18
可以使用lxml库中的html.fromstring()函数将HTML字符串转换为可供XPath和CSS选择器查询的树形结构，然后使用XPath或CSS选择器来遍历HTML表格并提取相应的数据。 举个例子：如果要使用XPath选择器提取表格中第一行第一个单元格的内容，可以使用以下代码： ``` python from lxml import html html_str = '<table><tr><th>Header 1</th><th>Header 2</th></tr><tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr><tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr></table>' tree = html.fromstring(html_str) first_cell = tree.xpath('//table/tr[1]/td[1]/text()') print(first_cell) ``` 输出应该为`[]`，因为示例html_str中的表格中没有 `<td>` 标签，而是 `<th>` 标签用于表头。你可以在XPath表达式中将第二个“td”改为“th”来修改代码以查找表头，或者使用CSS选择器。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值