• <cite id="ls72a"></cite>

  • <rp id="ls72a"><nav id="ls72a"></nav></rp>
    <b id="ls72a"></b>

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

    • 2019-10-25 10:59:44
    • 阅读次数:
    • 作者:盈岚科技小编
    • 来源:http://www.0737dz.com

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

    设置表格颜色

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

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

    <table width="300" border="1"> <tr>        

    <td>姓名</td>        

    <td>性别</td>        

    <td>地址</td>        

    <td>单位</td>        

    <td>邮编</td>    

    </tr>    

    <tr>        

    <td>&nbsp;</td>        

    <td>&nbsp;</td>        

    <td>&nbsp;</td>        

    <td>&nbsp;</td>        

    <td>&nbsp;</td>    

    </tr>    

    <tr>        

    <td>&nbsp;</td>        

    <td>&nbsp;</td>        

    <td>&nbsp;</td>        

    <td>&nbsp;</td>        

    <td>&nbsp;</td>    

    </tr> <tr>        

    <td>&nbsp;</td>        

    <td>&nbsp;</td>        

    <td>&nbsp;</td>        

    <td>&nbsp;</td>        

    <td>&nbsp;</td>    

    </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>        

    <th></th>        

    <th scope="col">2012</th>        

    <th scope="col">2013</th>        

    <th scope="col">2014</th>        

    <th scope="col">2015</th>    

    </tr>    

    <tr>        

    <th scope="row">招生总数</th>        

    <td>980</td>        

    <td>650</td>        

    <td>700</td>        

    <td>600</td>    </tr>    <tr>        

    <th scope="row">男生</th>  

    <td>480</td>        

    <td>300</td>        

    <td>400</td>        

    <td>290</td>    

    </tr>    

    <tr>        

    <th scope="row">女生</th>        

    <td>500</td>        

    <td>350</td>        

    <td>300</td>        

    <td>310</td>    

    </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;   /*单元格边框*/}

    读者会发现,如上所述设置完成后,单元格的边框之间会有空隙,这时需要设置CSS中整个表格的border-collapse属性,使得边框重合到一起,具体代码如下:

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

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

    border: #006666 solid 1px;   /*表格边框*/    

    border-collapse: collapse;   /*边框重叠*/}

    由于表格边框默认是立体效果,在浏览时会显得很粗,即使设置边框为1像素也是这样。利用HTML属性也可以设计细线表格,具体方法如下。

    【操作步骤】

    第1步,新建文档,保存为test1.html,复制test.html文档中的表格结构。设置表格【间距】为1,【边框】为0,同时设置表格的背景颜色。上面3个属性是关键点,其他属性可以任意设置。HTML标签设置属性如下:

    <table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#FF00FF">

    第2步,用鼠标拖选全部单元格,并在【属性】面板中设置背景色为白色。

    第3步,保存文档,并在浏览器中浏览。

    细线表格技巧原理就是利用表格背景颜色包含表格间距区域,并利用“遮罩”技法间接实现的一种效果。

    当前文章标题:在网页设计中定义表格样式

    当前URL:http://www.0737dz.com/news/wzzz/3116.html

    上一篇:艺术化处理图像

    下一篇:案例实战:美化表格

    网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)
    日本三级香港三级人妇99,亚洲欧美中文日韩综合图区,欧美黄网站色视频免费,哈啊往里噗嗤好深bl纯肉np 网站地图