table表格类标签的应用

最新推荐文章于 2023-03-13 15:11:04 发布
最新推荐文章于 2023-03-13 15:11:04 发布
阅读量1k 收藏
点赞数
分类专栏： html历史 网页历史 web标准 html+css+js 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24928451/article/details/44731387
版权

主要需要掌握标签：

                                  <table>  <tr>  <th>  <td>  <caption>  

主要要掌握的标签属性：

                                           rowspan  colspan  frame(void  above  below  hsides  vsides  lhs  rhs  box  border )  border  rules(none  groups  rows  cols  all)  summary  width

                                           cellpadding  cellspacing

额外：

          <thead>  <tbody>  <tfoot>

 


每个表格由table标签开始

每个表格行由tr标签开始

每个表格列有td标签开始

在一个表格内有几个tr标签就有几行

在一个表格内有几个td标签就有几列

border属性：控制表格外边框粗细

<span style="font-size:24px;"><!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table border="0">
		<tr>
			<td>border="0"</td>
			<td>没有表格边框</td>
			<td>没有表格边框</td>
		</tr>
		<tr>
			<td>没有表格边框</td>
			<td>没有表格边框</td>
			<td>没有表格边框</td>
		</tr>
		<tr>
			<td>没有表格边框</td>
			<td>没有表格边框</td>
			<td>没有表格边框</td>
		</tr>
	</table>
</body>
</html></span>
效果图： 


<span style="font-size:24px;"><!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table border="1">
		<tr>
			<td>border="1"</td>
			<td>边框为1</td>
			<td>边框为1</td>
		</tr>
		<tr>
			<td>边框为1</td>
			<td>边框为1</td>
			<td>边框为1</td>
		</tr>
		<tr>
			<td>边框为1</td>
			<td>边框为1</td>
			<td>边框为1</td>
		</tr>
	</table>
</body>
</html></span>


效果图：


<th>标签表示表格中的标题列

<span style="font-size:24px;"><!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table border="1">
		<tr>
			<th>表格中的标题列</th>
			<th>表格中的标题列</th>
			<th>表格中的标题列</th>
		</tr>
		<tr>
			<td>边框为1</td>
			<td>边框为1</td>
			<td>边框为1</td>
		</tr>
		<tr>
			<td>边框为1</td>
			<td>边框为1</td>
			<td>边框为1</td>
		</tr>
	</table>
</body>
</html></span>

效果图：



rowspan  colspan属性

<span style="font-size:24px;"><!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table border="1">
		<tr>
			<th colspan="2">表格中的标题列</th>
			<th>第一行只有两列</th>
		</tr>
		<tr>
			<td>边框为1</td>
			<td>边框为1</td>
			<td>边框为1</td>
		</tr>
		<tr>
			<td>边框为1</td>
			<td>边框为1</td>
			<td>边框为1</td>
		</tr>
	</table>
</body>
</html></span>

效果图：



<span style="font-size:24px;"><!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table border="1">
		<tr>
			<th rowspan="2">表格中的标题列</th>
			<th>第一行只有两列</th>
			<th>第一行只有两列</th>
		</tr>
		<tr>
			<td>边框为1</td>
			<td>边框为1</td>
		</tr>
		<tr>
			<td>横跨两行</td>
			<td>边框为1</td>
			<td>边框为1</td>
		</tr>
	</table>
</body>
</html></span>


效果图：



cellpadding  cellspacing属性：

<span style="font-size:24px;"><!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table border="1" cellpadding="50">
		<tr>
			<th>单元格与内容之间空白</th>
			<th>第一行只有两列</th>
			<th>第一行只有两列</th>
		</tr>
		<tr>
			<td>边框为1</td>
			<td>边框为1</td>
			<td>边框为1</td>
		</tr>
		<tr>
			<td>横跨两行</td>
			<td>边框为1</td>
			<td>边框为1</td>
		</tr>
	</table>
</body>
</html></span>

效果图：




<span style="font-size:24px;"><!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table border="1" cellspacing="50">
		<tr>
			<th>单元格与线之间空白</th>
			<th>第一行只有两列</th>
			<th>第一行只有两列</th>
		</tr>
		<tr>
			<td>边框为1</td>
			<td>边框为1</td>
			<td>边框为1</td>
		</tr>
		<tr>
			<td>横跨两行</td>
			<td>边框为1</td>
			<td>边框为1</td>
		</tr>
	</table>
</body>
</html></span>

效果图：




feame属性

<span style="font-size:24px;"><!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table border="1" frame="void">
		<tr>
			<th>无外边框</th>
			<th>第一行只有两列</th>
			<th>第一行只有两列</th>
		</tr>
		<tr>
			<td>边框为1</td>
			<td>边框为1</td>
			<td>边框为1</td>
		</tr>
		<tr>
			<td>横跨两行</td>
			<td>边框为1</td>
			<td>边框为1</td>
		</tr>
	</table>
</body>
</html></span>


效果图： 


<span style="font-size:24px;"><!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table border="1" frame="above">
		<tr>
			<th>外边框只有上边框</th>
			<th>第一行只有两列</th>
			<th>第一行只有两列</th>
		</tr>
		<tr>
			<td>边框为1</td>
			<td>边框为1</td>
			<td>边框为1</td>
		</tr>
		<tr>
			<td>横跨两行</td>
			<td>边框为1</td>
			<td>边框为1</td>
		</tr>
	</table>
</body>
</html></span>

效果图：




<span style="font-size:24px;"><!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table border="1" frame="below">
		<tr>
			<th>外边框只有下边框</th>
			<th>第一行只有两列</th>
			<th>第一行只有两列</th>
		</tr>
		<tr>
			<td>边框为1</td>
			<td>边框为1</td>
			<td>边框为1</td>
		</tr>
		<tr>
			<td>横跨两行</td>
			<td>边框为1</td>
			<td>边框为1</td>
		</tr>
	</table>
</body>
</html></span>

效果图：



hsides显示上部和下部外框

vsides显示左部和右部外框

lhs显示左外外框

rhs显示右外边框



rule有关属性

none无内边框

<span style="font-size:24px;"><!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table border="1" rules="none">
		<tr>
			<th>外边框只有下边框</th>
			<th>第一行只有两列</th>
			<th>第一行只有两列</th>
		</tr>
		<tr>
			<td>边框为1</td>
			<td>边框为1</td>
			<td>边框为1</td>
		</tr>
		<tr>
			<td>横跨两行</td>
			<td>边框为1</td>
			<td>边框为1</td>
		</tr>
	</table>
</body>
</html></span>

效果：




groups组和列之间的线条

rows显示行线条

cols显示裂线条

summary用于注释  不显示

width表示框内宽度


前端hacker97
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
XHTML入门学习教程:表格标签的应用
01-19
表格是XHTML中处境尴尬的一个标签，本节只做了解即可. 关于表格 在CSS流行之前，table被广泛应用于定位。在XHTML中，table不被推荐用来定位，W3C希望CSS可以取代<table>在定位方面的地位。...表格标签<t
学习笔记前端：table标签使用
最新发布
photobooth的博客
03-12 133
学习笔记，前端table标签使用
Table 类 - Google Guava
程序员咏哥的博客
05-29 1069
一、Table简介 Table 代表一个特殊的映射，其中两个键可以在组合的方式被指定为单个值。它类似于创建映射的映射。 通常来说，当你想使用多个键做索引的时候，你可能会用类似Map<FirstName,Map<LastName,Person>>的实现，这种方式很丑陋，使用上也不友好。 Guava为此提供了新集合类型Table，它有两个支持所有类型的键：”行”和”列”，类似效果：Map-->Table-->rowKey+columnKye+value...
table标签
qq_50931436的博客
05-30 7494
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 ...
HTML-表格标签的使用
m0_57878719的博客
03-13 640
table>标记表示整个表格。标记中有很多属性，例如 width 属性用来设置表格的宽度，border 属性用来设置表格的边框，align 属性用来设置表格的对齐方式，cellspacing是表格里单元格之间的距离， cellpadding是表格里单元格内的空白部分。单元格标记，又称为列标记，一个标记中可以嵌套若干个标记。在或者中添加colspan="2",可以合并两列单元格，colspan后填写的值指的是合并单元格的列数。
几个关于diaplay:table布局神器的绝妙应用场景
qq_32614411的博客
08-31 1857
一、CSS display属性与表格布局相关的属性值解释 table此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 table-row-group此元素会作为一个或多个行的分组来显示（类似 <tbody>）。 table-header-group此元素会作为一个或多个行的分组来显示（类似 <thead>）。...
table CSS制作好看的网页表格
12-12
另一个元素是summary.summary属性可以应用于表格标签,用来描述表格的内容.与image的alt文本属性相似. 2.thead, tbody, tfoot thead, tbody, tfoot使网页设计人员能够将表格划分为罗辑部分.例如,可以将所有列标题放在...
网页大赛作品 HTML常用标签和表格的应用
10-18
本网页是利用table制作！为了文本能够更好的显示，所以采用表格布局!
详解HTML表格|l-639642.pdf
11-20
作用：数据的展示，表格应用场景. <table>表格 行 单元格 格式： <table> 　<caption>...</caption><!-表格标题，居中显示--> 　 　<th>...</th>...　<!-表格头，内容居中，加粗显示-->　 　 　 　...
java table类_Table类型使用说明
weixin_39809175的博客
02-16 2040
需要先setKeyColumn，设置一下主键列table.getMetaData().setKeyColumn("TT_WPXX");table.deleteRows("0B60DFA2214949F79D120C54B51642D1");在saveAction的执行前事件中获得客户新增、修改、删除的数据public static void goodsTypeProcessBeforeSaveX5...
table标签应用
渣渣的夏天
04-10 290
一、最终效果图 二、源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <...
Table 类（数据表基类）
weixin_30507269的博客
11-10 112
只修改数据表某条记录的部分字段（究极进化）： public class TableHelper { private Dictionary<string, object> temp; public Dictionary<string, object> Temp { get { return temp; } } ...
Web前端开发 table标签相关用法和属性
m0_52841254的博客
05-27 4553
table标签 html中的<table>标签，通常用于对页面布局的规划。 一、<table>标签简介 table标签用于在网页中建立表格布局，其子标签有<tr></tr> <th></th> <td></td> <thead></thead> <tbody></tbody> <tfoot></tfoot> 我们用如下代...
table标签的应用
langrentao的博客
03-20 422
用align=‘center’来设置文字 align=‘right’ 右对齐 align=‘left’ 左对齐 colspan=‘2’ 只能合并单元格td行 合并单元格时同时删除相应的对应行单元格 空格空格 变成 空格 rowspan=‘2’ 合并td列 合并单元格时同时删除相应的对应的列单元格 空格 空格 变成 空格...
5-表格标签的应用
weixin_43827819的博客
11-17 189
一、案例：后台数据的展示 二、知识必备 1、表格的应用场合 表格用来展示数据，不是用来布局。 2、表格标签 2.1用法： 2.2标签及属性说明： table：表格 caption：标题（只能有一个） tr：行 th：标题单元格 td：内容单元格 border属性:表格边框 2.3 合并单元格 colspan： 跨列合并 rowspan： 跨行合并 三、案例实现 未完待续。。。 ...
HTML之⑦表格标签的使用总结
笔岸柳影
02-03 538
HTML之⑦表格标签的使用总结 QQ:3020889729 小蔡表格标签的使用骨架表格展示骨架标签组成关于我所说的关系的定义_table标签（父标签）_thead标签(结构标签——规定表头区域...
HTML中的table标签及应用
LinDadaxia的博客
07-13 499
table标签主要用于网页的表格设计，本次简单使用了几个标签。 演示： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> table{/*为页面中所有table标签添加样式*/ width: 720px;/*设置table宽度*/ margin: 0 auto;/*设置table水
table标签的使用技巧
热门推荐
夏天的风
03-17 1万+
在实际开发中，table标签在展示数据方面非常的便利，尤其是在后台管理系统中使用的频率最高。简单介绍一下table的使用技巧（合并单元格，细线表格、表格标题......）
layui table 表格字体大小
07-27
在layui的table表格中，你可以通过自定义CSS来修改表格的字体大小。你可以使用以下代码来设置表格的字体大小： ```css .layui-table td, .layui-table th { font-size: 14px; /* 设置字体大小为14像素 */ } ``` ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值