HTML入門二之表格

表格
  • 一般我們都是用 DIV + CSS 布局 因?yàn)閠able布局有很多弊端 比如榮譽(yù)代碼過多 難維護(hù) 不靈活
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>表格</title>
</head>
<body>
    <!-- 一般我們都是用 DIV + CSS 布局 因?yàn)閠able布局有很多弊端 比如榮譽(yù)代碼過多 難維護(hù) 不靈活 -->
    <table>
        <!-- tr 表示行 第一行 -->
        <tr>
            <!-- td 行里面的第一個(gè)單元格 往下依次遞增 -->
            <td>單元格1</td>
            <td>單元格2</td>
        </tr>
        <!-- tr 表示行 第二行 -->
        <tr>
            <td>單元格3</td>
            <td>單元格4</td>
        </tr>
    </table>
    <!-- 1. 表格基本標(biāo)簽table tr td -->
    <!-- 2. 默認(rèn)沒有邊框 -->

    <!-- 添加表格標(biāo)題 表頭 -->
    <table>
        <!-- caption 表格標(biāo)題 默認(rèn)占一行 居中 -->
        <caption>成績表</caption>
        <tr>
            <!-- th 表頭 默認(rèn)居中 字體加粗 -->
            <th>姓名</th>
            <th>數(shù)學(xué)</th>
            <th>語文</th>
        </tr>
        <tr>
            <td>小黃</td>
            <td>88</td>
            <td>97</td>
        </tr>
        <tr>
            <td>林兒</td>
            <td>99</td>
            <td>100</td>
        </tr>
    </table>

    <!-- 為了進(jìn)一步對(duì)表格進(jìn)行語義化 HTML引入三個(gè)標(biāo)簽 thead tbody tfoot 分別代表 表頭 表身 表腳 -->
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>數(shù)學(xué)</th>
                <th>語文</th>
                <th>英語</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>熳熳</td>
                <td>88</td>
                <td>78</td>
                <td>98</td>
            </tr>
            <tr>
                <td>小花</td>
                <td>76</td>
                <td>88</td>
                <td>89</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>平均</td>
                <td>82</td>
                <td>83</td>
                <td>93.5</td>
            </tr>
        </tfoot>
    </table>
    <!-- HTML 語義結(jié)構(gòu)很重精要 特別是針對(duì)搜索引擎 不要感覺標(biāo)簽寫不寫都能達(dá)到效果 寫了更具有邏輯性 -->

    <!-- 合并行 rowspan 合并列 colspan -->
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>數(shù)學(xué)</th>
                <th>語文</th>
                <th>英語</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>熳熳</td>
                <!-- 合并行 rowspan 是指往下合并兩行 也就是說熳熳和小花的數(shù)學(xué)成績一樣 -->
                <td rowspan="2">88</td>
                <td>78</td>
                <td>98</td>
            </tr>
            <tr>
                <td>小花</td>
                <td>88</td>
                <td>89</td>
            </tr>
            <tr>
                <td>小李</td>
                <td>76</td>
                <!-- 合并列 colspan 是指往右合并兩行 也就是說語文和英語成績相同  -->
                <td colspan="2">88</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>平均</td>
                <td>82</td>
                <td>83</td>
                <td>93.5</td>
            </tr>
        </tfoot>
    </table>

</body>
</html>
  1. 表格基本標(biāo)簽table tr td
  2. 默認(rèn)沒有邊框
  3. caption 表格標(biāo)題 默認(rèn)占一行 居中
  4. th 表頭 默認(rèn)居中 字體加粗
  5. 為了進(jìn)一步對(duì)表格進(jìn)行語義化 HTML引入三個(gè)標(biāo)簽 thead tbody tfoot 分別代表 表頭 表身 表腳
  6. HTML 語義結(jié)構(gòu)很重精要 特別是針對(duì)搜索引擎 不要感覺標(biāo)簽寫不寫都能達(dá)到效果 寫了更具有邏輯性
  7. 合并行 rowspan 合并列 colspan
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容