liguofeng29’s blog

個人勉強用ブログだっす。

HTML5の要素と属性 - 既存HTML要素③　(表関連)

HTML5 ┗━HTML5の常用要素と属性

テーブル要素

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=EUC" />
   <title> テーブル定義 </title>
</head>
<body>
<table style="width:400px" border="1">
    <caption><b>テーブルのタイトル(一つのみ含む)</b></caption>
    <tr>
        <th>列1ヘッダー</th>
        <th>列2ヘッダー</th>
    </tr>
    <tr>
        <td>1-1</td>
        <td>1-2</td>
    </tr>
        <tr>
        <td>2-1</td>
        <td>2-2</td>
    </tr>
</table>
</body>
</html>

f:id:liguofeng29:20160117133518p:plain

テーブル要素 - colspan,rowspan

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=EUC" />
   <title> colspan,rowspan </title>
</head>
<body>
<table style="width:400px" border="1">
    <caption><b>colspan,rowspanについて</b></caption>
    <tr>
        <td rowspan="2">2行を占める</td>
        <td>通常セル１</td>
    </tr>
    <tr>
        <td rowspan="2">通常セル２</td>
    <tr>
    <tr>
        <td colspan="2">2列を占める</td>
    </tr>
</table>
</body>
</html>

f:id:liguofeng29:20160117133617p:plain

テーブル要素 - thead,tbody,tfoot

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> thead,tbody,tfoot </title>
</head>
<body>
<table border="1" style="width:400px">
    <caption><b>thead,tbody,tfootについて</b></caption>
    <thead>
    <tr>
        <th>ヘッダ名1</th>
        <th>ヘッダ名2</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <td colspan="2" style="text-align:right">tfootは解析時に最後に表示する</td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
        <td>行1-1</td>
        <td>行1-2</td>
    </tr>
    <tr>
        <td>行2-1</td>
        <td>行2-2</td>
    </tr>
    </tbody>
</table>
</body>
</html>

f:id:liguofeng29:20160117133702p:plain

テーブル要素 - col,colgroup

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
</head>
<body>
<table style="background-color:black;
  border-collapse:separate;border-spacing:1px;">
    <caption><b>colgroupとcol</b></caption>
    <!-- すべての列の会計は青 -->
    <colgroup style="background-color:white;">
        <!-- 1列目は160px -->
        <col style="width:160px"/>
        <!-- 2，3列目は100px -->
        <col span="2" style="width:100px"/>
    </colgroup>
    <thead>
    <tr>
        <th>ヘッダ名1</th>
        <th>ヘッダ名2</th>
        <th>ヘッダ名3</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <td colspan="3" style="text-align:right">フッター</td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
        <td>1-1 幅160px</td>
        <td>1-2 幅100px</td>
        <td>1-3 幅100px</td>
    </tr>
    <tr>
        <td>2-1 幅160px</td>
        <td>2-2 幅100px</td>
        <td>2-3 幅100px</td>
    </tr>
    </tbody>
</table>
</body>
</html>

f:id:liguofeng29:20160117143739p:plain