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

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

查看全文

相关阅读:
HttpClient调用RestFul接口（post和get方式）
mysql权限异常
 javascript:用法
 Java哈希值HashCode理解
 Java的CountDownLatch和CyclicBarrier的理解和区别
 Java并发编程与技术内幕:ThreadGroup线程组应用
 面试官: 谈谈什么是守护线程以及作用 ?
java 成员变量静态成员变量方法静态方法初始化顺序
 【java并发核心一】Semaphore 的使用思路
 threadlocal原理及常用应用场景

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

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

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