zoukankan html css js c++ java

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"是上下合并

查看全文

相关阅读:
Leetcode 18. 4Sum
Leetcode 15. 3Sum
Leetcode 16. 3Sum Closest
String类型的理解
 求字符串中某个字符出现的次数
 用StringBuilder来实现经典的反转问题
 String/StringBuilder 类用对象数组实现登录注册功能
 String/StringBuilder 类统计字符串中字符出现的次数
 String/StringBuilder 类判断QQ号码
 C++ 面向对象： I/O对象的应用

原文地址：https://www.cnblogs.com/lirongyang/p/11250774.html