□HTMLで作るホームページ・実践編です。
□テーブルタグも覚えよう
| 準 備 |
| ■ テーブル・タグの説明 |
| ■ 基本の1行テーブル |
| ■ 基本のテーブル 行×列 |
| ■ テーブル・表タイトルなど |
| 制 作 |
| ■ テーブル・表 やってみよう |
| ■ 行や列を結合する書き方 |
| ■ テーブルの簡単なデザイン |
| ■ テーブルのサイズと配置(更新中） |
| 活 用（更新中） |
| ■ 普通のテーブルの考え方 |
| ■ ページレイアウト 画像枠など |
| HTMLタグで作るホームページ だれでもHTML テーブル・タグ編 |
|
準備
■テーブル・タグの説明 <table></table> <tr></tr> Table Row (テーブル ロウ テーブル行） <td></td> Table Data Cell（テーブル データ セル） talbe タグで trタグ、その次にtdタグ で囲み、文章などコンテンツが入ります。 1行1列のテーブル、四角の外枠ができます。 <table> <tr> <td> （コンテンツ文を入力する） </td> </tr> </table> タグの記述は並べて書いても、以下のように囲んだり詰めても構いません。 <table> <tr> <td> （コンテンツ文を入力） </td> </tr> </table> <table> <tr> <td> （コンテンツ文を入力） </td> </tr></table> ここで1つプロパティ(属性)情報を追加します。 TABLE BORDER 罫線(枠線)の表示・非表示 ブラウザやホームぺージエディタ(表）によって、 テーブルタグを記述してテーブル枠が出る場合、出ない場合があります。 <table border=”0″> 枠線が非表示になります。 <table border=”1″> 枠線が表示されます。数値を大きくすると罫線が太くなります。枠線の太さでデザインすることもできます。 1行1列のテーブルを記述します。 <table border=”1″> <tr> <td> はじめてのHTMLテーブルを作りました。 </td> </tr> </table> ブラウザ表示はじめてのHTMLテーブルを作りました。 ＢＡＣＫ |
|
■ 基本の1行テーブル 1行2列のテーブルを記述します。<table border=”1″> <tr> <td> 1行テーブル・左列 </td> <td> 1行テーブル・右列 </td> </tr> </table> ブラウザ表示1行テーブル・左列1行テーブル・右列表の行数は、TR タグ <tr> </tr> で囲む回数で表すことができます。 <tr> </tr> の行中で、TDタグ <td> </td> 区切りを入れます。 1行3列のテーブルを記述します。 <table border=”1″> <tr> <td>1行テーブル_左</td> <td>1行テーブル_中</td> <td>1行テーブル_右</td> </tr> </table> ブラウザ表示1行テーブル_左1行テーブル_中1行テーブル_右 ＢＡＣＫ |
|
■ 基本のテーブル 行×列 2行2列のテーブルを記述します。 表内のテキストの文字サイズを少し大きくしてみます。 <table border=”1″> <tr> <td><font size=”+1″>1行目・左</font></td> <td><font size=”+1″>1行目・右</font></td> </tr> <tr> <td><font size=”+1″>2行目・左</font></td> <td><font size=”+1″>2行目・右</font></td> </tr> </table> ブラウザ表示1行目_左1行目_右2行目_左2行目_右 表の行の数、TR タグ <tr> </tr> の囲みを、セットで繰返します。 1行目の <tr> </tr> の行中で区切ったTDタグ <td> </td> は、表の列数にあたりますので、TDタグの囲みが1行目と2行目で異なると、表が崩れてしまいます。また終了タグ</tr>の/(スラッシュ)や>(閉じ括弧記号)など記号1文字でも抜けていると、やはり表が崩れてしまいます。 4行3列にしてみます。 <table border=”1″> <tr> <td>1行目・左</td> <td>1行目・中</td> <td>1行目・右</td> </tr> <tr> <td>2行目・左</td> <td>2行目・中</td> <td>2行目・右</td> </tr> <tr> <td>3行目・左</td> <td>3行目・中</td> <td>3行目・右</td> </tr> <tr> <td>4行目・左</td> <td>4行目・中</td> <td>4行目・右</td> </tr> </table> ブラウザ表示1行目_左列、表の左上セルです1行目_中1行目_右2行目_左2行目_中2行目_右3行目_左3行目_中3行目_右4行目_左4行目_中4行目_右、表の右下セルです ここまでの表では、表のサイズを設定していませんので、表内のテキスト文の文字サイズや、文字数によるテキストの長さによって表が表示されている状態です。 ＢＡＣＫ |
|
■ テーブル・タグ 表タイトルなど ソースコードを閲覧して、テーブル・タグの周辺でよく見られるタグがありますので、説明しておきます。caption キャプション：表のタイトル テーブル1行目の上行がタイトル行になります。 table の中に書きますが、table border= でテーブル罫線を表示しても、キャプションには罫線の囲みが表示されません。 必ず使わなければならないというタグではありません。表の上にタイトルを入力して改行してもブラウザ表示は同じです。 <table> <caption> （表のタイトル）</caption> <tr> <td> （テキスト文_左）</td> <td> （テキスト文_中）</td> <td> （テキスト文_右）</td> </tr> </table> thead テーブル・ヘッダー th テーブル・ヘッダー・セル テーブルの1行目を見出しにするなどの場合に使えるタグで、テキストが太字になります。 見出し行をグループ化することもできます。 必ず使わなければならないタグではないので、たとえば、表の1行目に見出しにするとき、テキストにフォント・太字を設定する（しない）などで構いません。<table> <caption> （表のタイトル）</caption> <thead> <tr> <th>(見出し_左）</th> <th>(見出し_中）</th> <th>(見出し_右）</th> </tr> </thead> <tr> <td> （テキスト文_左）</td><td> （テキスト文_中）</td><td> （テキスト文_右）</td> </tr> </table> tbody テーブル・ボディ テーブルの本体の部分を tbody で囲む場合に使えるタグです。 必ず使わなければならないタグではないのですが、ホームぺージエディタで表作成すると出てきたりして、ソースコードでよく目にするタグです。 テーブル本体のデータ部分が何行で、どこからどこまでか目安になると思います。 tfoot テーブル・フッター テーブルのフッター部分を囲んで表します。最下行の集計行などです。 必ず使わなければならないタグではありません。 <table> <caption> （表のタイトル）</caption> <thead> <tr> <th>(見出し_左）</th> <th>(見出し_中）</th> <th>(見出し_右）</th> </tr> </thead> <tbody> <tr> <td> （1行目_左）</td><td> （1行目_中）</td><td> （1行目_右）</td> </tr> <tr> <td> （2行目_左）</td><td> （2行目_中）</td><td> （2行目_右）</td> </tr> <tr> <td> （3行目_左）</td><td> （3行目_中）</td><td> （3行目_右）</td> </tr> <tr> <td> （4行目_左）</td><td> （4行目_中）</td><td> （4行目_右）</td> </tr> </tbody> <tfoot> <tr> <td> （フッター_左）</td><td> （フッター_中）</td><td> （フッター_右）</td> </tr> </tfoot> </table> ＢＡＣＫ |
|
制作
■ テーブル・タグ表 やってみよう ＊メモ帳などテキストエディタに「準備」で読んだHTMLタグを入力練習したり、<table> から </table> までを範囲選択してコピペ（コピー＆ペースト）して「名前を付けて保存」、その際、拡張子を.htmlにします。 ここではとくに、課題やサンプルなど実例を出しません。 テーブル・タグで、たとえば、カレンダー（月、週、二十四節気、七十二候なども）WEBブラウザで見るコンテンツとしてよいかもしれません。また、時間割表などでしたらすべての表セルが表せるので練習になると思います。献立メニュー表、読書や動画視聴の記録、公開したくなるようなコンテンツを、テーブル・タグ表形式でいろいろ作ってみて下さい。 基本のテーブル・タグを範囲選択してメモ帳エディタにコピペ（コピー＆ペースト）、適当にファイル名を付けて拡張子 .html で保存します。HTMLとか BODYとか、すべてきちんと書いていなくても、TABLE ではじまっているタグが正しく書けていれば、ブラウザ画面で入力した表が見られると思います。TD で囲んだセルの中の文章の長さやコンテンツの大きさによって、横長の表をTABLEタグで縦方向に入力する場合もあります。行数や列数が増えると複雑になるので、 テーブル・タグで表を作成する場合、表の部分をメモ帳エディタで別ファイルにしておくと、作成しやすいかもしれません。 思い通りの表ができているかどうか、ブラウザでプレビューしながら、テキストのTABLEタグを入力して、WEBページの表を完成させます。表が完成したら、HTMLファイルのBODYタグの中に、表のTABLEタグをコピペ、貼り付けします。。TABLEを直接入力、TABLEタグのミスが原因で、ページ全体が崩れてしまうことがありますので、ブラウザのプレビューしてもし失敗していたら、エディタの「元に戻す」ボタンで問題なかった状態まで戻します。表を修正して、慎重に貼り付け直さなければなりません。HTMLで表作成に手間取るより、WEB公開されるデータやコンテンツを慎重に入力して更新作業しなければなりません。ホームぺージ作成ソフトのエディタを使っているという方は、大きな表が簡単に出せると思います。表サンプルを入力したら、HTMLソースコードを閲覧してみて下さい。余談ですが、表作成といえばMicrosoft Excelが得意ですが、Excel表をHTMLに載せるには、画像にしなければなりません。表のデータを修正したい場合は、Excelワークシートを入力し直して再度画像にします。画像が同じ名前なら、上書きされると思います。 ＢＡＣＫ |
|
■ 行や列を結合する書き方 縦(垂直)方向のセル結合 プロパティ（属性）は rowspan row （ロウ 行）-span テーブル・タグの <td> に設定します。<td rowspan=”行数”> </td> 1行目・左1-2行目・右2行目・左コードを表示します。 <table border=”1″> <tr> <td>1行目・左</td> <td rowspan=”2″>1-2行目・右</td> </tr> <tr> <td>2行目・左</td> （ここのtd 2行目・右は削除します） </tr> </table> 横(水平)方向のセル結合 プロパティ（属性）は colspan col(column コラム 列)-span テーブル・タグの <td> に設定します。 また、1行目の見出し <th> にも設定できます。 1行目で表の列を結合すると <caption> と同じです。 <td colspan=”列数”> </td> 1行目・左-右2行目・左2行目・右3行目・左3行目・右コードを表示します。 <table border=”1″> <tr> <td colspan=”2″>1行目・左-右</td> （ここのtd 1行目・右は削除します） </tr> <tr> <td>2行目・左</td> <td>2行目・右</td> </tr> <td>3行目・左</td> <td>3行目・右</td> </tr> </table> |
ＢＡＣＫ |
|
■テーブルの簡単なデザイン 1行目・左1行目・右2行目・左2行目・右 テーブル全体に背景色（黄色）と罫線(表示)を設定 <table bgcolor=”yellow” border=”1″> <tr> <td>1行目・左</td> <td>1行目・右</td> </tr> <tr> <td>2行目・左</td> <td>2行目・右</td> </tr> </table> 1行目・左1行目・右2行目・左2行目・右 表（罫線表示）の各列に別背景色を設定 <table border=”1″> <tr> <td bgcolor=”yellow”>1行目・左</td> <td bgcolor=”orange”>1行目・右</td> </tr> <tr> <td bgcolor=”yellow”>2行目・左</td> <td bgcolor=”orange”>2行目・右</td> </tr> </table> 1行目・左1行目・右2行目・左2行目・右 表罫線を赤(実線）、各行に別背景色を設定する。 <table border=”1″ style=”border-color: red;”> <tr bgcolor=”red”> <td>1行目・左</td> <td>1行目・右</td> </tr> <tr bgcolor=”pink”> <td>2行目・左</td> <td>2行目・右</td> </tr> </table> 1行目・左1行目・右2行目・左2行目・右 CSSでテーブル・ボーダーのプロパティを指定する。 ｛ border: -width -style -color; ｝ borderプロパティ：ボーダーの幅 スタイル 色 の順に書きます。 幅 border-width:3px; スタイル border-style:点線dash; 色 border-color:赤red; <table style=”border:3px dashed red;”> <tr> <td>1行目・左</td> <td>1行目・右</td> </tr> <tr> <td>2行目・左</td> <td>2行目・右</td> </tr> </table> ＢＡＣＫ |
|
■ テーブルのサイズと配置 1行目・左 1行目2行目 1行目・左1行目・右2行目・左2行目・右 ＢＡＣＫ |
|
活用（更新中） ■ 普通のテーブルの考え方 ■ ページレイアウト 画像枠など ＢＡＣＫ |