HTMLテーブルの概念、文法、オペレーション、ケース

2行3列のテーブルを作成します

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタ文字コード= "UTF-8" > 
    < タイトル>ドキュメント</ タイトル> 
</ ヘッド> 
< 身体> 

    < テーブルのボーダー= "1" > 
        < TR > 
            < TD > 2018年</ TD > 
            < TD > 2019年</ TD >
            2020年</ TD > 
        </ TR > 
        < TR > 
            < TD > 8000 </ TD > 
            < TD > 10000 </ TD > 
            < TD > 120000 </ TD > 
        </ TR > 
    </ テーブル> 
</ ボディ> 
< / HTML >

テーブル
ヘッダ番目、コンテンツが中心、太字
<キャプション> </キャプション>テーブルヘッダ、中心

テーブルが全体として解析され、表示された完全に解析される
テーブルは、表示タグ構造、ローディングの表示部の一部を最適化することができる
ヘッド（ヘッダ）THEADテーブル
本体TBODYテーブル（データ）
TFOOTテーブルフィート（脚注）

表のプロパティ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <table border="1" width="500px" bgcolor="#f2f2f2" cellspacing="0" cellpadding="5px" align="center" frame="box" rules="rows">
        <caption>前端工程师平均工资</caption>
        <thead>
            <tr>
                <th>城市</th>
                <th>2018年</th>
                <th>2018年</th>
                <th>2019年</th>
                <th>2020年</th>
            </tr>
            <tr>
                <th>城市</th>
                <th>上半年</th>
                <th>下半年</th>
                <th>2019年</th>
                <th>2020年</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>北京</td>
                <td>8000</td>
                <td>9000</td>
                <td>10000</td>
                <td>120000</td>
            </tr>
            <tr>
                <td>上海</td>
                <td>6000</td>
                <td>7000</td>
                <td>8000</td>
                <td>100000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>合计</td>
                <td>7000</td>
                <td>8000</td>
                <td>9000</td>
                <td>110000</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

tr标签属性

td和th标签属性

thead / tbody / tfoot 标签属性

跨列属性 colspan
跨行属性 rowspan

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <table border="1" width="500px" bgcolor="#f2f2f2" cellspacing="0" cellpadding="5px" align="center" frame="box" rules="all">
        <caption>前端工程师平均工资</caption>
        <thead>
            <tr bgcolor="#d8e4bc">
                <th rowspan="2">城市</th>
                <th colspan="2">2018年</th>

                <th rowspan="2">2019年</th>
                <th rowspan="2">2020年</th>
            </tr>
            <tr bgcolor="#d8e4bc">
                
                <th>上半年</th>
                <th>下半年</th>

            </tr>
        </thead>
        <tbody align="center" valign="middle">
            <tr>
                <td bgcolor="#b8cce4">北京</td>
                <td>8000</td>
                <td>9000</td>
                <td>10000</td>
                <td>12000</td>
            </tr>
            <tr>
                <td bgcolor="#b8cce4">上海</td>
                <td>6000</td>
                <td>7000</td>
                <td>8000</td>
                <td>10000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr align="center">
                <td bgcolor="#b8cce4">合计</td>
                <td>7000</td>
                <td>8000</td>
                <td>9000</td>
                <td>11000</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

表格嵌套：
嵌入的必须是完整的表格结构
放到td标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <table border="1" width="500px" bgcolor="#f2f2f2" cellspacing="0" cellpadding="5px" align="center" frame="box" rules="all">
        <caption>前端工程师平均工资</caption>
        <thead>
            <tr bgcolor="#d8e4bc">
                <th>城市</th>
                <th>2018年</th>
                <th>2019年</th>
                <th>2020年</th>
            </tr>
        </thead>
        <tbody align="center" valign="middle">
            <tr>
                <td bgcolor="#b8cce4">北京</td>
                <td>
                    <table border="1" cellspacing="0" frame="void">
                        <tr>
                            <td>上半年</td>
                            <td>下半年</td>
                        </tr>
                        <tr>
                            <td>8000</td>
                            <td>9000</td>
                        </tr>
                    </table>
                </td>
                <td>10000</td>
                <td>12000</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

HTMLテーブルの概念、文法、オペレーション、ケース

おすすめ