x(39)0909第五天__ 表格 table

表格

表示一种格式化的数据，如课程表，银行对账单... ...

在网页中，使用 table 创建一个表格。

html代码：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>表格</title>
        
        <link rel="stylesheet" type="text/css" href="css/table.css" />
    </head>

    <body>
        Hello Web!`    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        可以发现：
            table 是<b>块元素</b>，独占一行。
        <table id="tb_one">
            <tr>
                <td>第1行，第1格</td>
                <td>第1行，第2格</td>
                <td>第1行，第3格</td>
            </tr>
            
            <tr>
                <td>第2行，第1格</td>
                <td>第2行，第2格</td>
                <td>第2行，第3格</td>
            </tr>
            
            <tr>
                <td>第3行，第1格</td>
                <td>第3行，第2格</td>
                <td>第3行，第3格</td>
            </tr>
        </table>
        
        <hr />
        就算某个格子是空的，也不会被已有格子占据。
        <table id="tb_two">
            <tr>
                <td>第1行，第1格</td>
                <td>第1行，第2格</td>
                <td>第1行，第3格</td>
            </tr>
            
            <tr>
                <td>第2行，第1格</td>
                <td>第2行，第2格</td>
            </tr>
            
            <tr>
                <td>第3行，第1格</td>
                <td>第3行，第2格</td>
            </tr>
        </table>
        
        <hr />
        需要告诉浏览器，    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        colspan是<b>横向合并单元格</b>    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        rowspan是<b>纵向合并单元格</b>    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        且是<b>往右边</b>，<b>往下边</b>的单元格合并。
        <table id="tb_three">
            <tr>
                <td>第1行，第1格</td>
                <td>第1行，第2格</td>
                <td rowspan="2">第1行，第3格</td>
            </tr>
            
            <tr>
                <td>第2行，第1格</td>
                <td>第2行，第2格</td>
            </tr>
            
            <tr>
                <td>第3行，第1格</td>
                <td colspan="2">第3行，第2格</td>
            </tr>
        </table>
    </body>
</html>

css代码：

@charset "utf-8";

*{
    margin: 0px;
    padding: 0px;
}

body{
    background-color: #3e4e54;
}

table{
    margin: 0px auto;
    width: 40%;
    border: 1px red solid;
}

#tb_one td{
    
}

#tb_two td{
    border: 1px black solid;
}

#tb_three td{
    border: 1px black solid;
}

--------小尾巴 ________一个人欣赏-最后一朵颜色的消逝-忠诚于我的是·一颗叫做野的心.决不受人奴役.怒火中生的那一刻·终将结束...

相关阅读:
微信小程序选择图片并上传到服务器
微信小程序 setData
python--字典排序
python--csv文件读写
机器学习实战笔记--AdaBoost（实例代码）
机器学习实战笔记--朴素贝叶斯（实例代码）
python继承 super()
机器学习实战笔记—决策树（代码讲解）
java的基本认识
Delphi制作DLL

原文地址：https://www.cnblogs.com/tianxiaxuange/p/9614968.html

__x__(39)0909第五天__ 表格 table

x(39)0909第五天__ 表格 table