<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-29 15:55:04
          • 阅读次数:
          • 作者:盈岚科技小编
          • 来源:http://www.1c4w.com

          网页设计时,当表格的行和列比较多时,表格如果采用相同的背景颜色,用户就会感到凌乱,那么可以设置隔行变色的效果,使奇数行和偶数行背景颜色不同,就能使表格看起来清晰而一目了然,从而达到高效浏览的目的。

          【操作步骤】第1步,新建文档,保存为index.html。构建网页结构,在<body>标签中输入以下内容:

          <table id="mytable" cellspacing="0" summary="财经2000级毕业生通讯录">    

          <caption>     财经2000级毕业生通讯录    </caption>    

          <tr>        

          <th scope="col" abbr="Configurations" >姓名</th>        

          <th scope="col" abbr="Dual 1.8">出生日期</th>        

          <th scope="col" abbr="Dual 2">电话</th>        

          <th scope="col" abbr="Dual 2.5">单位</th>    

          </tr>    

          <tr>        

          <th scope="row" abbr="Model" class="spec">王明</th><td>1978.1.4</td>        

          <td>137563443</td>        

          <td>中国铁道部</td>    

          </tr>    

          <tr>        

          <th scope="row" abbr="G5 Processor" class="specalt">李丽</th>        

          <td class="alt">1977.5.7</td>        

          <td class="alt">13893212</td>        

          <td class="alt">北京市朝阳区街道办事处</td>    

          </tr>    

          <tr>        

          <th scope="row" abbr="Frontside bus" class="spec">刘丽敏</th>        

          <td>1978.4.23</td>        

          <td>13345678</td>        

          <td>北京市11 中学</td>    

          </tr>    

          <tr>        

          <th scope="row" abbr="L2 Cache" class="specalt">李松</th>        

          <td class="alt">1977.11.31</td>        

          <td class="alt">139432567</td>        

          <td class="alt">北京东城区防汛办</td>    

          </tr>    

          <tr>        

          <th scope="row" abbr="Frontside bus" class="spec">赵艳</th>        

          <td>1978.7.3</td>        

          <td>1355613234</td>        

          <td>北京深华新股份有限公司</td>    

          </tr>    

          <tr>        

          <th scope="row" abbr="L2 Cache" class="specalt">杜征</th>        

          <td class="alt">1978.6.19</td>        

          <td class="alt">1368395322</td>        

          <td class="alt">酷6网</td>    

          </tr>    

          <tr>        

          <th scope="row" abbr="Frontside bus" class="spec">王朋</th>        

          <td>1978.9.22</td>        

          <td>13567890</td>        

          <td>adobe公司</td>    

          </tr>    

          <tr>        

          <th scope="row" abbr="L2 Cache" class="specalt">杨小东</th>        

          <td class="alt">1978.1.3</td>        

          <td class="alt">1354983611</td>        

          <td class="alt">朝阳区将台东路乐天玛特</td>    

          </tr>    

          <tr>        

          <th scope="row" abbr="Frontside bus" class="spec">杨秀燕</th>        

          <td>1977.12.3</td>        

          <td>1354353623</td>        

          <td>朝阳区教委</td>    

          </tr>    

          <tr>    

          <th scope="row" abbr="L2 Cache" class="specalt">张小光</th>        

          <td class="alt">1978.10.24</td>        

          <td class="alt">134567831</td>        

          <td class="alt">铁路第二中学</td>    

          </tr></table>

          以上代码中,将奇数行名称定义为spec类,偶数行名称定义为specalt类,并通过<td class="alt">定义了偶数行中的单元格,此时的显示效果可以看到,表格的基本结构已经搭建好了,但是由于在网页设计时没有进行CSS样式设置,界面中只把数据罗列起来,没有任何修饰。

          第2步,定义网页基本属性、表格#mytable样式以及表格标题样式。在<head>标签内添加<styletype="text/css">标签,定义一个内部样式表,然后输入下面样式:

          body { background: #E6EAE9; } /*网页基本样式*/#mytable { /*表格样式*/    

          width: 700px;                  /*表格宽度*/    

          padding: 0;    

          margin: 0;    

          border: 1px solid #C1DAD7;     /*表格边框*/}caption {/*设置表格标题*/    

          padding: 0 0 5px 0;    

          text-align: center;            /*水平居中*/    

          font-size: 30px;               /*字体大小*/    

          font-weight: bold;             /*字体加粗*/}

          在以上代码中,通过首先定义了页面的背景颜色,在#mytable中设置了表格的宽度为700px,并为其添加了表格边框。

          第3步,定义单元格的共有属性。

          th {/*表格名称样式*/color: #4f6b72;                 /*表格名称的字体颜色*/    

          letter-spacing: 2px;            /*字间距*/    

          text-align: center;             /*水平居中*/    

          padding: 6px 6px 6px 12px;      /*名称单元格的内边距*/    

          background: #CAE8EA;            /*名称单元格的背景颜色*/    

          border: 1px solid #C1DAD7;      /*名称单元格的边框*/}td { /*表格单元格样式*/    

          background: #fff;               /*单元格背景色*/    

          padding: 6px 6px 6px 12px;    

          color: #4f6b72;    

          text-align: center;    

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

          在以上代码中,定义了表格中所有单元格的共有样式。

          第4步,实现网页设计中表格的隔行变色。

          .spec { /*奇数行名称样式*/    background: #fff;            /*背景颜色*/ }

          .specalt {                       /*偶数行名称样式*/    

          background: #f5fafa;    

          color: #797268;              /*字体颜色*/}

          .alt {/*偶数行单元格样式*/    

          background: #F5FAFA;    color: #797268;}

          以上代码中,首先通过spec设置了奇数行中<th>标签的样式,通过specalt设置了偶数行中<th>标签的样式,最后在alt中设置了偶数单元格,也就是<td>标签的样式。

          提示:在CSS中,设置隔行变色十分简单,主要在于给奇数行和偶数行设置不同的背景颜色,为奇数行和偶数行的<th>标签添加相应的类以及为单元格<td>标签添加相应的类,代码如下:<th scope="row" class="spec">th scope="row" class="specalt"><td class="alt">然后在CSS样式表中对奇数行和偶数行进行单独的样式设置,主要是在网站建设时配合整体设计协调的基础上,改变背景颜色、字体颜色等。

          当前文章标题:如何在网页设计中设计清晰、醒目的表格

          当前URL:http://www.1c4w.com/news/wzzz/3118.html

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

          下一篇:在网页设计中设计动态效果的表格

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