CSS控制表格的方法

现在的网页都是DIV+CSS来布局的，table布局时代早已经结束了，那table还能干什么呢？当然是现实数据了，这才是他的本事！

表格框架要和CSS分离，还table纯结构，需要琢磨一下，下面是一个细边框的表格示例：

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>CSS控制表格的方法</title>
  6 <style type="text/css" media="screen">
  7 <!-- /* PR-CSS */
  8 table.line-table {  9     border-collapse: collapse; /* 关键属性：合并表格内外边框(其实表格边框有2px，外面1px，里面还有1px哦) */
 10     border: solid #00F; /* 设置表格边框属性；样式(solid=实线)、颜色(#999=灰) */
 11     border-width: 1px 0 0 1px; /* 设置边框状粗细：上 右 下 左 = 对应：1px 0 0 1px */
 12 }
 13 table.line-table caption { 14     font-size: 14px;
 15     font-weight: bolder;
 16 }
 17 table.line-table th, table.line-table td { 18     border: solid #F00;
 19     border-width: 0 1px 1px 0;/*巧妙之处*/
 20     padding: 2px 8px;
 21 }
 22 table.line-table tfoot td { 23     text-align: center;
 24 }
 25 -->
 26 </style>
 27 </head>
 28
 29 <body>
 30 <table class="line-table">
 31     <caption>
 32     表格头
 33     </caption>
 34     <thead>
 35         <tr>
 36             <th>名称</th>
 37             <th>网址</th>
 38             <th>时间</th>
 39         </tr>
 40     </thead>
 41     <tfoot>
 42         <tr>
 43             <td colspan="3">下一页</td>
 44         </tr>
 45     </tfoot>
 46     <tbody>
 47         <tr>
 48             <th>百度</th>
 49             <td>http://www.baidu.com</td>
 50             <td>2007.01.11</td>
 51         </tr>
 52         <tr>
 53             <th>百度</th>
 54             <td>http://www.baidu.com</td>
 55             <td>2007.01.11</td>
 56         </tr>
 57         <tr>
 58             <th>百度</th>
 59             <td>http://www.baidu.com</td>
 60             <td>2007.01.11</td>
 61         </tr>
 62     </tbody>
 63 </table>
 64 <!--无样式表格-->
 65 <table>
 66     <caption>
 67     表格头
 68     </caption>
 69     <thead>
 70         <tr>
 71             <th>名称</th>
 72             <th>网址</th>
 73             <th>时间</th>
 74         </tr>
 75     </thead>
 76     <tfoot>
 77         <tr>
 78             <td colspan="3">下一页</td>
 79         </tr>
 80     </tfoot>
 81     <tbody>
 82         <tr>
 83             <th>百度</th>
 84             <td>http://www.baidu.com</td>
 85             <td>2007.01.11</td>
 86         </tr>
 87         <tr>
 88             <th>百度</th>
 89             <td>http://www.baidu.com</td>
 90             <td>2007.01.11</td>
 91         </tr>
 92         <tr>
 93             <th>百度</th>
 94             <td>http://www.baidu.com</td>
 95             <td>2007.01.11</td>
 96         </tr>
 97     </tbody>
 98 </table>
 99 </body>
100 </html>

转载于:https://www.cnblogs.com/wanghaibin/articles/2515923.html

CSS控制表格的方法相关推荐

html表格与CSS控制表格样式
表格是HTML网页中的重要标签,利用表格可以对网页进行排版,使网页信息有条理地显示出来. 这就是一个表格 ,清清楚楚的列出了英雄们的排名. 思维导图 <table>标签用<tabl ...
CSS控制表格——制作日历
表格是网页上最常见的元素,除了用它来显示数据,还常被用来排版.这一次我们就来学习如何用CSS控制表格.一.表格中的标记表格(<table>标记)在最初HTML设计时,仅仅是用来存放各种数据 ...
html中隔行的代码,js+css 控制表格隔行变色与单行高亮的代码
代码片段: 1,css代码复制代码代码示例: table {border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px; ...
HTML如何改变表格浮动位置,css控制表格样式 css布局浮动及定位
一.制作一张商品信息表,内容自定,要求用到行与列的合并实例 html> 饮料商品信息表 table caption { font-family:"宋体"; font-siz ...
CSS控制表格tr之间的边距
tr之间距离可以通过设置 tr 的外边距(margin)来实现,但是注意必须先把tr的显示属性设置为块体(block)元素: tr{display:block;margin:2px 0; } 创建HT ...
用CSS控制表格的框格线
在postContent类里的<table>将自动实现. .postContent{border-collapse:collapse;border:none;} .postContent ...
html表格怎么取消自动换行,css怎么控制表格不要自动换行？
很多时候,我们在项目开发中会出现,单元格内容由于太多导致的换行问题,让表格显得非常的丑陋.下面我们就来看一下css控制表格不自动换行的方法. 我们可以通过为表格添加white-space:nowrap ...
css table表格相关设置和属性
css table表格相关设置和属性文章目录 css table表格相关设置和属性前言一.表格结构二.使用行内样式控制表格样式 1.属性 2.使用css控制表格的样式前言记录表格的结构,属 ...
美丽的表格样式(使用CSS样式表控制表格样式)
按照WEB2.0风格,设计了几个表格样式,希望大家喜欢. WEB2.0提倡使用div开布局,但不是要全然放弃使用表格,表格在数据展现方面还是不错的选择. 如今使用介绍使用CSS样式表来控制.美化表格的 ...

CSS控制表格的方法

CSS控制表格的方法相关推荐

最新文章

热门文章