Webページに表を表示させるには

Webページ作成法

tableタグで表を作る

Wedページに表を作成する場合、データはHTMLで、装飾はCSSで記述します。

HTMLでデータをセット

HTML

<table>

  <caption>

    表題

  </caption>

  <thead>

    <tr>

      <th scope="col">項目名1</th>

      <th scope="col">項目名2</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <th scope="row">データ1</th>

      <td>データ2</td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <th scope="row" colspan="2">総括データ</th>

    </tr>

  </tfoot>

</table>

タグ

table

表の始まりを表します。

caption

表題を表します。

tr

表の行を表します。

th

表のセルの見出しを表します。

tbody

表の本体の始まりを表します。

td

表のセルを表します。

tfoot

表のフッターを表します。

属性

scope

値

col=行 row=列

どの要素に対応するかを明示するのに使います。

colspan

値

数値

数値分のセルを横（行）に連結します。

rowspan

値

数値

数値分のセルを縦（列）に連結します。

 　表らしくスタイル（装飾）を整えるには、CSSを使います。

CSSでスタイル付け

CSS

table {

   border: 1px double #666;　# 枠線をやや濃い目の灰色に

 }

 thead, tfoot {
   background: #eff;　# ヘッダーとフッターの背景色を薄い水色に
 }
 th, td {
   border: 1px solid #aaa;　# 枠線を灰色に
   padding: 0 8px;　# セルの前後の空きを8pxに
 }

表示

表題

項目名1	項目名2
データ1	データ2
総括データ

※アメブロでは最後に空白行が入り、CSSの効果も違うなど表示が乱れます。