写在开篇
表格是什么鬼？额。。。就是表格啊！就如你经常使用的wps那种表格。那在html中如何显示表格？废话不说，放弃前戏，直奔主题。
HTML表格
先来个没有边框的表格，代码如下：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你复习巩固，攻破前端技能</title> </head> <body> <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2> <table> <tr> <th>HostName</th> <th>IP</th> </tr> <tr> <td>web01</td> <td>192.168.11.80</td> </tr> <tr> <td>web02</td> <td>192.168.11.67</td> </tr> </table> </body> </html>
效果如下图：
上面的小栗子中，有两列字段，且有两行记录。奇怪！咋没边框？
继续小栗子，我们加个边框试试，看下面代码
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你复习巩固，攻破前端技能</title> <style> table,th,td { border: 1px solid black; } </style> </head> <body> <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2> <table> <tr> <th>HostName</th> <th>IP</th> </tr> <tr> <td>web01</td> <td>192.168.11.80</td> </tr> <tr> <td>web02</td> <td>192.168.11.67</td> </tr> </table> </body> </html>
效果如下图：
完美，这会有边框了，注意到在head中的style标签里的CSS属性了嘛？就是border: 1px solid black;，它控制了table,th,td的边框，就是这里起着作用呢！当然还有很多的表格边框样式，请自行到W3C查找即可哈。
笔者尝试改变下边框的样式，换个风格，看下面代码：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你复习巩固，攻破前端技能</title> <style> table,th,td { border: 1px solid black; border-collapse: collapse; } </style> </head> <body> <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2> <table> <tr> <th>HostName</th> <th>IP</th> </tr> <tr> <td>web01</td> <td>192.168.11.80</td> </tr> <tr> <td>web02</td> <td>192.168.11.67</td> </tr> </table> </body> </html>
效果如下图：
发现增加了border-collapse: collapse; 表格的样式还真变了呢
下面再看个小栗子，调整一下内容与其边框之间的间距，看下面代码：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你复习巩固，攻破前端技能</title> <style> table,th,td { border: 1px solid black; border-collapse: collapse; padding: 15px; } </style> </head> <body> <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2> <table> <tr> <th>HostName</th> <th>IP</th> </tr> <tr> <td>web01</td> <td>192.168.11.80</td> </tr> <tr> <td>web02</td> <td>192.168.11.67</td> </tr> </table> </body> </html>
效果如下图：
注意到padding: 15px; 属性了嘛？没错了，就是用来控制间距，如果不指定间距，就是使用默认的间距了。
哎哟不错！接下来继续看个小栗子，这次的需求是要将表格撑满整个页面，看下面代码：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你复习巩固，攻破前端技能</title> <style> table,th,td { border: 1px solid black; border-collapse: collapse; padding: 10px; } </style> </head> <body> <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2> <table style="width:100%"> <tr> <th>HostName</th> <th>IP</th> </tr> <tr> <td>web01</td> <td>192.168.11.80</td> </tr> <tr> <td>web02</td> <td>192.168.11.67</td> </tr> </table> </body> </html>
注意到table标签里的style的属性了嘛？就是这里起作用了
效果如下图：
下面再继续小栗子，表头的内容默认是加粗和居中，那如果想让它左对齐？怎么破？看下面代码：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你复习巩固，攻破前端技能</title> <style> table,th,td { border: 1px solid black; border-collapse: collapse; padding: 10px; text-align: left; } </style> </head> <body> <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2> <table style="width:100%"> <tr> <th>HostName</th> <th>IP</th> </tr> <tr> <td>web01</td> <td>192.168.11.80</td> </tr> <tr> <td>web02</td> <td>192.168.11.67</td> </tr> </table> </body> </html>
注意到了text-align: left; 属性了嘛？就是它起作用了
效果如下图：
OK!我们继续下一个小栗子，如果想要调整表格边框的间距怎么搞呢？看下面代码：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你复习巩固，攻破前端技能</title> <style> table,th,td { border: 1px solid black; padding: 5px; border-spacing: 2px; } </style> </head> <body> <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2> <table style="width:100%"> <tr> <th>HostName</th> <th>IP</th> </tr> <tr> <td>web01</td> <td>192.168.11.80</td> </tr> <tr> <td>web02</td> <td>192.168.11.67</td> </tr> </table> </body> </html>
效果如下图：
注意到上面的 border-spacing 属性了嘛？就是它起作用了呢！
接下来，再来一个需求，这个需求涉及到跨多列的单元格，先看看代码和效果，就一目了然了
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你复习巩固，攻破前端技能</title> <style> table, th, td { border: 1px solid black; border-collapse: collapse; padding: 5px; } </style> </head> <body> <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2> <table style="width:100%"> <tr> <th>HostName</th> <th>IP</th> <th colspan="2">机房位置</th> </tr> <tr> <td>web01</td> <td>192.168.11.80</td> <td>广州</td> <td>天河</td> </tr> </table> </body> </html>
效果如下图：
注意到最后一个表头里的th标签里的colspan属性了嘛？就是它起着作用呢。
OK，我们继续下一个小栗子，那么如果要跨多行的单元格又该怎么玩呢？看下面代码
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你复习巩固，攻破前端技能</title> <style> table, th, td { border: 1px solid black; border-collapse: collapse; padding: 5px; } </style> </head> <body> <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2> <table style="width:100%"> <tr> <th>主机名</th> <td>gz-b1-web001</td> </tr> <tr> <th rowspan="2">IP信息</th> <td>业务IP：10.136.56.23</td> </tr> <tr> <td>管理IP：172.16.89.90</td> </tr> </table> </body> </html>
注意到第二行里的th标签里的rowspan属性了嘛？就是它起着作用呢。
效果如下图：
继续我们的小栗子，如果要向表中添加标题，可以使用caption标签，代码如下：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你复习巩固，攻破前端技能</title> <style> table, th, td { border: 1px solid black; border-collapse: collapse; padding: 5px; } </style> </head> <body> <h2>彩虹运维技术栈社区</h2> <p>公众号ID：TtrOpsStack</p> <table style="width:100%"> <caption>设备信息列表</caption> <tr> <th>主机名</th> <td>gz-b1-web001</td> </tr> <tr> <th rowspan="2">IP信息</th> <td>业务IP：10.136.56.23</td> </tr> <tr> <td>管理IP：172.16.89.90</td> </tr> </table> </body> </html>
注意到上面caption标签了嘛？
效果如下图:
继续最后一个小栗子，为表定义特殊的样式，代码如下
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>陪你复习巩固，攻破前端技能</title> <style> table, th, td { border: 1px solid black; border-collapse: collapse; padding: 5px; } #b1 { width: 100%; background-color: #f1f1c1; } #b1 tr:nth-child(even) { background-color: #eee; } </style> </head> <body> <h2>彩虹运维技术栈社区</h2> <p>公众号ID：TtrOpsStack</p> <table id="b1" style="width:100%"> <caption>设备信息列表</caption> <tr> <th>主机名</th> <td>gz-b1-web001</td> </tr> <tr> <th rowspan="2">IP信息</th> <td>业务IP：10.136.56.23</td> </tr> <tr> <td>管理IP：172.16.89.90</td> </tr> </table> </body> </html>
table标签中定义了id “b1”，在style中，通过CSS控制了表格的样式
效果图下图：
写在最后
好了，本篇文章中的所有小栗子就告一段落了，下面对其做个小总结：
<table> 元素定义表 <tr> 元素定义表行 <td> 元素定义表数据 <th> 元素定义表格标题 <caption> 元素定义表格标题 CSS border 属性定义边框 CSS border-collapse 属性折叠单元格边框 CSS padding 属性向单元格添加填充 CSS text-align 属性对齐单元格文本 CSS border-spacing 属性设置单元格之间的间距 colspan 属性使单元格跨多个列 rowspan 属性使单元格跨多行 id 属性唯一地定义一个表
每次亲自测试完，输出文章后，仿佛有一种“衣带渐宽终不悔”之感。认认真真的去做好一件事情，需要投入很多的时间和精力。但广大盆友们的关注，就是我们坚持的最大动力。好了！本文希望可以帮助到有需要的人，越是基础，越要打牢固。正所谓，基础不牢，地动山摇啊！
