HTML--Boby部分之表格

随笔记录方便自己和同路人查阅。

#------------------------------------------------我是可耻的分割线-------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table>
        <tr>
            <td>第一行，第1列</td>
            <td>第一行，第2列</td>
            <td>第一行，第3列</td>
        </tr>
        <tr>
            <td>第二行，第1列</td>
            <td>第二行，第2列</td>
            <td>第二行，第3列</td>
        </tr>
    </table>
</body>
</html>

结果展示：

这样就是一个表格了，当然样式不太好看，我们给他加上边框border

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>第一行，第1列</td>
            <td>第一行，第2列</td>
            <td>第一行，第3列</td>
        </tr>
        <tr>
            <td>第二行，第1列</td>
            <td>第二行，第2列</td>
            <td>第二行，第3列</td>
        </tr>
    </table>
</body>
</html>

结果展示：

是不是好一点了，但是上面代码不太规范，需要优化一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>主机名</th>
                <th>端口</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1.1.1.1</td>
                <td>80</td>
                <td>删除</td>
            </tr>
            <tr>
                <td>1.1.1.2</td>
                <td>80</td>
                <td>
                    <a href="s13.html">查看详情</a>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

效果和上面一样

合并单元格：colspan属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <th>主机名</th>
        <th>端口</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1.1.1.1</td>
        <td colspan="2">80</td>
        <td>删除</td>
    </tr>
    <tr>
        <td>1.1.1.2</td>
        <td>80</td>
        <td>
            <a href="s13.html">查看详情</a>
        </td>
    </tr>
    </tbody>
</table>
</body>
</html>

结果展示：

这样看单元格是合并了，但是有一个问题，多出了一列

我们需要手动删除一列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <th>主机名</th>
        <th>端口</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1.1.1.1</td>
        <td colspan="2">80</td>
    </tr>
    <tr>
        <td>1.1.1.2</td>
        <td>80</td>
        <td>
            <a href="s13.html">查看详情</a>
        </td>
    </tr>
    </tbody>
</table>
</body>
</html>

结果展示：

rowspan="2"是上下合并

相关阅读:
关于项目架构设计的一些规范
 Repository 返回 IQueryable？还是 IEnumerable？
EntityFramework DbContext 线程安全
 ASP.NET 页面禁止被 iframe 框架引用
 2015－写给明年现在的自己
 RESTful API URI 设计: 查询（Query）和标识（Identify）
深入探讨：标签（Tag）的各种设计方案
 RESTful API URI 设计: 判断资源是否存在？
iPhone 6/plus iOS Safari fieldset border 边框消失
 追根溯源：EntityFramework 实体的状态变化
原文地址：https://www.cnblogs.com/lirongyang/p/11250774.html