<tt id="kjox3"><noscript id="kjox3"><samp id="kjox3"></samp></noscript></tt><tt id="kjox3"><li id="kjox3"><var id="kjox3"></var></li></tt><cite id="kjox3"><noscript id="kjox3"><delect id="kjox3"></delect></noscript></cite>

<source id="kjox3"><menuitem id="kjox3"></menuitem></source>

  • <rt id="kjox3"></rt>
      <rp id="kjox3"></rp>

    1. <cite id="kjox3"></cite>
        <tt id="kjox3"><form id="kjox3"><delect id="kjox3"></delect></form></tt><rp id="kjox3"><meter id="kjox3"><button id="kjox3"></button></meter></rp>

      1. <tt id="kjox3"></tt>

        <rt id="kjox3"><meter id="kjox3"></meter></rt>
      2. <b id="kjox3"><form id="kjox3"><label id="kjox3"></label></form></b>

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

          • 2019-10-25 10:59:44
          • 阅读次数:
          • 作者:盈岚科技小编
          • 来源:http://www.1c4w.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.1c4w.com/news/wzzz/3116.html

          上一篇:艺术化处理图像

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

          网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)
          鸭子tv国产在线永久播放,天天夜日日日日碰日日摸日日澡,日本特黄特黄刺激大片,老熟妇乱子伦456在线观看 网站地图