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

時間 2019-11-08

標籤第五表格 table 简体版

原文原文鏈接

表格css

表示一種格式化的數據，如課程表，銀行對帳單... ...html

在網頁中，使用 table 建立一個表格。瀏覽器

html代碼：spa

<!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代碼：3d

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

1. __x__(40)0909第五天__表格 table 的 css 樣式美化
2. __x__(41)0909第五天__長表格
3. html table 表格
4. html表格（table）
5. Flutter Table 表格
6. table表格
7. 0005 表格table
8. 【CSS表格table】
9. Bootstrap table表格
10. MySQL 第五天
更多相關文章...
• jQuery Mobile 表格 - jQuery Mobile 教程
• Markdown 表格 - Markdown 教程
• Git五分鐘教程
• RxJava操作符（五）Error Handling

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

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

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