HTML表格概念、語法、操做、案例

時間 2020-02-01

標籤 html 表格概念語法案例欄目 HTML 简体版

原文原文鏈接

建立兩行三列表格html

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

    <table border="1">
        <tr>
            <td>2018年</td>
            <td>2019年</td>
            <td>2020年</td>
        </tr>
        <tr>
            <td>8000</td>
            <td>10000</td>
            <td>120000</td>
        </tr>
    </table>
</body>
</html>

表格
th 表頭，內容居中，加粗顯示
<caption></caption> 表格標題，居中顯示前端

表格做爲總體被解析，徹底解析完纔會被顯示出來
表格結構標籤能夠優化顯示，加載一部分顯示一部分
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標籤屬性spa

td和th標籤屬性code

thead / tbody / tfoot 標籤屬性htm

跨列屬性 colspan
跨行屬性 rowspanblog

<!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標籤中ci

<!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>

相關標籤/搜索

每日一句

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