HTMLテーブルタグと属性

テーブルのタイトルと頭で表：

<表> 
    <キャプション> </キャプション> <！ -中心テーブルヘッダ、 - > 
    <TR> 
        <TH> </ TH> <！ -テーブルヘッダ、コンテンツは太字、中心- > 
     </ TR> 
     <TR> 
         <TD> </ TD> 
     </ TR> 
</テーブル>

構造を持つ表：

彼らはすべての負荷表示を終了するまで表示を最適化するために、ラベルテーブル構造、表示部への負荷の一部は、待つことはありません

ヘッダ、件名、脚注：フォームは、3つの部分に分割されています

　　THEAD：表頭（表ヘッダを置きます）

　　TBODY：テーブル本体（吐出データ本体）

　　TFOOT：テーブルの脚（表の脚注を置きます）

　　<THEAD> <TBODY> <TFOOT>タグテーブルのレイアウトが、テーブル構造の分割に影響を与えないであろう

<表>タグの属性：

<TR>タグの属性：

<TD>と<目>タグの属性：

<THEAD> <TBODY> <TFOOT>タグの属性：

クロス上場不動産COLSPAN：

銀行間属性ROWSPAN：

完全な例：

　　 <テーブル境界= "2"幅= "500pxなど" CELLSPACING = "0" CELLPADDING = "5pxの"> 
        <キャプション>前端工程师平均工资</キャプション> 
        <THEAD> 
            <TR BGCOLOR = "＃1 d8bce4"> 
                <TH ROWSPAN = "2">城市</番目> 
                <TH COLSPAN = "2"> 2014年</番目> 
                <TH ROWSPAN = "2"> 2015年</番目> 
                <TH ROWSPAN = "2"> 2016年</番目> 
            </ TR> 
            <TR BGCOLOR = "＃1 d8bce4"> 
                <TH>上半年</番目> 
                <TH>下半年</番目> 
            </ TR> 
        </ THEAD>
        <TBODY ALIGN = "センター" VALIGN = "中間"> 
            <TR> 
                <TD BGCOLOR = "＃1 b8cce4">北京</ TD> 
                <TD> 8000 </ TD>
                <TD> 9000 </ TD> 
                <TD> 10000 </ TD> 
                <TD> 12000 </ TD> 
            </ TR> 
            <TR> 
                <TD BGCOLOR = "＃1 b8cce4">上海</ TD> 
                <TD> 6000 < / TD> 
                <TD> 7000 </ TD> 
                <TD> 8000 </ TD> 
                <TD> 10000 </ TD> 
            </ TR> 
        </ TBODY> 
        <TFOOT> 
            = "中間" <TR ALIGN = "センター" VALIGN > 
                <tdの高さ= "30px" BGCOLOR = "＃1 b8cce4">合计</ TD> 
                <TD> 7000 </ TD> 
                <TD> 8000 </ TD> 
                <TD> 9000 </ TD> 
                <TD> 11000 </ TD> 
            </ TR>
        </ TFOOT> 
    </ TABLE>

次のような効果を実行するコードは次のとおりです。

ネストした表：

完全な例：

<!-- 表格嵌套 -->
    <table border="1" cellspacing="0">
        <tr>
            <td>2014年</td>
            <td>2015年</td>
            <td>2016年</td>
        </tr>
        <tr>
            <td>
                <table border="1" cellspacing="0">
                    <tr>
                        <td>上半年</td>
                        <td>下半年</td>
                    </tr>
                    <tr>
                        <td>6000</td>
                        <td>8000</td>
                    </tr>
                </table>
            </td>
            <td>9000</td>
            <td>10000</td>
        </tr>
    </table>

代码运行效果：

おすすめ