使用CSS美化表格和表单元素
css中table的使用
css中table的使用在CSS中，可以使用以下属性来调整和美化表格（table）：1. border-collapse：设置表格边框是否合并为一个边框，默认值为 separate，可以使用 collapse 将边框合并。
```csstable {border-collapse: collapse;}```2. border-spacing：设置表格相邻单元格之间的距离，默认值为0。
仅当 border-collapse 设置为 separate 时生效。
```csstable {border-spacing: 10px;}```3. caption-side：设置表格标题（caption）的位置，默认值为top，可以使用 bottom 将标题放在表格底部。
```csstable {caption-side: bottom;}```4. empty-cells：设置空单元格的显示，默认值为 show，可以使用 hide 隐藏空单元格。
```csstable {empty-cells: hide;}```5. width、height：设置表格的宽度和高度。
```csstable {width: 100%;height: 200px;}```6. background-color：设置表格的背景颜色。
```csstable {background-color: lightgray;}```7. text-align：设置表格内容的水平对齐方式，默认值为 left，可以使用 center 居中对齐，或者 right 右对齐。
```csstable {text-align: center;}```8. vertical-align：设置表格内容的垂直对齐方式，默认值为 top，可以使用 middle 居中对齐，或者 bottom 底部对齐。
```csstable {vertical-align: middle;}```9. color：设置表格内容的文字颜色。
20个很漂亮的CSS表格
并不是所有的Web 开发者都会对美化表格数据感兴趣，今天我们收集了20 个功能强大，外观漂亮的基于Ajax + CSS 的表格效果，你可以从这些示例中学习怎么使用这些表格提供的排序和过滤的功能来组织表格中的数据。
现在让我们来看看这些表格：（点击每个样式前面的链接即可进入下载）#1. TableclothTablecloth 由CSS Globe开发，是一个轻量级的、易于使用的表格，以友好的方式将样式和行为添加到你当前的HTML 表格元素当中。
#2. Ask the CSS Guy TableAsk the CSS Guy Table 演示了怎么样创建一个可以显示数据之间的关系的表格，例如在单击某个单元格时可以同时突出显示最顶端的行和最左边的列。
#3. A CSS styled table version 2Veerle Duoh为我们介绍了一种如何利用CSS 使表格更有吸引力的方法，并且在实现的过程中充分考虑了表格的可访问性。
#4. Sortable TableSortable Table ——演示了如何按升序或降序排列以及如何过滤显示表格中的数据。
#5. Row Locking with CSS and JavaScript演示了如何利用Javascript 和CSS 实现“锁定行”的效果，选中的行会一直显示高亮效果直到用户再次点击才会消失。
#6. Vertical scrolling tables如果你有大量的数据但是没有足够大的空间来显示它，这会是一个很好的解决办法。
通过CSS 固定表格的页眉和页脚，但是内容却可以滚动显示。
#7. Replicating a Tree table利用HTML 和CSS 建立的树状表格。
#8. Collapsible tables with DOM and CSS利用DOM 和CSS 建立的可折叠的表格效果。
表格页脚部分包含的箭头有一个名为“footcollapse”的类，通过为之添加Javascript 代码可以让表格展开或折叠。
使用css制作表单
使用CSS制作表单（Form）表单是功能型网站中经常使用的元素，是网站交互中最重要的元素。
在网页中，小到搜索按钮，大到用户注册表单，以及用户控制面板，都需要使用到表单及其表单元素。
表单元素主要用来收集用户信息，帮助用户进行功能性控制，表单的交互设计与视觉设计都是网站设计中的重要部分。
本节将介绍如何使用CSS设计表单。
1.制作登录表单登录表单是各大网站都会用到的一个非常实用的模块，是用来进入其他相关页面的入口。
本节将使用form表单以及label标签制作一个样式精美的登录表单。
1.1 label标签语法结构<label for=”#” accesskey=”#”></label> Label标签具有提示表单含义的功能，是成堆出现的。
●for：表示label标签要绑定的XHTML元素，当点击这个标签的时候，所绑定的元素将获取焦点。
<label for=”InputBox”>姓名</label><input id=”InputBox” type=”text”>●accesskey：表示访问label标签所绑定的元素的热键，当按下热键，所绑定的元素将获取焦点。
（热键：Alt+N）<label fo r=”InputBox” accesskey=”N”>姓名</label><input id=”InputBox” type=”text”>1.2 制作登录表单实例使用表单元素和label标签设计一个登录表单。
分成两个div层级关系，外层为layout层，用来定义表单框架样式，内层为member层，用来放置表单等主体元素。
内层member又分成标题区域和表单区域，分别为title和form控制样式。
2.制作用户注册表单表单布局除了需要应用表单中的各个元素之外，还需要使用到table表格，表格是表单布局的得力助手。
对于最终的表单来说，表格对数据的排列方式非常适合于表单元素的排列。
Django中的表单美化与自定义样式
Django中的表单美化与自定义样式Django是一款流行的Python Web开发框架，其提供了一套强大而灵活的表单处理功能。
在构建Web应用程序时，表单是不可或缺的一部分，并且为用户提供了与应用程序进行交互的界面。
为了提升用户体验和界面美感，我们可以对Django表单进行美化和自定义样式的设置。
一、使用Bootstrap美化Django表单Bootstrap是一个流行的前端CSS框架，它提供了丰富的样式组件和布局工具。
我们可以利用Bootstrap的样式表，轻松地为Django表单添加美化效果。
首先，在项目中引入Bootstrap的CSS和JavaScript文件。
可以通过下载文件或使用CDN链接引入。
接下来，在Django的模板文件中，通过给表单相关的HTML元素设置class属性来应用Bootstrap样式。
例如，可以为输入框添加form-control类，为按钮添加btn类。
这样表单对应的输入框和按钮就会具有Bootstrap的美化效果。
此外，还可以根据需求，设置不同的class来应用Bootstrap提供的其他样式组件，如下拉菜单、单选框和复选框等。
二、使用CSS自定义Django表单样式除了使用现有的CSS框架外，我们也可以通过编写自定义的CSS样式表来实现对Django表单的美化。
首先，在Django的静态文件目录中创建一个新的CSS文件，用于存放自定义的样式。
然后，通过在模板文件中引入该CSS文件，将其应用到相应的表单上。
在CSS样式表中，可以利用各种样式属性来设置表单元素的外观。
例如，可以设置背景颜色、字体样式、边框样式等。
此外，还可以使用伪类选择器来实现对特定表单状态的样式设置，如焦点状态、鼠标悬停状态等。
三、通过Django自带的widgets修改表单元素Django提供了一些内置的widgets用于修改表单元素的显示方式。
我们可以在定义表单类时，利用这些widgets来定制表单元素的外观。
网页设计之表单的美化
网页设计之表单的美化网页设计之表单的美化很多时候，我们仅仅为了实现数据采集这个功能来使用表单，常看到的表单都是“千人一面”、毫无生气，本专题尝试着来改变这一现象，试图赋予表单一个丰富多彩的面貌。
表单的外观，也是最为直接的花样，可以通过改变它来实现特效，本文分两个出发点来讲述：CSS魔法和图像魔法。
1、CSS魔法CSS，就是大家知道的层叠样式单，它可以定义页面元素的外观，包括字体样式、背景颜色和图像样式、边框样式、补白样式、边界样式等等，下面就从这几个方面出发，讨论怎样将CSS应用到表单中，彻底美化它！1.1 字体样式的应用字体样式包括：字体族科(font-family)、字体风格(font-style)、字体变形(font-variant)、字体加粗(font-weight)、字体大小(font-size)、字体(font)，具体的定义方法，在这里不详细讲述，可以参考它的资料。
也许你已经注意到，按钮上的文字不漂亮，其实可以通过CSS字体样式来解决，同样地，其它的几个涉及到文字的表单项，例如，文本框、多行文本框、口令框、下拉选择框都可以应用字体样式。
为了充分展示这些应用，下例特别设计了几种样式，在实际应用中，不必这么凌乱，灵活运用：样例12：表单元素的字体样式展示 underline css style分析：文本框里的文字是加粗的，大小是9pt，字体是宋体，代码：＜input type=text name=formExam size=10 maxlength=10 style=font-family:宋体; font-size: 12px; font-weight: bold value=加粗＞口令框文字是红色的，代码：＜input type=password name=formExam3 style=font-size: 9pt; color: #FF0000 size=8 maxlength=8＞下拉框文字颜色是红色的，字体是Verdana，大小是9pt，代码：＜select name=select size=1 style=font-family:Verdana,Arial; font-size: 9pt; color: #FF0000＞＜option value=2 selected＞＜/option＞＜option value=1＞＜/option＞＜/select＞多行文本框了的字体是Verdana，有下划线，大小是9pt，代码：＜TEXTAREA name=formExam2 cols=30 rows=3 style=font-family:Verdana, Arial; font-size: 9pt; color: #000099; text-decoration: underline align=right＞underline css style＜/TEXTAREA＞发送1和发送2按钮的文字不同，是因为发送1按钮使用了9pt 的宋体文字，所以比较美观，发送1按钮的代码：＜input type=submit name=Submit value=发送1 style=font-family:宋体; font-size: 9pt;＞小结：只要我们对字体的样式熟悉了，就可以灵活多变，不一定要在标签里面使用style来定义，完全可以在＜head＞里定义，或者外部引用CSS文件，用到的时候引用一下就能达到预期的效果。
excel中的css样式
excel中的css样式让我们来看一下如何使用CSS样式来调整表格的背景颜色。
在Excel中，我们可以通过选择单元格或整个表格，然后在“格式”选项卡中选择“填充色”来调整背景颜色。
我们可以选择预设的颜色，也可以使用RGB值来自定义颜色。
通过调整背景颜色，我们可以使表格更加醒目和易于区分。
除了背景颜色，我们还可以使用CSS样式来调整表格中文字的字体样式。
在Excel中，我们可以通过选择单元格或整个表格，然后在“格式”选项卡中选择“字体”来调整字体样式。
我们可以选择字体、字号、加粗、斜体等选项，以适应不同的需求。
通过调整字体样式，我们可以使表格中的文字更加清晰和易于阅读。
我们还可以使用CSS样式来调整表格的边框样式。
在Excel中，我们可以通过选择单元格或整个表格，然后在“格式”选项卡中选择“边框”来调整边框样式。
我们可以选择边框的粗细、颜色和线型，以及是否显示特定的边框。
通过调整边框样式，我们可以使表格更加整洁和有条理。
除了上述介绍的基本样式调整外，Excel还提供了一些高级的CSS 样式功能，例如条件格式。
通过条件格式，我们可以根据特定的条件来自动调整单元格的样式。
例如，我们可以设置当某个单元格的数值大于某个阈值时，将其背景颜色调整为红色，以提醒用户注意。
条件格式功能可以使表格中的数据更加直观和易于分析。
Excel还提供了一些特殊的样式调整功能，例如数据条和图标集。
通过使用数据条，我们可以将数值大小以不同长度的条形图的形式显示在单元格中，以便比较和分析。
而使用图标集，我们可以根据特定的数值范围，在单元格中显示相应的图标，以便直观地表示数据的状态。
这些特殊的样式调整功能可以使表格更加生动和易于理解。
Excel中的CSS样式可以帮助我们调整表格和单元格的外观，使其更加美观和专业。
通过调整背景颜色、字体样式、边框样式等，我们可以使表格更加醒目和易于阅读。
同时，通过条件格式、数据条和图标集等高级功能，我们可以进一步提升表格的可视化效果和分析能力。
四个漂亮CSS样式表
四个漂亮CSS 样式表1. 单像素的边框CSS 表格这是⼀个⾮常所⽤的表格风格。
源码：border-width: 1px;padding: 8px; border-style: solid;border-color: #666666; background-color: #dedede;}table.gridtable td {border-width: 1px;padding: 8px; border-style: solid;border-color: #666666; background-color: #ffffff;}</style><!-- Table goes in the document BODY --><table class="gridtable"></table>2. 带背景图的CSS 样式表格和上⾯差点⼉相同，只是每⼀个格⼦⾥多了背景图。
cell-blue.jpgcell-grey.jpg 1. 下载上⾯两张图，命名为cell-blue.jpg 和cell-grey.jpg 2. 拷贝以下的代码到你想要的地⽅。
记得改动图⽚url }table.imagetable th { background:#b5cfd2 url('cell-blue.jpg');border-width: 1px;padding: 8px; border-style: solid;border-color: #999999;}table.imagetable td {<tr> <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th></tr>3. ⾃⼰主动换整⾏颜⾊的CSS 样式表格（须要⽤到JS ）这个CSS 样式表格⾃⼰主动切换每⼀⾏的颜⾊，在我们须要频繁更新⼀个⼤表格的时候⾮常实⽤。
第10章 使用CSS样式表美化网页
第10章使用CSS样式表美化网页CSS可以将网页和格式进行分离，提供对页面布局更强的控制能力以及更快的下载速度。
在如今的网页制作中，几乎所有精美的网页都用到了CSS。
有了CSS控制，网页便会给人一种尝新悦目的感觉。
CSS虽然只是一些代码，得到的效果却不同凡响。
Dreamweaver 8在CSS功能设计上做了很大的改进。
这一章我们就来学习如何在Dreamweaver 8中利用CSS美化网页，提高网页制作的品质。
10.1 CSS快速入门CSS是Cascading Style Sheet的缩写，可以翻译为层叠样式表或级联样式表。
CSS是一个辅助HTML设计的新特性，能够保持整个HTML的统一外观。
使用CSS可以在设置文本之前，制定整个文本的属性，比如颜色、字体和大小等，即可获得统一的外观。
让我们先来了解一下在Dreamweaver 8中CSS的基本功能吧。
10.1.1 CSS新功能如果要在网页中输入代码才能实现CSS的效果，相信很多人都会放弃使用CSS。
正是因为Dreamweaver 8为用户提供了可视化的操作界面，所以受到越来越多人的喜爱。
Dreamweaver 8在CSS功能设计方面为使用者带来的方便体现在：【属性】面板、页面属性、【CSS样式】面板和CSS语法提示。
下面我们分别讲述：1. 【属性】面板在Dreamweaver 8【属性】面板中的【样式】选项中，我们可以在设计页面时添加的字体、颜色、大小等样式，【样式】选项会将这些格式自动记忆生成“Style1”、“Style2”样式。
在下次重复使用可以直接在【样式】选项中套用样式，有了这个功能，我们在做网页设计时可以大大提高工作效率。
如图10-1-1所示。
图10-1- 1 【属性】面板中的【样式】选项如果套用的CSS样式不是文字，而是表格或者表单，同样可以在【属性】面板中设置CSS。
在【属性】面板中都有一个【类】选项，【类】选项会将我们对表格或表单的格式设置自动记忆生成“Style1”、“Style2”样式。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网页中表格的应用无处不在，在HTML中，最 初希望用于纯数据，却发展为基本页面布局子语言 ；但是在Web标准中，正在渐渐地恢复表格原来的 用途，即只用来显示表格数据。如今，表格已经成 为可视化构成与格式化输出的主要方式。
本章介绍使用CSS样式设置表格的方法，掌握 Web标准网站的页面中数据的制作方法，并能够使 用CSS样式表对数据表进行综合运用。
sghgmyy@
设置表格边框和背景
【任务描述】
在网页中，通常会为表格添加边框和背景，以 此来界定和区分不同单元格中的数据内容，如果表 格的border值大于0，则显示边框；如果border值 为0，则不显示边框。
本实例通过设置表格的边框、背景颜色以及背 景图片来对表格进行进一步的装饰和美化，使得页 面中的内容能够更加丰富多彩，从而增加网页的吸 引力。
sghgmyy@
主要内容
7.1 创建数据表格——制作企业网站新闻页面 7.2 设置表格边框和背景——制作精美表格 7.3 为单元行应用类CSS样式
——实现隔行变色的单元格 7.4 应用CSS样式的hover伪类
——实现交互的变色表格 7.5 设置表单元素的背景颜色——制作商品搜索 7.6 设置表单元素的边框——美化登录框
sghgmyy@
【任务展示】
设置表格边框和背景
sghgmyy@
案例效果图
【任务实现】
设置表格边框和背景
sghgmyy@
CSS样式代码
设置表格边框和背景【Fra bibliotek关知识】在CSS样式中，通过定义border属性、bordercollapse属性和background-color属性可以对表格的边框 和背景进行设置，border-collapse属性的语法格式如下：
sghgmyy@
创建数据表格
<thead>、<tbody>和<tfood>标签使设计者能够将 表格划分为逻辑部分，例如将所有列标题放在<thead> 标签中，这样就能够对这个特殊区域单独的应用样式 表。如果在一个表格中使用了<thead>和<tfoot>标签， 那么在这个表格中至少使用一个<tbody>标签。一个表 格中只能使用一个<thead>和<tfoot>标签，但却可以使 用多个<tbody>标签将复杂的表格划分为更容易管理的 部分。
sghgmyy@
创建数据表格
通过使用<thead>、<tbody>和<tfood>元素，将 表格行聚集为组，可以构建更复杂的表格。每个标签 定义包含一个或者多个表格行，并且将它们标识为一 个组的盒子。 ➢ <thead>标签用于指定表格标题行，如果打印的表格 超过一页纸，<thead>应该在每个页面的顶端重复。 ➢ <tfood>是表格标题行的补充，它是一组作为脚注的 行，如果表格横跨多个页面，也应该重复。 ➢ 用<tbody>标签标记的表格正文部分，将相关行集合 在一起，表格可以有一个或多个<tbody>部分。
本实例制作一个企业网站新闻页面，在该新闻页面 中使用数据表格的形式来表现新闻标题内容，为页面中 的数据进行合理、清晰的排版，使浏览者能够对页面中 的数据一目了然。
sghgmyy@
【任务展示】
创建数据表格
sghgmyy@
案例效果图
【任务实现】
创建数据表格
sghgmyy@
border-collapse : separate | collapse ;
➢ separate：默认值，表示边框会被分开，不会忽略 border-spacing和empty-cells属性；
➢ collapse：表示边框会合并为一个单一的边框，会忽略 border-spacing和empty-cells属性。
sghgmyy@
主要内容
7.7 使用CSS定义圆角文本字段
7.8 使用CSS定义下拉列表——制作多彩下拉列表
7.9 column-width属性（CSS3.0）
——实现网页文本分栏
7.10 column-count属性（CSS3.0）
——控制网页文本分栏数
7.11 column-gap属性（CSS3.0）
sghgmyy@
创建数据表格
默认情况下，Web浏览器如何显示表格数据？ Web浏览器通过基于浏览器对表格标记理解
的默认样式设计来显示表格，即： ➢ 单元格之间或表格周围没有边框； ➢ 表格数据单元格使用普通文本并且左对齐； ➢ 表格标题单元格居中对齐，并设置为粗体字体； ➢ 标题在表格中间。
——控制网页文本分栏间距
7.12 column-rule属性（CSS3.0）
sghgmyy@
——为分栏添加分栏线
创建数据表格
【任务描述】
HTML中的数据表格是网页中常见的元素，表格在 网页中是用来显示二维关系数据的，并且还可以为网页 进行排版、布局，但是使用表格布局的网页不能达内容 与表现的分离，因此不建议使用在Web标准中。
sghgmyy@
设置表格边框和背景
如何设置表格标题？ <caption>标签是表格标题标签，<caption>标签出现
在<table>标签之间，作为第一个子元素，它通常在表格之 前显示。包括<caption>标签的显示盒子的宽度和表格本身 宽度相同。
HTML代码
创建数据表格
sghgmyy@
CSS样式代码
创建数据表格
【相关知识】
HTML表格通过<table>标签定义。在<table> 的打开和关闭标签之间，可以发现有许多由<tr> 标签指定的表格行，每一行由一个或者多个表格 单元格组成。表格单元格可以是表格数据<td>， 或者表格标题<th>。通常将表格标题认为是表达 对应表格数据单元格的某种信息。
sghgmyy@
创建数据表格
为什么需要使用CSS对表格数据进行控制？ 表格在网页中主要用于表现表格式数据，Web
标准是为了实现网页内容与表现的分离，这样可 以使网页的内容和结构更加整洁，便于更新和修 改。如果直接在表格的相关标签中添加属性设置 ，会使得表格结构复杂，不能够实现内容与表现 的分离，不符合Web标准的要求，所以建议使用 CSS样式对表格数据进行控制。