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>