Sorry. This page is Japanese only.

[第10回] 表を作る

　いよいよややこしいあの表を作るタグの登場です。



<TABLE>　</TABLE>タグとそれらで構成されるタグ

とりあえず、表を作るためのタグの基礎的な知識を覚えていきましょう。表を作るタグは、覚えるのがちょっとややこしいです。いっぱいありますけど、ここには必要なことを書きます。
このタグは、表を作るときに「ここの中は表でっせ！」と指定するタグです。もっと言ってしまえば、「表の基本的な構成を決めるタグ・<BODY>の表版」と考えてもよいでしょう。

  • 基本的な属性

    • 属性 説明 [指定]に代入するもの
    border=[指定] 線の陰の太さを指定します。 　"(数字)"・・・太さを代入します。「0」を代入した場合、線は表示されません。

  • 覚えておくと便利な物

    • cellspacing=[指定] 線の太さを指定します。 　"(数字)"・・・太さを指定します。
    cellpading=[指定] 線と表の中の文字等との間隔を指定します。 　"(数字)"・・・間隔を指定します。
    height=[指定] 高さを変更します。 　"(数字)"・・・高さをピクセル単位、または"%"(割合)で指定します。
    width=[指定] 横幅を変更します。 　"(数字)"・・・横幅をピクセル単位、または"%"(割合)で指定します。
    hspace=[指定] 隣との間隔を指定します。 　"(数字)"・・・横幅をピクセル単位、または"%"(割合)で指定します。
    vspace=[指定] 上下の間隔を指定します。 　"(数字)"・・・幅をピクセル単位、または"%"(割合)で指定します。


    <TR>　</TR>タグ

    　表組の中の列の起点と終点を指定するタグです。


    <TD>　</TD>タグ

    　表の項目(セル)のはじめて終わりを指定するタグです。

  • 基本的な属性

    • 属性 説明 [指定]に代入するもの
    nowrap ブラウザが改行させる処理を無効にさせます。(<BR>タグがある場合はその部分だけ改行されます) 　

  • 覚えておくと便利な物

    • height=[指定] セルの高さを変更します。 　"(数字)"・・・高さをピクセル単位、または"%"(割合)で指定します。
    width=[指定] セルの横幅を変更します。 　"(数字)"・・・横幅をピクセル単位、または"%"(割合)で指定します。
    align=[指定] セルの中の文字の横位置を指定します。 　"left"・・・左側に寄せます。(標準)
    　"center"・・・中央に寄せます。
    　"right"・・・右側に寄せます。
    valign=[指定] セルの中の文字の縦位置を指定します。 　"top"・・・上に寄せます。
    　"middle"・・・中央に寄せます。(標準)
    　"bottom"・・・下に寄せます。
    colspan=[指定] 横方向に何項目に貫通させるか指定します。 　"(数字)"・・・貫通させる数を指定します。
    rowspan=[指定] 縦方向に何項目に貫通させるか指定します。 　"(数字)"・・・貫通させる数を指定します。


    <TH>　</TH>タグ

    　<TD>　</TD>タグと兄弟分のような感じです。「太字」「文字のセンタリング」が自動的にかかる仕組みがあります。


    各タグに共通する属性タグ

    　これらの属性は、当然そのタグの効果の範囲で有効です。

  • 基本的な属性

    • 属性 説明 [指定]に代入するもの
    background=[指定] 背景を指定します。 　"(画像のあるパス)"・・・画像ファイルを保存したURLを代入します。相対パスでも絶対パス(http://〜)でもかまいません。
    bgcolor=[指定] 背景の色を指定します。 　"#(16進数)"・・・色を16進数で指定します。設定は私が作っている「Color Arrangementor」を使うと設定がしやすいです
    　"(色の名前)"・・・色の名前を入れます。但し、英語です(red,blackなど)。代表的な色以外は使えないブラウザがあります。



    とにかくややこしい

    　とにかくHTMLで表を作るのは大変です。タグの説明だけしても、今までとは違ってどの様にタグを配置すればいいのかさっぱりだ、という人が多いと思います。
    　今回は、複雑な物をあえて考えたり作らずに、Excelの「新規作成」の状態で出てくるワークシートみたいな表をとりあえず作ってみてはいかがでしょう。下の図は基本的な図の作り方の一例です。


    例１・上記4つのタグと基本的属性を使った簡単な表
    表示例 ソース
    表 項目1 項目2 項目3
    項目A 1-Aのセル 2-Aのセル 3-Aのセル
    項目B 1-Bのセル 2-Bのセル 3-Bのセル
    項目C 1-Cのセル 2-Cのセル 3-Cのセル
    		<table border="1"> <tr> <th>表</th> <th nowrap>項目1</th> <th nowrap>項目2</th> <th nowrap>項目3</th> </tr> <tr> <th nowrap>項目A</th> <td>1-Aのセル</td> <td>2-Aのセル</td> <td>3-Aのセル</td> </tr> <tr> <th nowrap>項目B</th> <td>1-Bのセル</td> <td>2-Bのセル</td> <td>3-Bのセル</td> </tr> <tr> <th nowrap>項目C</th> <td>1-Cのセル</td> <td>2-Cのセル</td> <td>3-Cのセル</td> </tr> </table>


    　ソースを見ていただくとわかると思いますが、単純な表を作るのはそう難しくありません。が、面倒です。項目が一つでも数々のタグを組み合わせないとだめだということがおわかりになられると思います。
    　ここで、表を作るときに際して注意したいのが、一番最初の項目数とそれ以下の項目数は同じでなければいけないということです。見ればわかるかと思いますが。
    　それを解決したのが下の例です。応用的要素がありますので、わからないようでしたら読み飛ばしてかまいません。
    例2・項目数の問題を解決する
    表示例
    表 項目1 項目2 項目3
    項目A 1-Aのセルと2-Aのセルが一緒 (横で連結) 3-Aのセル
    項目B 1-Bのセル 2-Bのセル 3-Bのセルと3-Cのセルが一緒(縦に連結)
    項目C 1-Cのセル 2-Cのセル
    ソース <table border="1"> <tr> <th>表</th> <th nowrap>項目1</th> <th nowrap>項目2</th> <th nowrap>項目3</th> </tr> <tr> <th>表</th> <th nowrap>項目1</th> <th nowrap>項目2</th> <th nowrap>項目3</th> </tr> <tr> <th nowrap>項目A</th> <td colspan="2">1-Aのセルと2-Aのセルが一緒 (横で連結)</td> <td>3-Aのセル</td> </tr> <tr> <th nowrap>項目B</th> <td>1-Bのセル</td> <td>2-Bのセル</td> <td rowspan="2">3-Bのセルと3-Cのセルが一緒(縦に連結)</td> </tr> <tr> <th nowrap>項目C</th> <td>1-Cのセル</td> <td>2-Cのセル</td> </tr> </table>


    この時点で「あわあわ〜」と言っている方は、コーヒーでもゆっくり飲みながら一旦休憩されることをおすすめします。
    まあ、この「例2」を見てわかっていただきたいのは、「項目数を調整するには"colspan"や"rowspan"の属性を使う」ということです。これを駆使できるようになると、様々なタイプの表が作れるようになりますが、覚えるまでがとっても大変です。まずは、「図1」をマスターしましょう。
    表は作って慣れないとだめです。見ただけでは、はっきり言って覚えません。どんどん身に回りにある表という表をHTML化してみましょう。自分で作った統計を表にするのもいいかもしれません。どんどん書いて覚えましょう。学校で習っ漢字を実際書かずに覚えた人は何人いるでしょう(「一」とかは別です)？テスト勉強を教科書だけ見て覚える人は何人いるでしょう。そう、何でも実践してみないと始まらないのです。



    表を作るに当たっての注意

    HTMLで表を作ると、ブラウザがその表を読み込むとき結構PCに負担がかかります。表が複雑すぎるとどんなにHTMLファイルのサイズが小さくてもなんだか大きなファイルを読み込んでいるくらい遅くなりますので、注意しましょう。
    特に、Netscape Navigator (Communicator)は、表の中の画像、文字をすべて読みとらないと画面にその表を表示しません。これはとても注意すべき点です。よく覚えておきましょう。
    それと、Lynx等のブラウザでは表を認識しません。第7回で説明した自分のHTMLをチェックしてもらえる機関や、自分の手持ちのブラウザでどの様に見えるか見映えをよくチェックしましょう。
    やっぱり、よくしておきたいのがチェックです。


    [no_10.html　1999年08月27日更新]

     |　トップページ  |　もくじ  |
    Copyright© 1997-2022 Yuichiro SAITO All rights reserved.
    転載・リンクされる場合は、事前に「このサイトの説明」をご覧ください。