前端CSS表格的基本属性

. 表格属性

属性名称用途取自border-collapse设置或检索表格的行和单元格的边是合并还是独立。separate：边框独立 collapse：相邻边被合并border-spacing边框独立时，单元格与单元格之间的间距数字，不允许负值empty-cells设置或检索当表格的单元格无内容时，是否显示该单元格的边框。hide：隐藏该单元格的边框。 show：显示该单元格的边框。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格属性</title>
		<style>
		
			.separate{
				width: 200px;
				height: 200px;
				border-collapse:separate;
				border-spacing:10px;
				empty-cells: hide;
				}
		</style>
	</head>
	<body>
		<table border="1" class="separate">
			<tr  id="tr1">
				<td>separate--边框独立</td>
				<td>separate--边框独立</td>
				<td>separate--边框独立</td>
			</tr>
			<tr>
				<td>collapse--相邻边被合并</td>
				<td>collapse--相邻边被合并</td>
				<td></td>
			</tr>
		</table>
	</body>
</html>

2. 布局属性

属性名称用途取值display设置或检索对象是否及如何显示。none：隐藏对象。不为被隐藏的对象保留其物理空间
block：指定对象为块元素visibility定义了元素是否可见visible：设置对象可视保留物理空间
hidden：设置对象隐藏
collapse：主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。float定义了元素向左或者向右浮动放置none：设置元素不浮动
left：设置元素浮在左边
right：设置元素浮在右边

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--
		<style>
		 .table{
				width: 300px;
				height: 300px;
				background-color: red;
				display: block;
			}
		   img{
		   	width: 300px;
		   	height: 300px;
		   	visibility: visible;
		   }
		</style>
		-->
		<style>
			.test{
				width: 300px;
				height: 300px;
				float: right;
				background-color: red;
			}
			.table{
				width: 300px;
				height: 300px;
				float: right;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div class="test">我将出现在屏幕右方1</div>
		<div class="table">我将出现在屏幕右方2</div>
		<br>
		<img src="css1.jpg"/>
	</body>
</html>

3. 定位属性

属性名称用途取值position指定一个元素在文档中的定位方式。static：默认。
relative:相对定位[对象遵循常规流,不会影响常规流中的任何元素]
absolute：绝对定位 [对象脱离常规流]top定义了元素的上外边距边界与其包含块上边界之间的偏移数字，不允许负值right定义了元素的右外边距边界与其包含块右边界之间的偏移数字，不允许负值bottom定义了元素的底外边距边界与其包含块底边界之间的偏移数字，不允许负值left定义了元素的左外边距边界与其包含块左边界之间的偏移数字，不允许负值z-index定义一个元素在文档中的层叠顺序数字【数值越大就会在最上面】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--
		<style>
			#div1{
				width: 200px;
				height: 300px;
				background-color: red;
				position: absolute;
				top: 100px;
			}
			#div2{
				width: 200px;
				height: 200px;
				background-color: blue;
			}
		</style>
		-->
		<style>
			#test1,#test2,#test3,#test4 {
				position: absolute;
				width: 200px;
				height: 100px;
				padding: 5px 10px;
				color: #fff;
				text-align: right;
			}
			#test1{
				z-index: 1;
				font-size: 10px;
				background-color: red;
			}
			#test2{
				z-index: 2;
				font-size: 10px;
				top: 30px;
				left: 30px;
				background-color: blue;
			}
			#test3{
				z-index: 3;
				font-size: 10px;
				top: 60px;
				left: 60px;
				background-color: black;
			}
			#test4{
				z-index: 4;
				font-size: 10px;
				top: 90px;
				left: 90px;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<!--
		<div id="div1">	
		</div>
		<div id="div2">	
		</div>
		-->
		<div id="test1">z-index:1</div>
		<div id="test2">z-index:2</div>
		<div id="test3">z-index:3</div>
		<div id="test4">z-index:4</div>
	</body>
</html>

变换属性设置
2D Transform Functions：
matrix()：【矩阵变换】以一个含数值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵
translate()：指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
scale()：指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
rotate()指定对象的2D rotation（2D旋转），需先有 <’’ transform-origin '> 属性的定义
3D Transform Functions：
matrix3d()：以一个4x4矩阵的形式指定一个3D变换
translate3d()：
指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
rotate3d()：指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略
scale3d()：指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略

TML标签：

基本标签：

<html></html>双标签开头结尾 HTML标签为最大的标签称为根标签

<head></head> 文档头部标签且必须设置title

<title></title> 页面标题

<body></body> 文档的主体包含页面的内容

<h1>-<h6> HTML提供6个等级的页面标题有大到小

<p></p> p标签用于定义段落可以将页面分为若干个段落根据窗口大小自动换行

<br/>单标签换行标签（break打断）

格式化标签：

加粗 <strong></strong>or<b></b>

斜线 <em></em>or<i></i>

删除线 <del></del>or<s></s>

下划线 <ins></ins>or<u></u>

div和span标签：

没有语义属于一种盒子来装内容

<div></div> 表示分割分区用来布局一行一个大盒子

<span></span>意为跨度，跨距一行可以哦有多个小盒子

图像标签：

<img src="图像路径(url)"/> 定义页面中的图像

图像标签包含多个属性

src 图片路径必须属性

alt 文本替换文本图像不能显示的文字

title 文本鼠标放到图像上显示文字

width 像素宽度

height 高度

border 边框

相对路径和绝对路径

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径

分类：下级路径/ 上级路径../

绝对路径：是指目录下的绝对位置，如硬盘中的路径或网路地址

超链接标签：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href用于指定链接目标的url地址(必须属性)

target用于指定链接打卡方式 _self为默认值 _blank为在新窗口打开方式

锚点链接：可以快速到页面某个位置

在链接文本中的href属性中，设置属性值为#名字的形式，如<a href="#two">目标</a>

找到目标位置标签，里面添加一个id属性=名字，如：<h3 id="two">目标</h3>

注释：

快捷键CTRL + /

特殊字符：

HTML 原代码	显示结果	描述
<	<	小于号或显示标记
>	>	大于号或显示标记
&	&	可用于显示其它特殊字符
"	“	引号
?	?	已注册
?	?	版权
?	?	商标
		半个空白位
		一个空白位
		不断行的空白

表格标签：

<table></table> 是用于定义表格的标签

<tr></tr> 标签用于定义表格中的行，必须嵌套在<table></table>标签中

<tb></tb> 用于定义表格的单元格，必须嵌套在<tr></tr>标签中

<td> 元素中的文本通常是普通的左对齐文本。字母td指表格数据(table data)，即数据单元格的内容

表头单元格标签：

<th>标签表示HTML表格的表头部分 <th> 元素中的文本通常呈现为粗体并且居中。

表格属性：

align left center right 规定表格相对于周围元素的对齐方式
border 1or"" 规定表格单元是否拥有边框默认为"",表示没有边框

cellpadding 像素值规定单元边沿与其内容的空白，默认1像素

cellspacing 像素值规定单元格直接的空白默认2像素

with 像素值or百分比规定表格的宽度

合并单元表格方式：

跨行合并：rowspan="合并单元格的个数"

跨列合并：colspan="合并单元格的个数"

列表标签：

<ul>标签表示无序列表里面只能包含li

<ol>有序标签里面只能包含li

<li>相当于一个容器定义列表项与<ui>or<li>嵌套使用 li里面可以包含任何标签

<dl>标签用于定义描述列表(或自定义列表),该标签会与<dt>(定义项目和名字)和<dd>(描述每一个项目名字)一起使用

表单标签：

标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义了 <input> 元素的标签，一般为输入标题
<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了 <fieldset> 元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮
<datalist> New	指定一个预先定义的输入控件选项列表
<keygen> New	定义了表单的密钥对生成器字段
<output> New	定义一个计算结果

<input>标签用于收集用户信息包含一个type属性可以有多种样式

<input type="属性值" />

属性值：

button	定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
checkbox	定义复选框。
file	定义输入字段和 "浏览"按钮，供文件上传。
hidden	定义隐藏的输入字段。
image	定义图像形式的提交按钮。
password	定义密码字段。该字段中的字符被掩码。
radio	定义单选按钮。
reset	定义重置按钮。重置按钮会清除表单中的所有数据。
submit	定义提交按钮。提交按钮会把表单数据发送到服务器。
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

<label>标签

<label> 标签为 input 元素定义标注（标记）。 label是标注的意思

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同

详情可参考

https://www.runoob.com/ 菜鸟教程

https://www.w3school.com.cn/ w3c

、在exl中编辑好你想要的表格形式，复制有内容的表格到dw右侧，如图：

2、将途中宽度去除，选中一个宽度，按Ctrl+F,点击“替换全部”。如图：

3、途中选中部分换成表格的表头代码：

表头代码：<table align="center" border="1" cellpadding="0" cellspacing="1" class="biaoge" style="text-align:center" width="100%">

<tbody>

4、将表格标题中的td和/td改成th和/th。如图：

5、选中右侧表格中有链接的表格，选择上方窗口中的属性面板，在html状态下，目标选择”_blank”。

6、左侧代码就是汇总表格的代码，复制到后台内容页的源码状态下即可。

在线咨询

上一篇：根据markdown文件反向转换成chrome浏览器
下一篇：一款超赞的Java工具类库，GitHub星标11.6

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商