Freeway テーブルの拡張属性3

つぎはテーブル＆セルの拡張を調べてみましょう。

表組するのに便利なテーブルアイテムですが、このテーブルに関しても拡張させる事ができます。先ずはテーブルのHTMLを見てみたいと思います。

作成したのは4つの『セル』が収納されたテーブルアイテムです。

<table>と<tr>と<td>というタグで構成されているのが分かります。このtableとtrとtdはどのような意味合いを持つのでしょうか。

基本的に<table>〜</table>内に<tr>〜</tr>で表の横一行を定義して、更にその中に<th>〜</th>や<td>〜</td>でセルを定義していきます

<tr>はTableRowの略称でテーブル(表)の横方向の一行を定義します。

<td>はTabledateの略称でセルの内容がデータとなるデータセルを作成します

<th>はTableHeaderの略称でセルの内容が見出しのヘッダセルを作成します

次にテーブルを、インスペクタパレットでこのように変更しました。

HTMLを見てみました。

それでは、テーブルを拡張させてみたいと思います。テーブルアイテムを選択し、メニュー＞アイテム＞拡張を開きます。名前にborder、値に5と入力してみます。

プレビューをしてみると、テーブルの外枠が太くなりました。

このようにテーブルアイテムの拡張をする事が出来るのですが、セル単位での拡張も可能です。セル単位の拡張は、行に対して行う方法と、１つのセルに対して行う方法の２種類があります。まずは行に対して行う方法ですが、つまり、<tr>を拡張するという事です。

拡張したい行のセルを選び、インスペクタパレットの現在の行の項目で、拡張ボタンを選択します。

名前にbgcolor、値にredと入力します。つまり背景を赤にする、という指示です。

結果このようになりました。

HTMLを見てみると、<tr>に対してbgcolor="red"と拡張されています。<tr> とはテーブル(表)の横方向の一行を定義する。でしたね。

次に、１つのセルに対して拡張するには、テーブルセルの項目の拡張を行います。

結果このようになりました。

<td>に対してbgcolor="red"と拡張されています。

次回に続く.......