柚子快报邀请码778899分享：前端 CSS3表格和表单样式

在传统网页中，表格主要用于网页布局，因此也成为网页编辑的主要工具；在标准化网页设计中，表格的主要功能是显示数据，也可适当辅助结构设计。本章主要介绍如何使用CSS控制表格和表单的显示效果，如表格和表单的边框、背景等样式。

1、表格基本样式

CSS为表格定义了5个专用属性，详细说明如下表所示：除了上表介绍的5个表格专用属性外，CSS的其他属性对于表格一样适用。

1.1、设计表格边框线

使用CSS的border属性代替

标签的border属性定义表格边框，可以优化代码结构。

【示例】演示使用CSS设计细线边框样式的表格。第1步，在标签内添加

西	东
北

1.4、定义标题样式

使用CSS的caption-side属性可以定义标题的显示位置，该属性取值包括top（位于表格上面）、bottom（位于表格底部）、left（位于表格左侧，非标准）、right（位于表格右侧，非标准）。

如果要水平对齐标题文本，则可以使用text-align属性。对于左右两侧的标题，可以使用vertical-align属性进行垂直对齐，取值包括top、middle和bottom，其他取值无效，默认为top。

【示例】定义标题靠左显示，并设置标题垂直居中显示：

表格标题
北	西
东	南

2、设计表单样式

表单没有独立的CSS属性，适用CSS通用属性，如边框、背景、字体等样式。但是个别表单控件比较特殊，不易使用CSS定制，如下拉菜单、单选按钮、复选框和文件域。如果完全设计个性化样式，有时还需要JavaScript辅助实现。

2.1、定义文本框样式

使用CSS可以对文本框进行全面定制，如边框、背景、补白、大小、字体样式，以及CSS3圆角、阴影等。

【示例1】新建一个网页，在标签内使用

在标签内添加

金钥匙