KompoZerでテーブルを作成する方法
Kompozerを使って、一覧表や比較表などに使われるテーブル（表）の作成や、作成したテーブル内の行や列を追加する方法、削除する方法を解説。
- 2016/8/1
- 2011/11/5
一昔前まではテーブルを使ってページをレイアウトするのが一般的でした。CSSのブラウザ側の実装もマチマチだった事もありますし、CSSそのものが一般的ではなかったという事もあります。
しかし現在では逆にCSSでレイアウトをするのが一般的で、テーブルを使用する機会も激減しています。
それでも何かの表を作ったりする場合には、テーブルは非常に便利です。
ここではKompozerでテーブルの挿入と加工の方法についてご紹介します。
テーブルの設置方法
まずはテーブルの設置方法から見ていきましょう。
テーブルを設置したい場所にカーソルを合わせて、ツールバーのテーブルアイコンをクリックします。- ワードでなどのワープロソフトで表を挿入するような感じで、マウス操作でテーブルの行や列の数を指定するメニューが開きます。ここでだいたいの行数や列数を指定してOKボタンを押します。
これでテーブルの挿入が完了です。
テーブルの幅やセル間隔を指定してテーブルを設置する方法
テーブルの設置は「簡略設定」でも設置する事はできますが、テーブルの幅やセルの間隔などを指定して設置する事もできます。その場合は「詳細設定」か「セル」のタブを使います。
詳細設定
- 行数
- テーブルの行数（縦方向）の数を数字で設定できます。簡略設定では6行までしか設置できませんでしたが、詳細設定を使えば1,000行まで指定してテーブルを設置する事ができます。
- 列数
- テーブルの列数（横方向）の数を数字で設定できます。行数と同様、簡略設定では6列までしか設置できませんでしたが、詳細設定を使えば1,000列まで指定してテーブルを設置する事ができます。
- テーブルの横幅
- 横幅をウィンドウに対してのパーセンテージ（％）かピクセル数で指定する事ができます。
- 枠線の太さ
- テーブルの枠線を数字で指定する事ができます。ただ枠線などのデザイン要素はCSSを使って指定した方が、柔軟かつきれいに仕上がります。
セル
- 横方向の配置
- セル内の文字や画像などの要素の配置を「左・中央・右」から指定します。「指定なし」の場合は左寄せに表示されます。
- 縦方向の配置
- セル内の文字や画像などの要素の配置を「上・中央・下」から指定します。「指定なし」の場合は上寄せに表示されます。
- セル中での折り返し
- セルの中に表示されるテキストを、セルの幅で自動的に折り返すようにするかどうかを指定します。
- セルの間隔（cellspacing）
- セル同士の間隔を指定します。
- セル内の余白（cellpadding）
- セルの中の余白を指定します。
テーブルの加工
次に設置したテーブルの行や列の数を増やしたり、セル同士の結合をしたりする方法を見ていきましょう。
行数、列数の追加と削除
テーブルの行数や列数を追加、削除するには、操作するテーブルを選択してツールバーのテーブルアイコンをクリックします。
開いたプロパティパネルの「テーブルタブ」を選択して、大きさの項目にある「列」と「行」の数字を増やすと追加、減らすと削除する事ができます。
また、テーブルそのものの幅や高さ・枠線の太さなどの設定もこのウィンドウで操作します。その他にもテーブルの表題や背景色、セルの背景色などの設定もできます。
ウィンドウの項目には難しい項目はありませんので、いろいろと操作して試してみてください。
セル同士の結合
上下や左右のセルを結合する場合は、結合するセルを両方とも選択します。ドラッグ操作で選択しても良いですし、Ctrl（Windows）やCommand（Mac）キーを押したままセルをクリックする事で、複数のセルの選択をする事ができます。
この状態で右クリックをして「選択されたセルを結合」を選択するとセルを結合する事ができます。
テーブルの設定を変更した時に、「テーブルプロパティ」ウィンドウにある「適用」ボタンを押す事で、プロパティを閉じずに変更を反映させる事ができます。
試行錯誤をしている時はいちいちウィンドウを閉じて・開いてという作業は大変ですので、適用ボタンで変更の具合を見ながら操作すると作業しやすいと思います。
Webデザイン・プログラムスキルを身につけたい方におすすめしたいスクール
私もWebスキルを身につけるためにスクールに通いましたが、正直言って「趣味の講座レベルのスクール」が多く、実践的なスキルを身につける事ができるスクールは多くありません。
ただ全くの未経験ではWebを仕事にする事が難しいのも事実。そこでWebの実践的なスキルを身につけられるスクールをご紹介します。
スクールの価格は安くありませんので、まずは無料体験レッスンや無料カウンセリングで体験してみて、良さそうだなと思ったら本格的に取り組む方法をおすすめします。
WebCampPro
（3ヶ月の超ガッチリ型）
3ヶ月の実践カリキュラムと3ヶ月のキャリアサポートで「転職・就職を保証してくれる」スクール。来校型のスクールですが、平日は毎日13:00以降、講師が常駐しているので質問や疑問もすぐに解消できるのが良いです。それぞれの学習スピードに合わせてカリキュラムが組まれますが、3ヶ月間という短期で一人前のエンジニアになるのが目標なので、かなりきつい部分もあるかと思います。
しかし裏を返せば「本気でキャリア形成をしたい」、「プログラムを仕事にしたい」という方にはピッタリなスクールです。
WebCamp
（1か月の集中型）
こちらは1ヶ月の短期集中型。と言っても、最初のカウンセリングを通してカリキュラムは個人ごとのオーダーメイドなので、自分の都合で学べるのが良いです。
このご時世、直接Web制作に携わらない部署の人もWebに関する知識は必要なので、社会人の方の受講も多いです。
CodeCamp
（2〜6か月のカスタマイズ型）
現役エンジニア・デザイナーからマンツーマン指導が受けられるスクールです。内容的には他のスクールにひけはとらないにもかかわらず、オンラインのみなので価格が安いのが良いです。
新卒などの社内研修でも利用されているので、社員のスキルギャップに悩んでいる方にも良いかもしれません。
