テーブルの変形

テーブルも、いろいろな形があります。
いつも、３×４マス、６×６マス　
というようにきれいな形とは限りません。

たまには、一行目は１マス、二行目以下は４マスにしたい
一行目と三行目を３マス、二行目とその他は５マスにしたい
一列目だけ行なし、にしたい場合が出てきます。

ここでは、テーブルの変形を作ってみましょう。

・・・table タグの属性・・・

colspan=・・・横方向のセルをいくつかまとめて
ひとつのセルにする
rowspan=・・・縦方向のセルをいくつかまとめて
ひとつのセルにする


注意
この場合に限って、「""」なしで、数字のみを入れる


まず、基本になるテーブルを組みましょう。

No.18
<html>
<head>
<title>
表の変形
</title>
</head>
<body bgcolor="lavenderblush">
<center>

<table border="1" width="300" height="150" bgcolor="white">

<tr><td>Ｗ</td><td>Ｘ</td><td>Ｙ</td><td>Ｚ</td></tr>

<tr><td>ａ</td><td>ｂ</td><td>ｃ</td><td>ｄ</td></tr>

<tr><td>１</td><td>２</td><td>３</td><td>４</td></tr>

<tr><td>い</td><td>ろ</td><td>は</td><td>に</td></tr>

</table>

<br>
</center>
</body>
</html>

これを保存して、表示すると、次のようになりますね。

ＷＸＹＺ
ａｂｃｄ
１２３４
いろはに


このテーブルをいろいろに変形させていきます。

No.17のテーブル部分だけを変えてみます。
赤文字を加えてください。
No.19
<center>

<table border="1" width="200" height="150" bgcolor="white">

<tr><td colspan=4>Ｗ　+　Ｘ　+　Ｙ　+　Ｚ</td></tr>

<tr><td rowspan=2>ａ<br>+<br>１</td><td>ｂ</td><td>ｃ</td><td>ｄ</td></tr>

<tr><td colspan=2>２　+　３</td><td rowspan=2>４<br>+<br>に</td></tr>

<tr><td>い</td><td>ろ</td><td>は</td></tr>

</table>

</center>

これを更新すると次のようになります。
まとまったセルを色分けしておきました。

Ｗ　+　Ｘ　+　Ｙ　+　Ｚ
ａ
+
１		ｂｃｄ
２　+　３４
+
に
いろは

これを組み合わせると、
ページのデザインが多彩になりますね！


リスト(箇条書き）をつくろう

テーブルを使わずに、きれいに箇条書きができます。
ただし、センタリングをすると崩れますので、ご注意！

箇条書きには、並列と、序列があります。

・・・リストのタグ・・・

<li>いちばん単純な並列リスト
先頭にマークがつき、改行される
単独で使える
<ul>・・・</ul>並列リストの前後に入れるタグ
<li>と共に使う
タグの前後に一行のスペースが入る
<ol>・・・</ol>序列リストの前後に入れるタグ
<li>と共に使う
タグの前後に一行のスペースが入る



では、試してみましょう

三種類のリストを作ってみましょう
HPのどこかにつぎのソースを加えてください。

No.20
単純なリスト
<li>春：　ｓｐｒｉｎｇ
<li>夏：　ｓｕｍｍｅｒ
<li>秋：　ｆａｌｌ
<li>冬：　ｗｉｎｔｅｒ
<br><br>

並列リスト
<ul>
<li>イギリス・・・ロンドン
<li>フランス・・・パリ
<li>イタリア・・・ローマ
<li>ドイツ・・・ベルリン
</ul>

序列リスト
<ol>
<li>Windowsを起動
<li>ＦＤをセット
<li>マイ・コンピュータを起動
<li>3.5インチＦＤをダブルクリック
</ol>

更新手続きをすると、次のようになります。

単純なリスト
  • 春：　ｓｐｒｉｎｇ
  • 夏：　ｓｕｍｍｅｒ
  • 秋：　ｆａｌｌ
  • 冬：　ｗｉｎｔｅｒ

    並列リスト
    • イギリス・・・ロンドン
    • フランス・・・パリ
    • イタリア・・・ローマ
    • ドイツ・・・ベルリン
    序列リスト
    1. Windowsを起動
    2. ＦＤをセット
    3. マイ・コンピュータを起動
    4. 3.5インチＦＤをダブルクリック

    • 注意
    単純なリストのときは、前後の空行スペースはない。
    また、最後の項目の後には改行は入らないので注意。
    それに比べると、したの二つのリストは完全な形になる。


    リストのマークを変えたり、
    数字をアルファベットに変えることもできます。

    ・・・リストタグの属性・・・

    start="・・・"<ol>・・・</ol>内の開始される数字を指定
    入れた数値からリストが始まる
    type="・・・"リストのアルファベット、数字、マークを変える
    ★<ol>・・・</ol>内で、A、ａ、Ⅰ、ⅰ、１を指定できる
    ★<ul>・・・</ul>内で、disk、circle、squareを指定できる


    いろいろなリストを作ってみましょう

    No.21
    薬の種類
    <ul type="circle">
    <li>粉薬
    <li>顆粒
    <li>錠剤
    <li>カプセル
    </ul>

    秋の花
    <ul type="square">
    <li>コスモス
    <li>菊
    <li>ホトトギス
    <li>サザンカ
    </ul>

    歩くコース
    <ol type="A">
    <li>５キロコース
    <li>１０キロコース
    <li>２０キロコース
    <li>３０キロコース
    </ol>


    更新すると次のようになります。

    薬の種類
    • 粉薬
    • 顆粒
    • 錠剤
    • カプセル
    秋の花
    • コスモス
    • 菊
    • ホトトギス
    • サザンカ
    歩くコース
    1. ５キロコース
    2. １０キロコース
    3. ２０キロコース
    4. ３０キロコース


    もう少し複雑なリストもできます

    No.22
    色の指定
    <ol type="A">
    <li>色番号による指定
    </ol>

    <ul type="circle">
    <li>#00ffff 　
    <li>#ffd700　
    <li>#ffa07a　　
    </ul>

    番号はわかりにくいので、色名を覚えておくと便利です。

    <ol start="2" type="A">
    <li>色名による指定
    </ol>

    <ol type="i">
    <li>赤系
    </ol>

    <ul type="square">
    <li>red
    <li>crimson
    <li>orangered
    </ul>

    <ol start="2" type="i">
    <li>青系
    </ol>

    <ul type="disk">
    <li>blue
    <li>navy
    <li>aqua
    </ul>

    <ol start="3" type="i">
    <li>黄系
    </ol>

    <ul type="circle">
    <li>yellow
    <li>gold
    <li>orange
    </ul>

    <ol start="4" type="i">
    <li>緑系
    </ol>

    <ul type="square">
    <li>green
    <li>lime
    <li>olive
    </ul>


    更新すると次のようになります。

    色の指定
    1. 色番号による指定
    • #00ffff 　
    • #ffd700　
    • #ffa07a　　
    番号はわかりにくいので、色名を覚えておくと便利です。
    1. 色名による指定
    1. 赤系
    • red
    • crimson
    • orangered
    1. 青系
    • blue
    • navy
    • aqua
    1. 黄系
    • yellow
    • gold
    • orange
    1. 緑系
    • green
    • lime
    • olive


    ・・・次回は階層構造について・・・


    制作者のＨＰかぼちゃの旅