HTML5 表格格式化：交替行、颜色渐变、阴影
HTML5/CSS3 高级表格格式化和 ASP.NET GridView
引言
表格是 HTML5 以及所有先前版本中至关重要的元素，自互联网发展初期以来，一直是数据驱动型应用中的基石数据可视化工具。 GridView 是 ASP.NET 框架中一个非常重要的、与数据绑定的 Web 控件；本质上，它将底层数据结构渲染为 HTML 表格。 以下示例演示了适用于 HTML5 表格元素及其部分的新的 CSS3 样式技术。
HTML5 表格通常包含多个行标签 tr，这些标签可以包含标准单元格标签 td 或标题单元格标签 th。 此外，表格还可以通过部分元素进行增强：thead 和 tfoot 标签分别用于对标题/页脚内容进行分组，以及 tbody 标签用于将表格的主要内容分组在一起。 可以通过 CSS 以不同的方式设置这些部分的样式，从而为格式化选项增加更多的“粒度”。
解决方案
为了清晰起见，所提出的解决方案仅实现 HTML5 和 CSS3；未使用 JavaScript 或 jQuery。
该解决方案不使用任何图形文件（如 .jpg、.png、.bmp 等），从而产生非常小的数字占用空间和快速的网页加载速度。 整个解决方案封装在一个小于 8kb 的 .htm 文件中，远低于任何中等质量的图片文件的大小（可以通过删除为提高清晰度/可读性而添加的注释行来进一步减小文件大小）。
最后但并非最不重要的一点：解决方案实现了纯客户端技术，无需往返服务器，因此它可以像任何标准的下载应用程序一样在离线模式下自主运行。 客户端机器上的任何主流 Web 浏览器都可以作为平台，提供几乎通用的可移植性，从典型的桌面电脑到笔记本电脑到平板电脑到移动设备（智能手机）。
演示
下图演示了通过高级 CSS3 技术格式化的演示表格
图 1. 使用高级 CSS3 样式技术格式化的 DEMO 表格
用法
如上所述，整个解决方案封装在一个文本文件中。 您可以使用例如记事本文本编辑器复制粘贴以下代码片段（参见列表 1），然后将文件存储为 .htm 扩展名，然后 瞧 - 就完成了！ 在任何主流浏览器中打开该文件，即可查看其运行情况。
列表 1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Advanced Table CSS formatting</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Author" content="Alexander Bell" />
<meta http-equiv="Copyright" content="2011-2015 Infosoft International Inc" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Cache-control" content="no-cache" />
<meta name="Robots" content="all" />
<meta name="Distribution" content="global" />
<style type="text/css">
#divContainer {
max-width: 600pt;
width: 90%;
margin: 0 auto;
margin-top: 10pt;
font-family: Calibri;
padding: 0.5em 1em 1em 1em;
/* rounded corners */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* add gradient */
background-color: #ababab;
background: -webkit-gradient(linear, left top, left bottom, from(#909090), to(#ababab));
background: -moz-linear-gradient(top, #909090, #a0a0a0);
/* add box shadows */
-moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}
#divContainer h2 { color: #efefef; font-size: 1em; }
table.formatHTML5 {
width: 100%;
border-collapse: collapse;
text-align: left;
color: #606060;
}
table.formatHTML5 td {
vertical-align: middle;
padding: 0.5em;
}
table.formatHTML5 thead tr td {
background-color: White;
vertical-align: middle;
padding: 0.6em;
font-size: 0.8em;
}
table.formatHTML5 thead tr th,
table.formatHTML5 tbody tr.separator {
padding: 0.5em;
background-color: #909090;
background: -webkit-gradient(linear, left top, left bottom, from(#909090), to(#ababab));
background: -moz-linear-gradient(top, #909090, #ababab);
color: #efefef;
}
table.formatHTML5 tbody tr:nth-child(odd) {
background-color: #fafafa;
}
table.formatHTML5 tbody tr:nth-child(even) {
background-color: #efefef;
}
table.formatHTML5 tbody tr:last-child {
border-bottom: solid 1px #404040;
}
table.formatHTML5 tbody tr:hover {
cursor: pointer;
background-color: #909090;
background: -webkit-gradient(linear, left top, left bottom, from(#909090), to(#ababab));
background: -moz-linear-gradient(top, #909090, #ababab);
color: #dadada;
}
table.formatHTML5 tfoot {
text-align: center;
color: #303030;
text-shadow: 0 1px 1px rgba(255,255,255,0.3);
}
</style>
</head>
<body>
<!-- CENTERED-->
<div id="divContainer">
<h2>ANNUALIZED INFLATION RATE ON SELECTED PRODUCTS |NYC 2000-2010</h2>
<!-- HTML5 TABLE FORMATTED VIA CSS3-->
<table class="formatHTML5">
<!-- TABLE HEADER-->
<thead>
<tr><td colspan="3">DISCLAIMER:
ALL DATA PROVIDED 'AS IS' FOR DEMO PURPOSE ONLY</td></tr>
<tr>
<th>Product</th>
<th>Inflation Rate</th>
<th>Note</th>
</tr>
</thead>
<!-- TABLE BODY: MAIN CONTENT-->
<tbody>
<tr>
<td>Coke® Inflation Index</td>
<td>7.23%</td>
<td>Yeah, it's about $2/bottle now</td>
</tr>
<tr>
<td>Gas Inflation Index</td>
<td>6.94%</td>
<td>Yeah, pain at the pump!</td>
</tr>
<tr>
<td>NY subway fare Inflation Index</td>
<td>4.14%</td>
<td></td>
</tr>
<tr>
<td>Oil (WTI) Inflation Index estimated</td>
<td>13.59%</td>
<td>Wow!</td>
</tr>
<tr>
<td>Post Stamp Inflation Index</td>
<td>2.92%</td>
<td></td>
</tr>
<tr>
<td>PC RAM (memory) Inflation Index</td>
<td>-28.34%</td>
<td></td>
</tr>
<!--SEPARATOR ROW USED DIFFERENT STYLE-->
<tr class="separator">
<td colspan="3">Precious metals Price Index: shown for comparison</td>
</tr>
<tr>
<td>Silver</td>
<td>20.94%</td>
<td><a href=
"https://codeproject.org.cn/Tips/262546/HTML-Tables-formating-best-practices"
target="_blank" title="Read the article on Codeproject.com">
Read the article</a></td>
</tr>
<tr>
<td>Gold</td>
<td>17.86%</td>
<td>AU is Golden!</td>
</tr>
<tr>
<td>Platinum</td>
<td>10.98%</td>
<td></td>
</tr>
<tr>
<td>Palladium</td>
<td>-1.86% </td>
<td>Element Pd</td>
</tr>
</tbody>
<!-- TABLE FOOTER-->
<tfoot>
<tr><td colspan="3">Copyright
Ⓒ 2011-2022 Alexander Bell</td></tr>
</tfoot>
</table>
</div>
</body>
</html>
设计说明
对于长度较长的表格，建议将 tfoot 标签放在 tbody 之前，以便浏览器能够在处理其余行之前渲染页脚。 有关 CSS 表格格式化的更多信息，请参阅 [2,3]。