一文深度实践HTML表格，运维开发必备技能.基础不牢，地动山摇.跟紧步伐，复习巩固前端基础.
导读：写在开篇表格是什么鬼？额。。。就是表格啊！就如你经常使用的wps那种表格。那在html中如何显示表格？废话不说，放弃前戏，直奔主题。HTML表格先来个没有边框的表格，代码如下：<!DOCTYPE html> <html l...
写在开篇
表格是什么鬼？额。。。就是表格啊！就如你经常使用的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 属性唯一地定义一个表每次亲自测试完，输出文章后，仿佛有一种“衣带渐宽终不悔”之感。认认真真的去做好一件事情，需要投入很多的时间和精力。但广大盆友们的关注，就是我们坚持的最大动力。好了！本文希望可以帮助到有需要的人，越是基础，越要打牢固。正所谓，基础不牢，地动山摇啊！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 一文深度实践HTML表格，运维开发必备技能.基础不牢，地动山摇.跟紧步伐，复习巩固前端基础.
本文地址： https://pptw.com/jishu/297175.html