在现在 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; 故默认添加后是双边bordercellpadding：规定单元边沿与其内容之间的空白，其实是设置表哥内部 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：
1 <table> 2 <thead> 3 <tr> 4 <th>title</th> 5 <th>title</th> 6 <th>title</th> 7 </tr> 8 </thead> 9 <tbody>10 <tr>11 <td>the</td>12 <td>testinglongstring</td>13 <td>Row</td>14 </tr>15 <tr>16 <td>Second</td>17 <td>-</td>18 <td>Row</td>19 </tr>20 <tr>21 <td>the</td>22 <td>third</td>23 <td>Row</td>24 </tr>25 </tbody>26 </table>View Code
CSS：
1 table{2 width: 300px;3 border:1px solid #000;4 }5 table td,table th{6 border:1px solid #000;7 }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： 1 table { 2 width: 300px; 3 border: 1px solid #000; 4 table-layout: fixed; 5 word-wrap:break-word; 6 } 7 table td, 8 table th { 9 border: 1px solid #000;10 }11 .odd{12 width: 120px;13 }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）tralign，valign：同（2）（4）td，thabbr：规定单元格中内容的缩写版本。不会在普通的 web 浏览器中造成任何视觉效果方面的变化。屏幕阅读器可以利用该属性。headers：规定表头与单元格相关联。不会在普通浏览器中产生任何视觉变化。屏幕阅读器可以利用该属性。scope：定义将表头单元与数据单元相关联的方法。不会在普通浏览器中产生任何视觉变化。屏幕阅读器可以利用该属性。align，valign：同（2）。需要留意的是 th 默认是居中属性的，而且 th 内的字体是加粗的。nowrap：规定表格单元格中的内容不换行。用 white-space: nowrap 代替colspan：规定单元格可横跨的列数。比较常用，相当于 word 中的合并横向的单元格。rowspan：规定单元格可横跨的行数。比较常用，相当于 word 中的合并垂直方向的单元格。（5）captionalign：（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：
新闻热点
疑难解答
