table表格类标签的应用

主要需要掌握标签：

主要要掌握的标签属性：

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

cellpadding cellspacing

额外：

每个表格由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表示框内宽度

时间： 2024-11-08 22:30:26

table表格类标签的应用的相关文章

学习10 table表格制作标签

<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>认识table表格标签</title> <style type="text/css"> table tr td,th{border:1px solid

SSRS表格类对象 SSRS中的报表内容主要是通过"数据表"."矩阵"以及"列表"三种数据区域项目所建构而成的,但是在旧版SSRS中,这三种项目都有其适用功能以及使用限制,例如: n 数据表:数据列数量是固定的,但数据行却是可以动态增加且进行组合. n 矩阵:数据行与数据列都是可以动态增加的. n 列表:利用文本框以任意位置配置,适合用来呈现明细数据. 基本上,这些数据区域项目(除了列表)只能处理对称类型的报表结构,太多的限制对于企业业务报表设计

我理解的<table>表格

<table>表格 [默认样式] //IE7-浏览器不支持border-spacing table{ border-collapse: separate; border-spacing: 2px; border: 1px solid gray; } [属性] [1]border(在html5中,border只能为"1"或" ") border="0"//没有边框 border="8"//8像素宽的边框 [2]cel

HTML几类标签的应用

打开DREAMWEAVER,新建HTML,如下图: body的属性: bgcolor 页面背景色 background 背景壁纸.图片 text 文字颜色 topmargin 上边距 leftmargin 左边距 rightmargin 右边距 bottommargin 下边距 body属性用法示例: 格式控制标签: <font color="" face="" size=""></font> 分别控制字体的颜

利用JavaScript如何创建一个table表格

创建Table标签和定义表格头部份代码: window.onload=function(){ var arr=["编号","性别","姓名","年龄"]; var oDatas=[ { "id":1 , "gender":"男", "name" : "Javascript" , "age":30 }, { &

HTML几类标签的应用总结

bootstrap_07_表格类

<!doctype html> <html> <meta charset="utf-8" /> <head> <title>益司CMS-PC与手机建站集成</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no

[转]CSS如何设置html table表格边框样式

原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对table和td技巧性设置表格边框 4.对table和td设置背景,实现完美表格边框以下DIVCSS5对以上几种实现html 表格边框样式进行讲解与案例演示.为了便于观察,divcss5均设置所有案例表格为1px实线红色边框为例:table宽度为400px;表格为三列三行,对以上四种情况表格外层加个div

layer学习笔记之table表格引入数据实现分页

LayUI是一款免费,开源,轻量级的前端cms框架,适用于企业后端,能快速上手开发,集成了常用的组件,还有完善的文档和社区. 最近一直在学习使用layer的layui框架技术,这个主要表现在于弹出层的使用,但是layer页面效果使用也是非常好用的. 之前写一个一个关于数据的table表格显示并带有分页功能,实现过程遇到了很多问题,现抽空总结一下. 使用之前请先详细阅读layer的文档:http://www.layui.com/doc/modules/layer.html 首先下载最新版的lay