一篇深入浅出的文章，介绍运行和维护开发的必备技能--HTML 表单。基础不牢，地动山摇。跟上节奏，复习巩固前端基础。

最编程 2024-04-06 18:35:00

...

写在开篇

表格是什么鬼？额。。。就是表格啊！就如你经常使用的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;

						
							上一篇：							
								springboot 文件下载 解决中文文件名故障问题							
						
						
							下一篇：							
								独家专访阿里巴巴高级研究员吴捷生：我经历过的三个重大决策