align 的浏览器支持并不好，只有 top 和 bottom 属性值支持是统一的，left 和 right 在不同浏览器中的表现也不一样，所以这两个属性值当然不用，而 css 属性 caption-side 刚好就只有 top 和 bottom，故完全可以用 css 属性 caption-side 代替 align。至于要实现 left 和 right 的效果，给 caption 加 margin 属性或者 padding 属性或者用其他标签实现都不难 。
包裹 的写法比较规范。 说到列，要重新提一下前面的 table-layout 属性，下面举例子说明 col 对这个属性的影响。
--------------------------------------------------------------举个栗子--------------------------------------------------------------
HTML：
1 <table> 2 <colgroup> 3 <col class="odd"></col> 4 <col class="even"></col> 5 <col class="odd"></col> 6 </colgroup> 7 <thead> 8 <tr> 9 <th>title</th>10 <th>title</th>11 <th>title</th>12 </tr>13 </thead>14 <tbody>15 <tr>16 <td>the</td>17 <td>testinglongstring</td>18 <td>Row</td>19 </tr>20 <tr>21 <td>Second</td>22 <td>-</td>23 <td>Row</td>24 </tr>25 <tr>26 <td>the</td>27 <td>third</td>28 <td>Row</td>29 </tr>30 </tbody>31 </table>
로그인 후 복사
CSS：
1 table { 2 width: 300px; 3 border: 1px solid #000; 4 } 5 table td, 6 table th { 7 border: 1px solid #000; 8 } 9 .odd{10 width: 120px;11 }로그인 후 복사
设置 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：
1 <table> 2 <tr> 3 <td>Row</td> 4 <td>One</td> 5 </tr> 6 <tr> 7 <td>Row</td> 8 <td></td> 9 </tr>10 </table>
로그인 후 복사
CSS：
1 table {2 border-collapse: separate;3 border-spacing: 5px 20px;4 empty-cells: hide;5 border:1px solid #000;6 }7 td{8 border:1px solid #000;9 }로그인 후 복사
表现如下：
--------------------------------------------------------------吃完栗子--------------------------------------------------------------
三、表格 css 样式
（1）单线边框
HTML：
1 <table> 2 <tr> 3 <td>Row</td> 4 <td>One</td> 5 </tr> 6 <tr> 7 <td>Row</td> 8 <td>Two</td> 9 </tr>10 </table>
로그인 후 복사
（方法一） CSS：
1 table { 2 width: 200px; 3 border-left: 1px solid #000; 4 border-top: 1px solid #000; 5 border-collapse: collapse; 6 } 7 td { 8 border-right: 1px solid #000; 9 border-bottom: 1px solid #000;10 }로그인 후 복사
（方法二）CSS：
1 table {2 width: 200px;3 border-collapse: collapse;4 }5 td {6 border: 1px solid #000;7 }로그인 후 복사
效果如下：
（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：
1 //#table可以是table的id，也可以是tbody的id 2 var element = document.getElementById("table"); 3 var row_col = element.rows; 4 window.onload = function() { 5 for (var i = 0; i < row_col.length; i++) { 6 var cell_col = row_col[i].cells; 7 for (var j = 0; j < cell_col.length; j++) { 8 cell_col[j].addEventListener('mouseover', function() { 9 cellIndex(this, true);10 }, false);11 cell_col[j].addEventListener('mouseout', function() {12 cellIndex(this, false);13 }, false);14 }15 }16 }17 function cellIndex(element, bool) {18 for (var i = 0; i < row_col.length; i++) {19 var cell_col = row_col[i].cells;20 for (var j = 0; j < cell_col.length; j++) {21 if (element == cell_col[j]) {22 highLight(j, bool);23 }24 }25 }26 }27 function highLight(index, bool) {28 for (var i = 0; i < row_col.length; i++) {29 var cell_col = row_col[i].cells;30 if (bool) {31 //列高亮，#eee为高亮颜色32 cell_col[index].style.backgroundColor = "#eee";33 } else {34 //移除列高亮，#fff为原来颜色35 cell_col[index].style.backgroundColor = "#fff";36 }37 }38 }로그인 후 복사
<2>引用Jquery
使用 Jquery 框架实现方便很多，而且能够兼容 IE5.5+。好久没写 Jquery，选择器不是很熟，所以参考了一下 html5及css3对table表格高亮当前行列的多浏览器兼容写法 中的代码，其中 high_light css 类中定义高亮的颜色：
1 $(document).ready( 2 function() { 3 $('table td').hover( 4 function() { 5 //获取鼠标所在的 td 在所在行中的 index 6 var td_index = $(this).parent().children('td').index($(this)[0]); 7 $("table tr:not(:has(th))").each( 8 function(i){ 9 $(this).children("td").eq(td_index).addClass('high_light'); 10 } 11 ); 12 },13 function() {14 var td_index = $(this).parent().children('td').index($(this)[0]); 15 $("table tr:not(:has(th))").each( 16 function(i){17 $(this).children("td").eq(td_index).removeClass('high_light');18 } 19 ); 20 }21 );22 }23 );로그인 후 복사
四、清爽简约的表格
下面给出一些简约的实用的表格样式，留作备用。
（1）不带竖线的表格
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>First</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>
로그인 후 복사
CSS：
1 table { 2 width: 300px; 3 line-height: 2em; 4 font-family: Arial; 5 border-collapse: collapse; 6 } 7 thead tr { 8 color: #ae1212; 9 border-bottom: 2px solid #980000;10 }11 tbody tr {12 color: #bd3030;13 font-size: 0.8em;14 border-bottom: 1px solid #ffaeae;15 }16 th {17 font-weight: normal;18 text-align: left;19 }20 th,td {21 padding: 0 10px;22 }로그인 후 복사
效果如下：
（2）不带横线的表格
HTML：
< 沿用例 1）的 HTML >
CSS：
1 table { 2 width: 300px; 3 line-height: 2em; 4 font-family: Arial; 5 text-align: center; 6 border-collapse: collapse; 7 border-top: 2px solid #980000; 8 border-bottom: 2px solid #980000; 9 }10 thead tr {11 color: #ae1212;12 }13 tbody tr {14 color: #bd3030;15 font-size: 0.8em;16 }17 th {18 font-weight: normal;19 }20 th,td {21 border-left: 1px solid #ffaeae;22 border-right: 1px solid #ffaeae;23 }로그인 후 복사
效果如下：
（3）带背景表格
1、HTML：
< 沿用例 1）的 HTML >
CSS：
1 table { 2 width: 300px; 3 line-height: 2em; 4 font-family: Arial; 5 border-collapse: collapse; 6 } 7 thead tr { 8 color: #902d2d; 9 background-color: #e09999;10 border-bottom: 1px solid #fff;11 }12 tbody tr {13 color: #ac5959;14 font-size: 0.8em;15 border-bottom: 1px solid #fff;16 background-color: #ffe7e7;17 }18 tbody tr:hover {19 background-color: #ffd4d4;20 }21 th {22 font-weight: normal;23 text-align: left;24 }25 th,td {26 padding: 0 10px;27 }로그인 후 복사
效果如下：
2、HTML：
< 沿用例 1）的 HTML >
CSS：
1 table { 2 width: 300px; 3 line-height: 2em; 4 font-family: Arial; 5 border-collapse: collapse; 6 } 7 th,td { 8 padding: 0 10px; 9 }10 th {11 color: #a03f3f;12 font-weight: normal;13 text-align: left;14 background-color: #f2caca;15 border: 1px solid #fff;16 }17 td{18 color: #c48080;19 font-size: 0.8em;20 background-color: #fff3f3;21 border-top: 1px solid #ffdede;22 border-left: 1px solid #ffdede;23 }24 tbody tr:hover th{25 background-color: #ffdede;26 border-right:1px solid #ffdede;27 color:#9a4242;28 }29 tbody tr:hover td{30 background-color: #ffdede;31 border-left:1px solid #ffdede;32 border-top: 1px solid #ffdede;33 color:#9a4242;34 }로그인 후 복사
效果如下：
3、HTML：
1 <table> 2 <colgroup> 3 <col class="odd"></col> 4 <col class="even"></col> 5 <col class="odd"></col> 6 <col class="even"></col> 7 </colgroup> 8 <thead> 9 <tr>10 <th>title</th>11 <th class="even_th">title</th>12 <th>title</th>13 <th class="even_th">title</th>14 </tr>15 </thead>16 <tbody>17 <tr>18 <td>the</td>19 <td>the</td>20 <td>the</td>21 <td>the</td>22 </tr>23 <tr>24 <td>first</td>25 <td>-</td>26 <td>third</td>27 <td>fourth</td>28 </tr>29 <tr>30 <td>Row</td>31 <td>Row</td>32 <td>Row</td>33 <td>Row</td>34 </tr>35 </tbody>36 </table>
로그인 후 복사
CSS：
1 table { 2 width: 300px; 3 line-height: 2em; 4 font-family: Arial; 5 border-collapse: collapse; 6 text-align: center; 7 } 8 th,td { 9 padding: 0 10px;10 }11 th {12 color: #a03f3f;13 font-weight: normal;14 }15 td{16 color: #c48080;17 font-size: 0.8em;18 }19 thead th{20 background-color: #fbdcdc;21 }22 .odd{23 background-color: #fff3f3;24 }25 .even{26 border-left:1px solid #fff;27 border-right:1px solid #fff;28 background-color: #ffe9e9;29 }30 .even_th{31 background-color: #eec4c4; 32 }로그인 후 복사
效果如下：
4、适用于表现简单后台数据的表格
HTML：
1 <table> 2 <tr> 3 <td>the</td> 4 <td>the</td> 5 <td>the</td> 6 <td>the</td> 7 </tr> 8 <tr> 9 <td>first</td>10 <td>-</td>11 <td>third</td>12 <td>fourth</td>13 </tr>14 <tr>15 <td>Row</td>16 <td>Row</td>17 <td>Row</td>18 <td>Row</td>19 </tr>20 </table>
로그인 후 복사
CSS：
1 table { 2 width: 300px; 3 line-height: 2em; 4 font-family: Arial; 5 border-width: 1px; 6 border-style: solid; 7 border-color: #eec4c4 #eec4c4 #fff #fff; 8 text-shadow: 0 1px 0 #FFF; 9 border-collapse: separate;10 border-spacing: 0;11 background-color: #ffe9e9;12 }13 th {14 color: #a03f3f;15 font-weight: normal;16 text-align: left;17 }18 td {19 color: #c48080;20 font-size: 0.8em;21 }22 th,td {23 padding: 0 10px;24 border-width: 1px;25 border-style: solid;26 border-color: #fff #fff #eec4c4 #eec4c4;27 }로그인 후 복사
效果如下：
这里也只是列举比较基本的表格实例，加圆角、背景图等等在不同情况下可以获得更好的视觉效果，以后如果有看到更好的例子会继续补充。表格在现在的使用中已不像以前那么广了，基本只有在表现数据的时候才会用到，所以我并没有太深入地去了解表格的表现原理， 这里涉及 的知识都比较基础，而且只是冰山一角， 想要进一步了解的可以去看看 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的区别吗？
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
