zoukankan html css js c++ java

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;
}

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

查看全文

相关阅读:
第十章系统级I/O
第九章虚拟内存
 第六章存储器层次结构
 第八章异常控制流（下）
第八章异常控制流（上）
第三章机器的程序级表示（下）
第三章机器的程序级表示（中）
第三章机器的程序级表示（上）
python学习之列表的定义以及增删改查
 Python学习之字符串中的下标和切片以及逆序

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

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

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