<html>
<head>
<title>年度收入</title>
<style>
table{
caption-side:bottom;
}
body{
background-color:#ebf5ff;
margin:0px;
padding:4px;
text-align:center;
}
.datalist{
color:#0046a6;
background-color:#d2e8ff;
font-family:arial;
border:1px solid #007eff;
border-collapse:collapse;
}
.datalist caption{
font-size:18px;
font-weight:bold;
}
.datalist th{
color:#003e7e;
background-color:#7bb3ff;
}
.datalist th,.datalist td{
border:1px solid #429fff;
}
</style>
</head>
<body>
<table summary="This table shows the yearly income for years 2004 through 2007" border="1" class="datalist">
<caption>年度收入 2004 - 2007</caption>
<tr>
<th></th>
<th scope="col">2004</th>
<th scope="col">2005</th>
<th scope="col">2006</th>
<th scope="col">2007</th>
</tr>
<tr>
<th scope="row">拨款</th>
<td>11,980</td>
<td>12,650</td>
<td>9,700</td>
<td>10,600</td>
</tr>
<tr>
<th scope="row">捐款</th>
<td>4,780</td>
<td>4,989</td>
<td>6,700</td>
<td>6,590</td>
</tr>
<tr>
<th scope="row">投资</th>
<td>8,000</td>
<td>8,100</td>
<td>8,760</td>
<td>8,490</td>
</tr>
<tr>
<th scope="row">募捐</th>
<td>3,200</td>
<td>3,120</td>
<td>3,700</td>
<td>4,210</td>
</tr>
<tr>
<th scope="row">销售</th>
<td>28,400</td>
<td>27,100</td>
<td>27,950</td>
<td>29,050</td>
</tr>
<tr>
<th scope="row">杂费</th>
<td>2,100</td>
<td>1,900</td>
<td>1,300</td>
<td>1,760</td>
</tr>
<tr>
<th scope="row">总计</th>
<td>58,460</td>
<td>57,859</td>
<td>58,110</td>
<td>60,700</td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
本教程将深入探讨如何使用CSS来优化和美化表格，使其在网站中更具吸引力。 首先，我们关注基本样式。默认情况下，浏览器会以一种平淡无奇的方式显示表格，但通过CSS，我们可以改变表格的边框、颜色、字体和对齐方式...
以上是关于使用CSS美化HTML表格的一些基本技巧。实际操作中，你可以根据具体需求进行组合和扩展，创造出更多独特的视觉效果。通过深入学习和实践，你将能够熟练掌握CSS，使网页中的表格不仅具备实用性，还能成为页面...
### 一、CSS美化表格的基础方法 #### 1. 设置表格的背景颜色与边框样式 根据部分提供的内容，“美化表格的方法”中提到了使用CSS来设置表格的背景色和边框。具体而言，可以将表格的背景色设置为`b5d6e6`这一淡蓝...
在美化表格时，我们可以利用CSS来调整表格的边框、填充、颜色、字体、对齐方式等视觉效果。例如，使用`border-collapse`属性可以控制单元格边框是否合并，`background-color`设置背景色，`text-align`调整文本对齐。...
总的来说，CSS美化滚动条是一个提升网页设计细节和用户体验的重要步骤。通过合理的样式设置和适时的JavaScript辅助，我们可以创建出既美观又实用的自定义滚动条，使用户在浏览网页时享受更加流畅的体验。
2. **CSS美化表格**： - `border-collapse`属性：用于设置表格边框是否合并，可以创建无间距的整洁表格。 - `border-style`, `border-width`, `border-color`：分别定义边框的样式、宽度和颜色，以定制个性化边框...
在这个特定的案例中，我们将讨论如何使用CSS来美化表格，使其呈现出凹陷立体效果，类似于Windows系统窗体中的边线。 首先，让我们了解HTML表格的基本结构。`<table>`元素用于创建表格，`<tr>`表示表格行，`<th>`...
纯CSS3表格美化特效
总结，"html+css+script 简单表格"主题涵盖了使用HTML创建表格结构，用CSS美化表格样式，以及用JavaScript增强表格功能的全过程。通过学习这些知识，开发者可以创建出功能丰富且视觉美观的网页表格。而压缩包中的...
在网页设计中，CSS（Cascading ...对于本文档中的"tablecloth"文件，可能是提供了一些示例代码或资源，用于实践这些CSS美化表格的方法。通过阅读和学习这些源码，可以加深对CSS表格样式的理解，并应用于自己的项目中。
在本案例中，主要关注的是如何使用CSS3来美化和优化表格样式。 首先，响应式设计的核心在于媒体查询（Media Queries）。通过设置不同的CSS规则针对不同设备或视口宽度，可以实现内容在不同屏幕尺寸下的适应性布局。...
总结来说，通过CSS实现表格的隔行变色显示是一种简单有效的美化方法。通过定义合适的CSS类，并将它们应用到HTML表格中的行元素上，我们能够轻松地为表格增加视觉层次感，提升用户阅读数据时的体验。在实际应用时，...
而CSS则负责美化表格的外观，使其更加符合现代设计美学。 #### 2. 表格设计技巧 文章中提及了多种表格设计技巧，如表格数据的排序和过滤。排序功能允许用户根据某一列的数据进行升序或降序排列，便于数据对比分析...
在实际应用中，理解并熟练运用CSS来美化和优化表格布局是提升网页质量的关键。同时，需要注意的是，良好的表格设计不仅要考虑视觉效果，还要注重信息的可读性和易用性，确保用户能够快速理解和操作数据。