TOPページ >  テーブルを作成する > テーブルを作成する

テーブルを作成する

ウェブサイトで表を表示させるには <table>タグと<th>、<tr>および<td>タグを使ってテーブルを作成します。ブログでも使えます。各タグの役割は、おおむね次のようになります。

<table>テーブルを宣言します
<th>見出しのセルの<td>の代わりに使用します
<tr>行を表します
<td>セルを表します

実例でご説明します。

便名羽田発那覇着
JAL190106:1508:45
JAL190508:1010:40
JAL190909:0511:35

このテーブルのソースは下記のようになります。

<table border="1">
<tr><th>便名</th><th>羽田発</th><th>那覇着</th></tr>
<tr><td>JAL1901</td><td>06:15</td><td>08:45</td></tr>
<tr><td>JAL1905</td><td>08:10</td><td>10:40</td></tr>
<tr><td>JAL1909</td><td>09:05</td><td>11:35</td></tr>
</table>

始めと終わりがテーブルの開始<table>と終了</table>タグで囲まれています。border="1" は、枠の太さを指定しています。

その中に、行の開始<tr>と終了</tr>タグが、行の数(この場合 4行なので 4回)だけ入れ子になっています。

さらにその中に、セルの開始<td>と終了</td>タグが、セルの数(この場合 3つなので 3回)だけ入れ子になっています。

ただし、1行目は見出し行なので、<td></td>の代わりに<th>および</th>が使われています。

<td>の代わりに<th>を使用したセルは見出しとみなされ、ほとんどのブラウザでは太字、中揃えで表示されます。

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
テーブルの余白などのスタイルを指定する
テーブル自動作成フォーム2
セル内の文字/画像の縦方向表示位置を指定する
セル内の文字/画像の横方向表示位置を指定する
セル内の余白を指定する
セルとセルの間隔を指定する
テーブルの背景画像を表示する
テーブルの背景色を指定する
テーブル枠の色を指定する
テーブルに枠をつける
テーブルの左右に文字/画像を回り込ませる
テーブルに表題をつける
セルのサイズを指定する
テーブルのサイズを指定する
テーブルに画像やボタンを表示する
横にまたがるセルを作る
縦にまたがるセルを作る
テーブルを作成する
テーブル自動作成フォーム
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス