table表格高级用法（二）

2021-08-05 22:02:48 阅读：224 来源： 互联网

标签：表格 nth top tr 用法 caption table Data

表格及表单：
语法：<th></th>
<caption></caption>
th标记表格内表头单元格，是单元格标题
caption标记表示鸟哥的名称，也叫表格标题

caption-side：top/right/bottom/left
定义表格的caption对象放于表格二的哪个位置，与caption对象一起作用。
top为默认
left、right位置只有火狐识别
top、bottom IE6以上版本支持，IE6一下版本只识别top

隔行变色设置：
语法：双数行：tr：nth-child（2n）{}
单数行：tr:nth-chiled(2n+1){}

说明：设置单数（odd）单元格的样式和双数（even）单元格的样式

tr:nth-child(2n){
				background: #008000;
			}

重要的功能表格的合并：

表格html重要属性：
1、colspan="value" 合并列

2、rowspan=“value”合并行

3、valign=“top/bottom/middle/baseline（基线）”垂直对齐方式

4、rules=“group/rows/cols/all/none”添加分割线

说明：rows:位于行之间的线条
cols：位于列之间的线条
all：位于行和列之间的线条
none：没有线条
group：位于行组合列组之间的线条（

行数据分组：

thead：表头
tbody：表体
tfoot：表尾

）说明一个表格只可以包含一个thead，一个tfoot，可以包含多个tbody

数据列分组（添加组分割线（rules））
<colgroup span="value"></colgroup>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
				
			caption{
				font-size: 20px;
			}
			tr:nth-child(even){
				background: #008000;
			}
			td{
				border: 1px solid red;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<table border="1px" cellspacing="0" cellpadding="0" rules="groups">
			<caption>表格标题</caption>
			<thead>
			<tr>
				<th>Header</th>
				<th>Header</th>
				<th>Header</th>
				<th>Header</th>
			</tr>
			</thead>
			<tbody>
			<tr>
			<td colspan="4">伟大的马克思主义 </td>
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			</tbody>
			<tbody>
				<tr>
				<td colspan="4">中国伟大 </td>
				</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			</tbody>
			<tfoot>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			</tfoot>
		</table>
	</body>
</html>

标签：表格,nth,top,tr,用法,caption,table,Data
来源： https://blog.csdn.net/chehec2010/article/details/119427496

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

table表格高级用法（二）