https://hmaster.net/


HTMLタグとCSSを使いメモ帳だけで無料でホームページを作成する 方法を分かりやすく解説しているサイトです。 初心者向けに見やすい、読みやすい作りになっています。

行と列をグループ化する

<thead>、<tfoot>、<tbody>でテーブルの行をグループ化 させることができます。また<colgroup> でテーブルの列をグループ化させることができます。 前者の利点はテーブルの行数が多い時にグループ化された行全ての セル内の文字の色や配置をいっぺんに変えてしまうことができます。 セルやtrに個別に色や位置を指定していては効率が 悪いです。後者の利点も前者と同じ事が言えます。 <thead>、<tfoot>、<tbody>の属性には以下のようなものがあります。


<thead>、<tfoot>、<tbody> <colgroup>共通の属性
属性説明
bgcolor="色"グループ化された部分のセルの背景色を 指定します。
align="位置"グループ化された部分のセルの内容の位置を 指定します。
center、left、right。
valign="縦位置"グループ化された部分のセルの内容の縦方向の位置を 指定します。
baseline、top、middle、bottom。
<colgroup>のみの属性
span="数字"グループ化する列の数を指定します。
width="数字"グループ化する列の横幅を指定します。

【ブラウザ表示】

上部上部上部
上部上部上部
下部下部下部
下部下部下部
本体本体本体
本体本体本体

ソース

<table border="1" width="460">
<thead bgcolor="gold" align="right">……table head(頭)の略。一番上に記述。
<tr>
<td>上部</td><td>上部</td><td>上部</td>
</tr>
<tr>
<td>上部</td><td>上部</td><td>上部</td>
</tr>
</thead>

<tfoot align="center">……table foot(足)の略。2番目に記述。
<tr>
<td>下部</td><td>下部</td><td>下部</td>
</tr>
<tr>
<td>下部</td><td>下部</td><td>下部</td>
</tr>
</tfoot>

<tbody bgcolor="yellow">……table body(本体)の略。一番下に記述。
<tr>
<td>本体</td><td>本体</td><td>本体</td>
</tr>
<tr>
<td>本体</td><td>本体</td><td>本体</td>
</tr>
</tbody>
</table>

【ブラウザ表示】 …列をグループ化

グループグループグループ外のセル
グループグループグループ外のセル
グループグループグループ外のセル

ソース

<table border="1">
<colgroup span="2" bgcolor="fuchsia">
<tr>
<td>グループ</td><td>グループ</td><td>グループ外のセル</td>
</tr>
<tr>
<td>グループ</td><td>グループ</td><td>グループ外のセル</td>
</tr>
<tr>
<td>グループ</td><td>グループ</td><td>グループ外のセル</td>
</tr>
</table>

このエントリーをはてなブックマークに追加 Instagram

■ その他の項目

テーブルを作る
横幅、高さを指定する
画像や背景色を指定する
表示位置を指定する
テーブルに表題をつける
間隔、余白を指定する
セルを結合する
枠線の色やスタイルを指定する
枠線の表示方法を指定する
細い枠線のテーブル
テーブルを横に並べる
テーブルで空白を作る

HTMLタグ一覧のページに戻る