• <var id="zvtmq"></var>
      <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

      <font id="zvtmq"></font>

      <tt id="zvtmq"></tt>

        <var id="zvtmq"></var>
        <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

        1. 
          

          <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

            <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
            <strike id="zvtmq"><output id="zvtmq"></output></strike>

          1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

          2. <small id="zvtmq"></small>

            <code id="zvtmq"><rt id="zvtmq"></rt></code>
          3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                  文章?#24049;?

                  CSS 设置table表格样式

                  2018-10-8 14:09| 作者: admin| 查看: 3432| 评论: 0|来自: 蚂蚁部落

                  随着时间的前进,人可能会意识到自己在何种位置上更加恰当。

                  技术上也是如此,最初,table用来进行页面布局,并且应用十分普遍。

                  但是用table布局的劣势很大,灵活度很差,不容易改版等。

                  现在table已经从“神坛?#20445;?#36880;渐做一些平凡且自己擅长的事情。

                  那就是绘制表格,真正做到名副其实,下面介绍一下利用CSS设置table表格的样式。

                  一.设置table表格的边框:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!doctype html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style type="text/css"> 
                  table{ 
                    border:1px solid #ccc; 
                  } 
                  </style> 
                  </head> 
                  <body> 
                  <table> 
                    <tr> 
                      <td>蚂蚁部落一</td> 
                      <td>蚂蚁部落一</td>
                    </tr>
                    <tr> 
                      <td>蚂蚁部落二</td> 
                      <td>蚂蚁部落二</td>
                    </tr>  
                  </table> 
                  </body> 
                  </html>


                  代码运行效果截图如下:

                  a:3:{s:3:\"pic\";s:43:\"portal/201810/08/141018niiw19i81i9w7717.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

                  如果没有给table元素内部设置border属性值,那么表格默认无边框。

                  给整个表格外围添加一个边框,使用CSS的border属性。

                  二.设置td单元格边框:

                  前面代码仅设置table边框,感觉还是赤裸裸,结构不够明晰。

                  所以还需要给td单元格设置边框。

                  代码实例如下:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!doctype html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style type="text/css"> 
                  table, td{ 
                    border:1px solid #ccc; 
                  } 
                  </style> 
                  </head> 
                  <body> 
                  <table> 
                    <tr> 
                      <td>蚂蚁部落一</td> 
                      <td>蚂蚁部落一</td>
                    </tr>
                    <tr> 
                      <td>蚂蚁部落二</td> 
                      <td>蚂蚁部落二</td>
                    </tr>  
                  </table> 
                  </body> 
                  </html>

                  代码运行效果截图如下:

                  a:3:{s:3:\"pic\";s:43:\"portal/201810/08/141048pljtuqwq89mkqnsz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

                  上面代码给table和td都设置了边框。

                  但是在视觉上感觉很奇怪,边框貌似重复了,下面介绍如何解决此问题。

                  三.边框合并:

                  上面代码设置了table和td的边框,但是并不美观。

                  因为相邻的边框有一种重复的感觉,其实只需要一条即可,那么我们可以将相邻的边框合并。

                  代码实例如下:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!doctype html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style type="text/css"> 
                  table, td{ 
                    border:1px solid #ccc; 
                    border-collapse:collapse; 
                  } 
                  </style> 
                  </head> 
                  <body> 
                  <table> 
                    <tr> 
                      <td>蚂蚁部落一</td> 
                      <td>蚂蚁部落一</td>
                    </tr>
                    <tr> 
                      <td>蚂蚁部落二</td> 
                      <td>蚂蚁部落二</td>
                    </tr>  
                  </table> 
                  </body> 
                  </html>

                  代码运行效果截图如下:

                  a:3:{s:3:\"pic\";s:43:\"portal/201810/08/141117vfepifer3ea93vk3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

                  可以看到相邻的边框已经被合并,是不是更加美观清晰了一点。

                  设置border-collapse属性值为collapse即可实现边框合并。

                  四.表格的宽度?#36879;?#24230;:

                  这是最为简单的操作,使用width和height属性即可。

                  代码实例如下:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!doctype html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style type="text/css"> 
                  table, td{ 
                    border:1px solid #ccc; 
                    border-collapse:collapse; 
                  } 
                  td{
                    width:80px;
                    height:30px;
                  }
                  </style> 
                  </head> 
                  <body> 
                  <table> 
                    <tr> 
                      <td>蚂蚁部落一</td> 
                      <td>蚂蚁部落一</td>
                    </tr>
                    <tr> 
                      <td>蚂蚁部落二</td> 
                      <td>蚂蚁部落二</td>
                    </tr>  
                  </table> 
                  </body> 
                  </html>

                  代码运行效果截图如下:

                  a:3:{s:3:\"pic\";s:43:\"portal/201810/08/141147ubk16q6b8bqstml6.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}


                  鲜花

                  握手

                  雷人

                  路过

                  鸡蛋

                  最新评论

                  返回顶部
                1. <var id="zvtmq"></var>
                    <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                    <font id="zvtmq"></font>

                    <tt id="zvtmq"></tt>

                      <var id="zvtmq"></var>
                      <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                      1. 
                        

                        <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                          <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                          <strike id="zvtmq"><output id="zvtmq"></output></strike>

                        1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                        2. <small id="zvtmq"></small>

                          <code id="zvtmq"><rt id="zvtmq"></rt></code>
                        3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                快乐10分破解如何计算
                              1. <var id="zvtmq"></var>
                                  <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                  <font id="zvtmq"></font>

                                  <tt id="zvtmq"></tt>

                                    <var id="zvtmq"></var>
                                    <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                    1. 
                                      

                                      <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                        <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                        <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                      1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                      2. <small id="zvtmq"></small>

                                        <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                      3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                            1. <var id="zvtmq"></var>
                                                <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                                <font id="zvtmq"></font>

                                                <tt id="zvtmq"></tt>

                                                  <var id="zvtmq"></var>
                                                  <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                                  1. 
                                                    

                                                    <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                                      <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                                      <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                                    1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                                    2. <small id="zvtmq"></small>

                                                      <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                                    3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                                            海南飞鱼彩票app 山东时时彩导航 新加坡快乐8 福建十一选五走势图表 牛牛热线视频免费视频 河北快3预测和值技术 北单在哪里能买 河北20选5河北排列7 扑克牌占卜测未来 体彩20选5怎样算中奖 红球出球顺序图 天津快乐十分规则 快乐十分任五复式 广东体彩七星彩走势图 青海十一选五预测号码