【HTML講座⑤まとめその1】「表作成」をゼロから学びました

PR

第5回目は「表を作成する」<table><tr><th><td>タグと、「入力フォームを作成する」<form><input><select><textarea>タグを学びました。

今回はそのうちの表作成をまとめます。

表を作成する・・・<table><tr><th><td>タグ

表の基本的な構造は、 <table>~</table> 内に表の横行、縦列を定義してセルを作り、セルの中を入れていきます。

表作成のタグだから、これを使って「デザイン」をしてはダメ、作ろうと思えば作れるが・・・あくまでも表をつくることがルールだそうです。

順を追ってみていきます。

<tr>~</tr>で横一行を定義

4つだと四行の表になります。

<table>

          <tr></tr>

          <tr></tr>

          <tr></tr>

          <tr></tr>

 </table>

<td>~</td>でたて列を定義

5つ入れると縦列が5つの表になります。

  <table>

          <tr><td></td><td></td><td></td><td></td><td></td></tr>

          <tr><td></td><td></td><td></td><td></td><td></td></tr>

          <tr><td></td><td></td><td></td><td></td><td></td></tr>

          <tr><td></td><td></td><td></td><td></td><td></td></tr>

  </table>

<td></td> にデータを書く

横4列縦5行の表の中にデータを入れて、以下のような表(まだ線はない)を作りたいとき・・・

1A 1B 1C 1D 1E

2A 2B 2C 2D 2E

3A 3B 3C 3D 3E

4A 4B 4C 4D 4E

以下の書き方になります。

 <table>

          <tr><td>1A</td><td>1B</td><td>1C</td><td>1D</td><td>1E</td></tr>

          <tr><td>2A</td><td>2B</td><td>2C</td><td>2D</td><td>2E</td></tr>

          <tr><td>3A</td><td>3B</td><td>3C</td><td>3D</td><td>3E</td></tr>

          <tr><td>4A</td><td>4B</td><td>4C</td><td>4D</td><td>4E</td></tr>

 </table>

<th></th>で囲むことでヘッダーとなる(太字)

縦のA列、横の1行をヘッダー(太字)にしたいときは以下のようになります。

<th)>はヘッダーなので、セル内でセンタリングされ文字が太くなります。

<table>

          <tr><th>1A</th><th>1B</th><th>1C</th><th>1D</th><th>1E</th></tr>

          <tr><th>2A</th><td>2B</td><td>2C</td><td>2D</td><td>2E</td></tr>

          <tr><th>3A</th><td>3B</td><td>3C</td><td>3D</td><td>3E</td></tr>

          <tr><th>4A</th><td>4B</td><td>4C</td><td>4D</td><td>4E</td></tr>

</table>

実際にわかりやすく文字を入れていくと・・・

<table>

          <tr><th></th><th>報酬<br>(きびだんご)    (←セルの中で改行している!)

          </th><th>攻撃力</th><th>防御力</th><th>素早さ</th></tr>

          <tr><th></th><td>5</td><td>5</td><td>2</td><td>3</td></tr>

          <tr><th></th><td>2</td><td>4</td><td>1</td><td>2</td></tr>

          <tr><th>きじ</th><td>1</td><td>2</td><td>5</td><td>5</td></tr>

        </table>

これが以下のようになります↓

 

 

報酬

(きびだんご)

攻撃力 防御力 素早さ
5個 5 2 3
2個 4 1 2
きじ 1個 2 5 5

上記のタグの書き方については、改行して見やすくすると以下のようにも書くことができます↓

        <table>

          <tr>

            <th></th>

            <th>報酬<br>(きびだんご)</th>   

            <th>攻撃力</th>

            <th>防御力</th>

            <th>素早さ</th>

          </tr>

          <tr>

            <th></th>

            <td>5</td>

            <td>5</td>

            <td>2</td>

            <td>3</td>

          </tr>

          <tr>

            <th></th>

            <td>2</td>

            <td>4</td>

            <td>1</td>

            <td>2</td>

          </tr>

          <tr>

            <th>きじ</th>

            <td>1</td>

            <td>2</td>

            <td>5</td>

            <td>5</td>

          </tr>

        </table>

セルの結合・・・coldspanで横方向につなげる

横に並んで同じ「5」がはいるセルをくっつける場合は以下のようになります。

<td colspan=”つなげるセルの数“>  </td>

<td colspan=”2″>5</td>

        <table border=”1″>       ← border属性で枠線をあらわす。 =”1” は1ピクセル

          <tr> 

            <th>&nbsp;</th>        ←&nbsp;は空白の意味

            <th>報酬<br>(きびだんご)</th>

            <th>攻撃力</th>

            <th>防御力</th>

            <th>素早さ</th>

          </tr>

          <tr>

            <th></th>

            <td>5</td>

            <td>5</td>

            <td>2</td>

            <td>3</td>

          </tr>

          <tr>

            <th></th>

            <td>2</td>

            <td>4</td>

            <td>1</td>

            <td>2</td>

          </tr>

          <tr>

            <th>きじ</th>

            <td>1</td>

            <td>2</td>

            <td colspan=”2″>5</td>

          </tr>

        </table>

これを書くと以下のようになります↓

報酬

(きびだんご)

攻撃力 防御力 素早さ
   猿 5個 5 2 3
   犬 2個 4 1 2
  きじ 1個 2 5

隣り合った5のセル2つが結合しました。

 

セルの結合・・・rowspanで横方向につなげる

縦に並んで同じ「2」が入るセルをくっつける場合は・・・

<td rowspan=”つなげるセルの数“>  </td>

        <table border=”1″>

  <thead>

          <tr>

            <th></th>

            <th>報酬<br>(きびだんご)</th>

            <th>攻撃力</th>

            <th>防御力</th>

            <th>素早さ</th>

          </tr>

          <tr>

            <th></th>

            <td>5</td>

            <td rowspan=”2″>2</td>

            <td>2</td>

            <td>3</td>

          </tr>

       </thead>

       <tbody>

          <tr>

            <th></th>

            <td>2</td>

            <td>4</td>

            <td>1</td>

          </tr>

          <tr>

            <th>きじ</th>

            <td>1</td>

            <td>2</td>

            <td colspan=”2″>5</td>

          </tr>

        </tbody>

        </table>

 

 

 

報酬

(きびだんご)

攻撃力 防御力 素早さ
   猿 5個 2 2 3
   犬 2個 1 2
  きじ 1個 2 5

隣り合った5のセル2つが結合しました。

表作成まとめ

まとめが長くなりましたがやっていることはとてもシンプルでした!!

第5回目後半は、入力フォームですが、長くなるので分けてまとめます。

PR

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です