ウェブサイト作りにHTMLタグでテーブルを作成しよう!

HTML

それではこれから、ウェブサイトでテーブルを作成する
HTMLタグについて説明していきます。

テーブルを作成するHTMLタグ

ウェブサイト作りに欠かせないものとして、
テーブル(表)があります。

そのテーブルを作成するためのHTMLタグ
を紹介します。

TABLEタグ

テーブルを作成するためには、table タグを使用します。

例:<table></table>

table タグは th タグ、tr タグ、td タグ
組み合わせてテーブルを作成します。

th要素は「Table Header(見出し)」の略です。
テーブルの見出しを意味します。

tr要素は「Table Row(行)」の略です。
テーブルの行を意味します。

td要素は「Table Data(データ)」の略です。
テーブルのデータとなるセル、表では列を意味します。

テーブルの基本的な構造は、

<table></table>が全体で、
<tr></tr>は表の横一行を設定、
その中に<th></th>で表の見出しセルを設定、
<td></td>でセルを設定します。

この説明だけではわかりにくいので、
記述例として、見出し付き2×2
テーブルを書いてみます。

テーブル例1

<記述例>

<table border="1">
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td>1列1行</td>
    <td>2列1行</td>
  </tr>
  <tr>
    <td>1列2行</td>
    <td>2列2行</td>
  </tr>
</table>

<表示例>

見出し1 見出し2
1列1行 2列1行
1列2行 2列2行

主な属性

tableで指定できる主な属性は

・枠線の太さ:border=”ピクセル数”
・枠線の色:bordercolor=”カラーコード”
・セルの余白:cellpadding=”ピクセル数”
・セルの間隔:cellspacing=”ピクセル数”
・背景色:bgcolor=”カラーコード”
・背景画像指定:background=”画像ファイル名”
・表示位置指定:align=”left”(左寄せ)、
  align=”center”(中央揃え)、align=”right”(右寄せ)
・テーブルの横幅:width=”ピクセル数またはパーセント”
・テーブルの縦幅:height=”ピクセル数”

また、このタグもスタイルシートで詳細の設定が出来ます。

テーブル例2

枠線太さ1ピクセル、中央寄せ、横300ピクセル、
縦200ピクセルのテーブルをstyle属性に直接CSSを記述し
作成していきます。

<記述例>

<table style="text-align:center; width:300px; height:200px;">
  <tr>
    <td>1列1行</td>
    <td>2列1行</td>
  </tr>
  <tr>
    <td>1列2行</td>
    <td>2列2行</td>
  </tr>
</table>

<表示例>

1列1行 2列1行
1列2行 2列2行

テーブル例3

背景色:ベージュ、
枠線太さ:左 1ピクセル、右 5ピクセル、上 10ピクセル、下 15ピクセル、
のテーブルをstyle属性に直接CSSを記述し作成していきます。

<記述例>

<table style="background:beige; border-left:solid 1px; border-top:solid 10px; border-right:solid 5px; border-bottom:solid 15px;">
  <tr>
    <td>1列1行</td>
    <td>2列1行</td>
  </tr>
  <tr>
    <td>1列2行</td>
    <td>2列2行</td>
  </tr>
</table>

<表示例>

1列1行 2列1行
1列2行 2列2行

このように、簡単にテーブルを作成することができます。

コメント

タイトルとURLをコピーしました