您所在的位置:小祥子 » 编程 » CSS » 正文

HTML表格基础详解

时间:2015-06-24 编辑:JuFoFu 来源:本站整理

       在现在 div 大行其道的时代,table 这个标签似乎很少被人提及,到处都是 div+CSS 布局的书以及博客文章,但其实 table 以及连带的其他表格标签依然在的网页排版中占很重要的地位,特别是后台展示数据的时候表格运用是否熟练就显得很重要,一个清爽简约的表格布局能够把繁杂的数据表现得很有条理,虽然 div 布局也可以做到,但是总没有表格来得方便。平时也经常接触到表格,现在总结一下表格的一些属性和样式,以及学习构思一些表格的样式,以便以后不时之需。

一、标签

<table> 定义 HTML 表格 <thead> 标签定义表格的表头 <tbody> 标签表格主体(正文) <tfoot> 标签定义表格的页脚(脚注或表注) <tr> 元素定义表格行 <th> 元素定义表头 <td> 元素定义表格单元 <caption> 元素定义表格标题,必须紧随 table 标签之后。只能对每个表格定义一个标题,默认居中与表格之上 <col> 标签为表格中一个或多个列定义属性值。 <colgroup> 标签用于对表格中的列进行组合,以便对其进行格式化。   二、表格标签及标签属性 (1)<table> <table>    标签属性说实话个人觉得挺好用的,比如 align,width等,但是本着表现层与结构层的分离,现在w3c上已经不赞成使用了。 align:相当于浮动,用 css 的 float 代替 bgcolor:用 css 的background-color 代替 border:table 的 border 属性是继承到内部的 td 标签的,相当于同时对 (selector):table 和 (selector) table td 设置 css 的 border 属性,但是当你设置大于1的 border 数值时,又只有 table 的 border 宽度会改变。默认的浏览器属性包括:border-collapse: separate;border-spacing: 2px; 故默认添加后是双边border cellpadding:规定单元边沿与其内容之间的空白,其实是设置表哥内部 td 标签的 padding 属性,用 (selector) table td 设置 css 的 padding 属性代替。 cellspacing:规定单元格之间的空间,用 (selector):table 设置 css 的 padding 属性代替。 frame:规定外侧边框的哪个部分是可见的,即设置表格 border,基本不会用这个属性。 rules:规定内侧边框的哪个部分是可见的,同 frame,几乎不会用到。 summary:规定表格内容的摘要,屏幕阅读器可以利用该属性,不会有其他视觉效果。 width:用 css 的 width 代替。 css 属性 table-layout:automatic(default) | fixed | inherit(列宽度由单元格内容设定 | 列宽由表格宽度和列宽度设定 | 继承父属性) 需要注意的是,表格以及列设置的 width 属性在 table-layout 为 automatic 时都是表现为 min-width,当 table-layout 的值为 fixed 时则表现为固定的 width 值。 当需要表格内容的宽度在控制范围内,不会超出自己设置的范围,则可以用 fixed 属性值来设置这个属性,下面举个例子。   --------------------------------------------------------------举个栗子-------------------------------------------------------------- HTML:
 <table>
     <thead>
         <tr>
             <th>title</th>
             <th>title</th>
             <th>title</th>
         </tr>
     </thead>
     <tbody>
         <tr>
             <td>the</td>
             <td>testinglongstring</td>
             <td>Row</td>
         </tr>
         <tr>
             <td>Second</td>
             <td>-</td>
             <td>Row</td>
         </tr>
         <tr>
             <td>the</td>
             <td>third</td>
             <td>Row</td>
         </tr>
     </tbody>
 </table>
View Code

CSS:

 table{
     width: 300px;
     border:1px solid #000;
 }
 table td,table th{
     border:1px solid #000;
 }
View Code 没有显式加 table-layout 这个属性时是默认为 automatic 值,此时由于 testinglongstring 内容比较长,表格自动调整列的宽度,效果如下: table 标签加了 table-layout:fixed 属性后,浏览器直接渲染表结构(相当于显示没有内容的表),太长的内容会覆盖到其他表格,效果如下: --------------------------------------------------------------吃完栗子--------------------------------------------------------------   而往往我们希望既保持我们要的列宽度,同时确保内容不会这样覆盖到其他表格单元单元(针对英文)。这里就要涉及到另外两个 css 属性了: 1、word-wrap:normal(default)| break-word(只在允许的断字点换行 | 在长单词或 URL 地址内部进行换行) 这里主要用到 break-word 属性值。 2、work-break:normal(defaut)| break-all | keep-all(默认的换行规则 | 允许在单词内换行 | 只能在半角空格或连字符处换行) 这里主要用到 break-all 属性值。 用到的两个 css 属性的属性值作用类似,但有些区别,break-word 只有在单个单词都超过外围宽度的时候才会断单词;break-all 则是把每个行填满,然后行尾不管是单词还是空格都断为下一行,个人优选 word-wrap 属性,可以减少断单词的几率,毕竟不得已才断单词,断了后会影响单词内容表达。具体辨析可以看 《你真的了解word-wrap和word-break的区别吗?》讲得比较详细。   --------------------------------------------------------------举个栗子-------------------------------------------------------------- 沿用上例的 HTML 结构,举 word-wrap 属性的例子: CSS:
 table {
     width: 300px;
     border: 1px solid #000;
     table-layout: fixed;
     word-wrap:break-word;
 }
 table td,
 table th {
     border: 1px solid #000;
 }
 .odd{
     width: 120px;
 }
View Code 表现如下: --------------------------------------------------------------吃完栗子--------------------------------------------------------------   (2)<thead>、<tbody>、<tfoot> align:属性规定内容的水平对齐方式,用 css 属性 text-align 代替。 valign:( top|middle|bottom|baseline ),规定 tbody 元素中内容的垂直对齐方式,默认是 middle。相当于 css 的 vertical-align 属性,这里 bottom 和 baseline 在 w3shcool 上还有一些辨析,不过只是对于不同字号的英文内容来说有点用处。 还有 char,charoff 属性几乎是用不到的,所以不列举了。 注意 1、<thead>、<tfoot> 标签内部必须拥有 <tr> 标签; 2、<thead> 标签不管放在 <table> 内的哪个位置,都会被定位到表格的头部,同理 <tfoot> 会被定位到底部。另外,和我们的常识不同,<tfoot> 标签是要放在 <tbody> 标签之前的,结合官方文档和我自己的理解,主要是因为 <thead> 和 <tfoot> 内的内容一般比较重要,这样能保证在表现具有大量行内容的表格时能够提前渲染 <tfoot>,让用户先看到。 3、<thead>、<tbody>、<tfoot> 的结束标签为了精简,均可以省略。 4、设置 <thead> 和 <tfoot> 的一个好处是,当打印很长的需要分页的表格时,每一页上都会有 <thead>、<tfoot> 的内容。   (3)tr align,valign:同(2)   (4)td,th abbr:规定单元格中内容的缩写版本。不会在普通的 web 浏览器中造成任何视觉效果方面的变化。屏幕阅读器可以利用该属性。 headers:规定表头与单元格相关联。不会在普通浏览器中产生任何视觉变化。屏幕阅读器可以利用该属性。 scope:定义将表头单元与数据单元相关联的方法。不会在普通浏览器中产生任何视觉变化。屏幕阅读器可以利用该属性。 align,valign:同(2)。需要留意的是 th 默认是居中属性的,而且 th 内的字体是加粗的。 nowrap:规定表格单元格中的内容不换行。用 white-space: nowrap 代替 colspan:规定单元格可横跨的列数。比较常用,相当于 word 中的合并横向的单元格。 rowspan:规定单元格可横跨的行数。比较常用,相当于 word 中的合并垂直方向的单元格。   (5)caption align:(top | bottom | left | right ),规定 caption 元素的对齐方式,默认居中。 align 的浏览器支持并不好,只有 top 和 bottom 属性值支持是统一的,left 和 right 在不同浏览器中的表现也不一样,所以这两个属性值当然不用,而 css 属性 caption-side 刚好就只有 top 和 bottom,故完全可以用 css 属性 caption-side 代替 align。至于要实现 left 和 right 的效果,给 caption 加 margin 属性或者 padding 属性或者用其他标签实现都不难 。 css 属性  caption-side:top | bottom | inherit(表格标题定位在表格之上 | 表格标题定位在表格之下 | 继承父属性)   (6)col,colgroup <colgroup> 标签中的一些属性在一些浏览器中的支持并不好,只有在一些老的浏览器中(IE7-等)才能表现那些属性,具体原因可以点此参考。 能够用的属性主要是以下三个: span:规定列组应该横跨的列数。默认一列,即对表格的一列设置样式。 width:col 元素的宽度。 background:设置背景色,要通过 css 样式来设置。 <col> 标签需要包裹在 <colgroup> 内,就算没有写一般浏览器也会自动帮你加上。属性和 <colgroup> 类似,增加了可以设置 css 的 border 属性。个人认为不在 <colgroup> 标签上设置属性,而是用 <colgroup> 包裹 <col> 的写法比较规范。 说到列,要重新提一下前面的 table-layout 属性,下面举例子说明 col 对这个属性的影响。   --------------------------------------------------------------举个栗子-------------------------------------------------------------- HTML:
 <table>
     <colgroup>
         <col class="odd"></col>
         <col class="even"></col>
         <col class="odd"></col>
     </colgroup>
     <thead>
         <tr>
             <th>title</th>
             <th>title</th>
             <th>title</th>
         </tr>
     </thead>
     <tbody>
         <tr>
             <td>the</td>
             <td>testinglongstring</td>
             <td>Row</td>
         </tr>
         <tr>
             <td>Second</td>
             <td>-</td>
             <td>Row</td>
         </tr>
         <tr>
             <td>the</td>
             <td>third</td>
             <td>Row</td>
         </tr>
     </tbody>
 </table>
View Code CSS:
 table {
     width: 300px;
     border: 1px solid #000;
 }
 table td,
 table th {
     border: 1px solid #000;
 }
 .odd{
     width: 120px;
 }
View Code 设置 120px 的列宽度后,中间列(.even)的宽度不够,但是浏览器会帮你计算并为中间内容空出足够宽度: 设置了 table-layout 属性的 fixed 值后就完全按照自己的意思来渲染了: --------------------------------------------------------------吃完栗子--------------------------------------------------------------   (7)border-collapse | border-spacing | empty-cells 这几个 css 属性,基本只会用在表格上。 border-collapse:separate(defaul)| collapse | inherit (边框会被分开 | 边框会合并为一个单一的边框 | 继承父属性) border-spacing:length length(定义一个 length 参数,那么定义的是水平和垂直间距。定义两个 length 参数,那么第一个设置水平间距,而第二个设置垂直间距) empty-cells:show(defaul)| hide | inherit (在空单元格周围绘制边框 | 不绘制 | 继承父属性) 注意: border-spacing 和 empty-cells 属性只有在 border-collapse 为 separate 是才有效的。   --------------------------------------------------------------举个栗子-------------------------------------------------------------- HTML:
 <table>
     <tr>
         <td>Row</td>
         <td>One</td>
     </tr>
     <tr>
         <td>Row</td>
         <td></td>
     </tr>
 </table>
View Code CSS:
 table {
     border-collapse: separate;
     border-spacing: 5px 20px;
     empty-cells: hide;
     border:1px solid #000;
 }
 td{
     border:1px solid #000;
 }
View Code 表现如下: --------------------------------------------------------------吃完栗子--------------------------------------------------------------   三、表格 css 样式 (1)单线边框 HTML:
 <table>
     <tr>
         <td>Row</td>
         <td>One</td>
     </tr>
     <tr>
         <td>Row</td>
         <td>Two</td>
     </tr>
 </table>
View Code (方法一) CSS:
 table {
     width: 200px;
     border-left: 1px solid #000;
     border-top: 1px solid #000;
     border-collapse: collapse;
 }
 td {
     border-right: 1px solid #000;
     border-bottom: 1px solid #000;
 }
View Code (方法二)CSS:
 table {
     width: 200px;
     border-collapse: collapse;
 }
 td {
     border: 1px solid #000;
 }
View Code 效果如下:   (2)列和行的高亮 在复杂的多行多列的表格中,鼠标停留的行或列高亮能够带来更优的体验,下面讲讲这方面的应用。 1、行的高亮 行的高亮实现比较简单,可以使用 css 的 :hover 伪类实现,即 tr:hover 即可实现,后面的表格例子会出现。 2、列的高亮 列的高亮用 css 似乎没有什么实现的方法,故还是用 JavaScript 实现。 <1>原生 JavaScript 原生 JavaScript 实现比较麻烦, A Complete Guide to the Table Element 文章介绍了一种原生 JS 代码的写法。不过代码的兼容性不是很好,IE10 以下的版本就无法支持了(替换 addClass() 和 removeClass() 方法后在 IE9 下也可以用)。下面是我自己写的原生 JavaScript 实现方法,不过也只能支持 IE9+,IE8 及以下的 IE 浏览器要加兼容性代码: JavaScript:
 //#table可以是table的id,也可以是tbody的id
 var element = document.getElementById("table");
 var row_col = element.rows;
 window.onload = function() {
     for (var i = 0; i < row_col.length; i++) {
         var cell_col = row_col[i].cells;
         for (var j = 0; j < cell_col.length; j++) {
             cell_col[j].addEventListener('mouseover', function() {
                 cellIndex(this, true);
             }, false);
             cell_col[j].addEventListener('mouseout', function() {
                 cellIndex(this, false);
             }, false);
         }
     }
 }
 function cellIndex(element, bool) {
     for (var i = 0; i < row_col.length; i++) {
         var cell_col = row_col[i].cells;
         for (var j = 0; j < cell_col.length; j++) {
             if (element == cell_col[j]) {
                 highLight(j, bool);
             }
         }
     }
 }
 function highLight(index, bool) {
     for (var i = 0; i < row_col.length; i++) {
         var cell_col = row_col[i].cells;
         if (bool) {
             //列高亮,#eee为高亮颜色
             cell_col[index].style.backgroundColor = "#eee";
         } else {
             //移除列高亮,#fff为原来颜色
             cell_col[index].style.backgroundColor = "#fff";
         }
     }
 }
View Code <2>引用Jquery 使用 Jquery 框架实现方便很多,而且能够兼容 IE5.5+。好久没写 Jquery,选择器不是很熟,所以参考了一下 html5及css3对table表格高亮当前行列的多浏览器兼容写法 中的代码,其中 high_light css 类中定义高亮的颜色:
 $(document).ready(
     function() {
         $('table td').hover(
             function() {
                 //获取鼠标所在的 td 在所在行中的 index 
                 var td_index = $(this).parent().children('td').index($(this)[0]);
                 $("table tr:not(:has(th))").each( 
                     function(i){ 
                         $(this).children("td").eq(td_index).addClass('high_light'); 
                     } 
                 ); 
             },
             function() {
                 var td_index = $(this).parent().children('td').index($(this)[0]); 
                 $("table tr:not(:has(th))").each( 
                     function(i){
                         $(this).children("td").eq(td_index).removeClass('high_light');
                     } 
                 ); 
             }
         );
     }
 );
View Code   四、清爽简约的表格 下面给出一些简约的实用的表格样式,留作备用。   (1)不带竖线的表格 HTML:
 <table>
     <thead>
         <tr>
             <th>title</th>
             <th>title</th>
             <th>title</th>
         </tr>
     </thead>
     <tbody>
         <tr>
             <td>the</td>
             <td>First</td>
             <td>Row</td>
         </tr>
         <tr>
             <td>Second</td>
             <td>-</td>
             <td>Row</td>
         </tr>
         <tr>
             <td>the</td>
             <td>third</td>
             <td>Row</td>
         </tr>
     </tbody>
 </table>
View Code CSS:
 table {
     width: 300px;
     line-height: 2em;
     font-family: Arial;
     border-collapse: collapse;
 }
 thead tr {
     color: #ae1212;
     border-bottom: 2px solid #980000;
 }
 tbody tr {
     color: #bd3030;
     font-size: 0.8em;
     border-bottom: 1px solid #ffaeae;
 }
 th {
     font-weight: normal;
     text-align: left;
 }
 th,td {
     padding: 0 10px;
 }
View Code 效果如下:     (2)不带横线的表格  HTML: < 沿用例 1)的 HTML > CSS:
 table {
     width: 300px;
     line-height: 2em;
     font-family: Arial;
     text-align: center;
     border-collapse: collapse;
     border-top: 2px solid #980000;
     border-bottom: 2px solid #980000;
 }
 thead tr {
     color: #ae1212;
 }
 tbody tr {
     color: #bd3030;
     font-size: 0.8em;
 }
 th {
     font-weight: normal;
 }
 th,td {
     border-left: 1px solid #ffaeae;
     border-right: 1px solid #ffaeae;
 }
View Code 效果如下:   (3)带背景表格 1、HTML: < 沿用例 1)的 HTML > CSS:
 table {
     width: 300px;
     line-height: 2em;
     font-family: Arial;
     border-collapse: collapse;
 }
 thead tr {
     color: #902d2d;
     background-color: #e09999;
     border-bottom: 1px solid #fff;
 }
 tbody tr {
     color: #ac5959;
     font-size: 0.8em;
     border-bottom: 1px solid #fff;
     background-color: #ffe7e7;
 }
 tbody tr:hover {
     background-color: #ffd4d4;
 }
 th {
     font-weight: normal;
     text-align: left;
 }
 th,td {
     padding: 0 10px;
 }
View Code 效果如下:   2、HTML: < 沿用例 1)的 HTML > CSS:
 table {
     width: 300px;
     line-height: 2em;
     font-family: Arial;
     border-collapse: collapse;
 }
 th,td {
     padding: 0 10px;
 }
 th {
     color: #a03f3f;
     font-weight: normal;
     text-align: left;
     background-color: #f2caca;
     border: 1px solid #fff;
 }
 td{
     color: #c48080;
     font-size: 0.8em;
     background-color: #fff3f3;
     border-top: 1px solid #ffdede;
     border-left: 1px solid #ffdede;
 }
 tbody tr:hover th{
     background-color: #ffdede;
     border-right:1px solid #ffdede;
     color:#9a4242;
 }
 tbody tr:hover td{
     background-color: #ffdede;
     border-left:1px solid #ffdede;
     border-top: 1px solid #ffdede;
     color:#9a4242;
 }
View Code 效果如下:     3、HTML:
 <table>
     <colgroup>
         <col class="odd"></col>
         <col class="even"></col>
         <col class="odd"></col>
         <col class="even"></col>
     </colgroup>
     <thead>
         <tr>
             <th>title</th>
             <th class="even_th">title</th>
             <th>title</th>
             <th class="even_th">title</th>
         </tr>
     </thead>
     <tbody>
         <tr>
             <td>the</td>
             <td>the</td>
             <td>the</td>
             <td>the</td>
         </tr>
         <tr>
             <td>first</td>
             <td>-</td>
             <td>third</td>
             <td>fourth</td>
         </tr>
         <tr>
             <td>Row</td>
             <td>Row</td>
             <td>Row</td>
             <td>Row</td>
         </tr>
     </tbody>
 </table>
View Code CSS:
 table {
     width: 300px;
     line-height: 2em;
     font-family: Arial;
     border-collapse: collapse;
     text-align: center;
 }
 th,td {
     padding: 0 10px;
 }
 th {
     color: #a03f3f;
     font-weight: normal;
 }
 td{
     color: #c48080;
     font-size: 0.8em;
 }
 thead th{
     background-color: #fbdcdc;
 }
 .odd{
     background-color: #fff3f3;
 }
 .even{
     border-left:1px solid #fff;
     border-right:1px solid #fff;
     background-color: #ffe9e9;
 }
 .even_th{
     background-color: #eec4c4; 
 }
View Code 效果如下:   4、适用于表现简单后台数据的表格 HTML:
 <table>
     <tr>
         <td>the</td>
         <td>the</td>
         <td>the</td>
         <td>the</td>
     </tr>
     <tr>
         <td>first</td>
         <td>-</td>
         <td>third</td>
         <td>fourth</td>
     </tr>
     <tr>
         <td>Row</td>
         <td>Row</td>
         <td>Row</td>
         <td>Row</td>
     </tr>
 </table>
View Code CSS:
 table {
     width: 300px;
     line-height: 2em;
     font-family: Arial;
     border-width: 1px;
     border-style: solid;
     border-color: #eec4c4 #eec4c4 #fff #fff;
     text-shadow: 0 1px 0 #FFF;
     border-collapse: separate;
     border-spacing: 0;
     background-color: #ffe9e9;
 }
 th {
     color: #a03f3f;
     font-weight: normal;
     text-align: left;
 }
 td {
     color: #c48080;
     font-size: 0.8em;
 }
 th,td {
     padding: 0 10px;
     border-width: 1px;
     border-style: solid;
     border-color: #fff #fff #eec4c4 #eec4c4;
 }
View Code 效果如下:   这里也只是列举比较基本的表格实例,加圆角、背景图等等在不同情况下可以获得更好的视觉效果,以后如果有看到更好的例子会继续补充。表格在现在的使用中已不像以前那么广了,基本只有在表现数据的时候才会用到,所以我并没有太深入地去了解表格的表现原理,这里涉及的知识都比较基础,而且只是冰山一角,想要进一步了解的可以去看看 HTML 4.01 和 CSS 2.01关于 table 的文档(文末有附链接)。写这篇博文的时候也发现了其他一些有趣的关于表格的应用与拓展,比如响应式的表格、表格搜索、表格排序等等,再加进来博文就太长了(为自己太懒找个借口......),等有空的时候再来了解总结一下吧。         水平有限,错误欢迎指正。原创博文,转载请注明出处。   参考文档: HTML4.01 . http://www.w3.org/TR/html401/struct/tables.html CSS2.1 .  Tables   参考文章: R. Christie . Top 10 CSS Table Designs W3Cfuns . 参透Html表格 Chris Coyier . A Complete Guide to the Table Element(译文:白牙 . 表格元素的完全指南) 漫游 . html5及css3对table表格高亮当前行列的多浏览器兼容写法 无双 . 你真的了解word-wrap和word-break的区别吗?                  
关键词:HTML 表格