在网页设计中定义表格样式-盈岚科技

在网页设计中定义表格样式

2019-10-25 10:59:44
阅读次数：次
作者：盈岚科技小编
来源：http://www.lyjtt.cn

在网页设计中使用CSS可以实现对表格的样式控制，其中表格样式包括边框宽度、边框颜色、边框样式以及表格背景等效果，以及如何在网页设计时使用CSS控制表格特性等。

设置表格颜色

CSS使用color属性设置表格中文字的颜色，通过background-color属性来设置表格的背景颜色。

【示例】启动Dreamweaver，新建一个网页，保存为test.html，在<body>标签内输入如下代码：

</tr>

<tr>

</tr>

<tr>

</tr> <tr>

</tr></table>

在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式，用来定义网页字体的类型。

table{ /*设置表格的CSS样式*/

background-color:#00CCFF; /*表格的背景颜色*/

color:#FF0000; /*表格的字体颜色*/}

上面代码中，用<table>标签创建了一个表格，设置表格的宽度为300，表格的边框宽度为1，这里没有给出单位，默认为px。使用<tr>和<td>标签创建了4行5列的表格。可以看到，表格的背景颜色和字体颜色通过CSS进行了设置。

设置表格边框

在网站建设中，设置表格边框同样是通过border属性，设置方法与设置图片边框完全一样，只不过要特别注意单元格边框的设置。

【示例】启动Dreamweaver，新建一个网页，保存为test.html，在<body>标签内输入如下内容：

<table>

<caption> 2012-2015年招生情况 </caption>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr></table>

在以上代码中，用<caption>标签定义了表格的标题，该标签可以出现在<table>与</table>之间的任意位置，不过通常习惯放在表格的第1行，紧接着<table>标签。<th>标签在表格中主要用于定义行或列的名称，在本例中，行的名称为“2012”“2013”等，列的名称为“招生总数”“男生”“女生”，在<th>标签中的scope属性就是用来区分行名称和列名称的，分别设置scope的值为row或col，分别代表行名称或列名称。

在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式：

body { /*网页基本样式*/

margin: 0px;

padding: 4px;}table {

color: #0046a6; /*表格文字颜色*/

font-family: Arial; /*表格字体*/

border: #006666 solid 1px; /*表格边框*/}table caption {

font-size: 18px; /*标题文字大小*/

font-weight: bold; /*标题文字粗体*/}

在以上代码中，设置了表格边框，显示效果如图6.48所示。从图6.48中可以看到，虽给表格设置了边框，但是单元格并没有任何边线，所以，在设置表格边框时，还要注意给单元格也单独地设置相应的边框，在以上CSS样式表中，添加下列样式代码：

table th, table td { color: #003e7e; /*行、列名称颜色*/

border: #006666 solid 1px; /*单元格边框*/}