ITメモ
HTML
外部Link
【HTML ドキュメント】MDN Web Docs(Mozilla)
「HTML」リファレンス
HTMLメールの作り方「指定キーワード」を検索した「Google検索結果ページ」への「リンク」を作る方法「Google Map」へ「リンク」を作る方法「HTMLタグ」に「マウスアクション」を指定する方法「HTML」で「空白」を表示する方法「HTML」で「タブ(空白)」を表示する方法【XML】サイトマップ作り方
「HTML」の基礎知識
「HTML」の書式「HTML」でのコメントの仕方「HTML」での「改行」の仕方「CSS」の使い方「Javascript」の使い方「HTMLタグ」の使い方「HTML」の特殊文字一覧ブラウザやタブに表示される小さなアイコン「favicon(ファビコン)」の作り方他のページに移行する「リンク」の作り方 表の作り方Webページに画像の埋め込む方法動画を埋め込む方法音声ファイルを埋め込む方法地図を埋め込む方法入力フォームの作り方
「HTML」タグ
【DOCTYPE】「HTML」の「DOCTYPE宣言」【html】すべての「HTMLタグ」の親要素「html」タグ【head】「Webページ」の付属情報を設定する場所【meta】「Webページ」の設定をする「HTMLタグ」【title】「Webページ」の「タイトル」を設定する「HTMLタグ」【link】外部ファイルとの関係定義や読み込みをする方法【script】「Javascript」を実行する方法【div】レイアウトの枠として使う方法【p】文章の段落ごとに区分する方法【li】リスト(箇条書き)で表示をする方法【table】表の作り方【br】「HTML」での「改行」の仕方【a】リンクの作り方【h1-h6】Webページの見出しの設定方法【img】画像を表示する方法【span】文字列の一部を装飾する方法【ruby】「ルビ」をふるための要素
SEO(Search Engine Optimization)
「SEO対策」の具体的な方法「検索エンジン」に登録する方法「SEO対策」に有効な「ページタイトル」の記述方法「SEO対策」に有効な「キーワード」の記述方法「SEO対策」に有効な「ディスクリプション」の記述方法





【HTML】【table】表の作り方

【HTML】
【table】タグ
表の作り方




「HTML&CSS」の表を作るための「table」関連のタグの使い方。



INDEX







「Table(表)」関連タグ一覧


「table」 「table」タグ、「tr」タグ、「th」タグ、「td」タグ と組み合わせてテーブル(表)を作成。
「tr」 「table」タグ、「tr」タグ、「th」タグ、「td」タグ と組み合わせてテーブル(表)を作成。
「th」 「table」タグ、「tr」タグ、「th」タグ、「td」タグ と組み合わせてテーブル(表)を作成。
「th」 は Table Header の略。
テーブルのヘッダ部分のセルの内容を記述。
多くのブラウザでは、文字が太字の中央表示となる。
「td」 「table」タグ、「tr」タグ、「th」タグ、「td」タグ と組み合わせてテーブル(表)を作成します。
「caption」 テーブルの見出しを記述するために用います。「table」タグの直後に一回だけ記述可能。
「thead」 テーブルの行を、ヘッダ行、フッタ行、ボディ行に明示的に分けることに使用。
「tbody」 ボディ行を記述。テーブルの行を、ヘッダ行、フッタ行、ボディ行に明示的に分けることに使用。
「tfoot」 テーブルの行を、ヘッダ行、フッタ行、ボディ行に明示的に分けることに使用。
「colgroup」 テーブルのカラム(列)グループに対して、横幅や右寄せ、左寄せなどの指定。 colgroupでカラムグループの設定、col で個々の設定をする。
「col」 テーブルのカラム(列)に関する指定。


Back



「table」タグの使い方(表の作り方)


表は、「table」関連のHTMLタグを使って作成する。
色々な機能をつけた表を作成すると色々な関連タグを使用するようになるが、 表だけを作るには、
・「table」
・「tr」
・「td」
の少ないタグで作成できる。
ただシンプルで味気ないので、 好みの表を作成するには、 「table」関連タグを使って、色々と機能を加えていく必要がある。


最低限の表作成HTMLコード

下記の表HTMLコードは、
・「table」
・「tr」
・「th」
・「td」
だけで作成したシンプルな表のサンプルコード
<table>
<tr>
<th>Header</th>
<th>Header</th>
</tr>
<tr>
<td>Sample</td>
<td>Sample</td>
</tr>
</table>


出力結果
Header Header
Sample Sample


表のサイズや背景・枠線などを全く指定していない。
ここから表に色々なレイアウトデザインを加える。



表のサンプルHTMLコード


表テーブルに色々なタグ・要素を加えると、少し豪華な表になる。
CSSを使って、見やすい視認性の良いレイアウトデザインを加えて完成となる。


<table border=1 style="border-collapse:collapse;">
<caption>【表の例】</caption>
<colgroup bgcolor="#ffcccc" width=150 align="center">
</colgroup>
<colgroup>
<col span=1 width=100 align="center">
<col span=2 width=100 align="right">
</colgroup>
<thead style="background-color:#9999ff;">
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sample</td>
<td>Sample</td>
<td>Sample</td>
<td>Sample</td>
</tr>
<tr>
<td>Sample</td>
<td>Sample</td>
<td>Sample</td>
<td>Sample</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Footer</th>
<td><br/></td>
<td><br/></td>
<td>Footer</td>
</tr>
</tfoot>
</table>



出力結果
【表の例】
Header Header Header Header
Sample Sample Sample Sample
Sample Sample Sample Sample
Footer

Footer


Back



テーブル(表)のCSS設定




「Table]関連のCSSプロパティ

属性名説明
caption-sideテーブルのキャプション表示位置を指定
table-layoutテーブルのレイアウト方式を指定
border-collapse隣り合ったテーブルセルの枠線の描画方法を指定
border-spacing隣り合ったテーブルセルの枠線間の距離を指定。border-collapse:separate が指定時のみ有効。
empty-cells空セルを表示するか指定。



caption-sideの値一覧

top上部に表示。
bottom下部に表示。


table-layoutの値一覧

auto各列横幅を最適に表示。
fixedテーブル1行目を読み込み時、各列の横幅を算出。以後、その横幅を維持。長いテーブルの表示速度が改善。


border-collapseの値一覧

collapse表の枠線を重なり合わせて表示。
separate表の枠線を離して表示。隙間の間隔は border-spacing で調節。


border-spacingの値一覧

lengthセル枠線間の距離を指定。


empty-cellsの値一覧

show表示。
hide表示しない。



記述例:

caption-side: top;
caption-side: bottom;

table-layout: fixed;

border-collapse: collapse;
border-collapse: separate;

border-spacing: 10px;


Back



表の枠間の隙間をなくす方法


デフォルトで、表に線を入れると、各枠の間に隙間ができていて、 2重線になってしまいます。
CSSで設定をすれば、各枠の間をなくして、シンプルな1本線枠の表にすることができます。
設定は簡単で、下記のCSSを「table」タグに設定するだけ。

border-collapse:collapse;


「border-collapse:collapse」を未設定の表
     
     
     


「border-collapse:collapse」を設定した表
     
     
     


Back



Table関連タグの属性


【一般属性】 意味 使用可能タグ
id=id ID を指定 「table」,「caption」,「tr」,「th」,「td」,「tbody」,「thead」,「tfoot」
class=class クラスを指定します。 「table」,「caption」,「tr」,「th」,「td」,「tbody」,「thead」,「tfoot」
style=style スタイルシートを指定 「table」,「caption」,「tr」,「th」,「td」,「tbody」,「thead」,「tfoot」
title=title タイトルを指定。 「table」,「caption」,「tr」,「th」,「td」,「tbody」,「thead」,「tfoot」
dir=dir 文字の表示方向を指定。 「table」,「caption」,「tr」,「th」,「td」,「tbody」,「thead」,「tfoot」
lang=lang 言語を指定。 「table」,「caption」,「tr」,「th」,「td」,「tbody」,「thead」,「tfoot」
accesskey=key アクセスキーを指定。 「table」,「caption」,「tr」,「th」,「td」,「tbody」,「thead」,「tfoot」
tabindex=n タブインデックスを指定。 「table」,「caption」,「tr」,「th」,「td」,「tbody」,「thead」,「tfoot」
contenteditable=bool 要素を編集可能にする。 「table」,「caption」,「tr」,「th」,「td」,「tbody」,「thead」,「tfoot」
contextmenu=id コンテキストメニューを指定。 「table」,「caption」,「tr」,「th」,「td」,「tbody」,「thead」,「tfoot」
draggable=bool ドラッグを可能にする。 「table」,「caption」,「tr」,「th」,「td」,「tbody」,「thead」,「tfoot」
dropzone=value ドロップを可能にする。 「table」,「caption」,「tr」,「th」,「td」,「tbody」,「thead」,「tfoot」
hidden 要素を非表示にする。 「table」,「caption」,「tr」,「th」,「td」,「tbody」,「thead」,「tfoot」
spellcheck=bool スペルをチェックする。 「table」,「caption」,「tr」,「th」,「td」,「tbody」,「thead」,「tfoot」
IE拡張属性 他にもIEで拡張された属性が指定可能。 「table」,「caption」,「tr」,「th」,「td」,「tbody」,「thead」,「tfoot」
【ボーダー関連属性】 意味 使用可能タグ
border=n 枠線の太さを指定。0を指定すると枠線表示なし。HTML5 では 1 のみ指定可能で、太さはスタイルシートを用いる。 「table」
bordercolor=color 枠線の色を指定します。 「tr」,「td」,「th」
bordercolordark=color 立体的な枠線の暗い部分の色を指定します。 「tr」,「td」,「th」
bordercolorlight=color 立体的な枠線の明るい部分の色を指定します。 「tr」,「td」,「th」
frame=frame 各セルの上下左右の枠線について、表示する/しないを制御。HTML5 では廃止予定。
  void:表示しない。(既定値)
  above:上側のみ。
  below:下側のみ。
  hsides:上下のみ。
  vsides:左右のみ。
  lhs:左側(Left Hand Side)のみ。
  rhs:右側(Right Hand Side)のみ。
  box:上下左右。
  border:上下左右。
「table」
rules=rules テーブルの内側の枠線を表示するルールを指定。HTML5 では廃止予定。
  none:表示しない。
  groups:<thead>, <tbody>, <tfoot> で指定したグループの境界のみ。
  rows:横方向のみ。
  cols:縦方向のみ。
  all:すべて。(既定値)
「table」
【背景関連属性】 意味 使用可能タグ
background=url 背景画像を指定します。 「table」,「tr」,「th」,「td」
bgcolor=color 背景色を指定します。 「table」,「tr」,「th」,「td」,「tbody」
【配置関連属性】 意味 使用可能タグ
align=align
  center:中央表示
  char:指定文字揃え
  justify:均等割付
  left:左寄せ
  right:右寄せ
セル内データの横方向の配置を指定。HTML5 では廃止予定。 「caption」,「tr」,「td」,「th」,「tbody」,「thead」,「tfoot」
valign=valign
  baseline:ベースライン揃え
  bottom:下揃え
  center:中央揃え
  middle:中央揃え
  top:上揃え
セル内データの縦方向の配置を指定。HTML5 では廃止予定。 「caption」,「tr」,「td」,「th」,「tbody」,「thead」,「tfoot」
cellpadding=n 枠線とセルの内容の間の隙間をピクセル単位で指定。 「table」
cellspacing=n 内枠の太さを指定します。0 を指定すると、立体感の無い枠線を表示する。 「table」
hspace=n テーブルの周りの横方向の余白をピクセル単位で指定。 「table」
vspace=n テーブルの周りの縦方向の余白をピクセル単位で指定。 「table」
height=n セルの高さを 300px、または 50% で指定。HTML5 では廃止予定。 「table」,「tr」,「td」,「th」
width=n セルの横幅を 300px、または 50%で指定。HTML5 では廃止予定。 「table」,「td」,「th」
nowrap セル内データが自動改行されないようにします。HTML5 では廃止予定です。 「td」,「th」
char=char 位置揃えする文字を指定。HTML5 では廃止予定 「tr」,「td」,「th」,「tbody」,「thead」,「tfoot」
charoff=n char 属性で指定した文字を、セルの左端からどのくらいの位置に表示するかのオフセットを指定。HTML5 では廃止予定。 「tr」,「td」,「th」,「tbody」,「thead」,「tfoot」
【セル連結関連属性】 意味 使用可能タグ
colspan=n セルを n個、横方向に連結 「td」,「th」
rowspan=n セルを n個、縦方向に連結 「td」,「th」
【その他】 意味 使用可能タグ
cols=n 列数を指定。この属性を指定により、テーブル表示速度が若干速くなるケースもある。 「table」
datapagesize=size データバインド機能を用いる際の、レコード数を指定。 「table」
datasrc=datasrc データバインド機能を用いる際の、データソースの ID を指定。 「table」
summary=summary 音声読み上げブラウザなどのために、この表の目的や構成の説明を記述。HTML5 では廃止予定。 「table」
abbr=abbr 主に 「th」タグで使用。セルの内容の省略情報を記述。音声ブラウザがセルの概略を読み上げるのに役立つ。HTML5 では廃止予定 「td」,「th」
axis=axis 多次元配列データのための軸情報などを記述。HTML5 では廃止予定 「td」,「th」
headers=headers このセルに対応する見出しセルのリストを、id 属性で指定 「td」,「th」
scope=scope 見出しセルに対して指定。row はその見出しが列方向に対する見出しであること、col はその見出しが行方向に対する見出しであることを示します。HTML5 では廃止予定 「td」,「th」


Back