■
表の作り方 1) 基本編 - 表の枠組みを作成
2) サイズ編 - 表のセルサイズ変更
3) 結合編 - 表のセルを結合
4) 位置編 - 文字列及び表の表示位置変更
5) 装飾編 - 表のセル及び枠線を装飾します
6) サンプル編 - 表のサンプルを紹介します
前回は、表の作り方 位置編 - 文字列及び表の表示位置変更について紹介しました。
5) 装飾編 - 表のセル及び枠線の装飾※今回はFC2ブログをベースに紹介しますが、基本的な作業は同様のはずです。
1,
セル単位での色づけ方法です。
＜td＞内に
bgcolor=#色番号の記述を追加します。
■本文
■プレビュー
2,
bgcolor=#色番号を＜tr＞内に追加することで、行単位での色づけとなります。
■本文
■プレビュー
3,
bgcolor=#色番号を＜table＞内に追加することで、枠線も含めた表全体の色づけとなります。
■本文
■プレビュー
4,
手順3の方法で表全体に色づけをし、更にセル単位でのすることで下記のような装飾方法も可能です。
■本文
■プレビュー
■本文（枠線のみを残す→全セルを白色表示)
■プレビュー
5,
枠線の太さを示すタグとして
cellspacingというタグがあります。
cellspacingの値を0にする=枠線をなくすことになります。
■本文
■プレビュー
6,
枠線を白表示にすることで、セルのみの表示が可能です。
■本文
■プレビュー
■
表の作り方 1) 基本編 - 表の枠組みを作成
2) サイズ編 - 表のセルサイズ変更
3) 結合編 - 表のセルを結合
4) 位置編 - 文字列及び表の表示位置変更
5) 装飾編 - 表のセル及び枠線を装飾します
6) サンプル編 - 表のサンプルを紹介します
前回は、表の作り方 結合編_表のセルの結合について紹介しました。
4) 位置編 - 文字列及び表の表示位置変更※今回はFC2ブログをベースに紹介しますが、基本的な作業は同様のはずです。
1,
セル内の文字列を左寄せで表示させる場合セルを表す＜td＞〜＜/td＞の＜td＞内に、
"align=left"の記述を追加します。
しかし、元々文字列表示は左寄せが基本設定なので、この記述が無くても文字列は左寄せで表示されます。
■本文１
■本文２（そのまま）
■プレビュー（文字列左寄せ）
2,
セル内の文字列を中央表示させる場合＜td＞内に
"align=center"の記述を追加します。
■本文
■プレビュー
3,
セル内の文字列を右寄せ表示させる場合＜td＞内に
"align=righ"tの記述を追加します。
■本文
■プレビュー
4,
複数のセル内の文字列を中央表示させる場合◎方法その1
下記の通り、中央表示させる＜td＞内にalign=centerの記述を追加します。
■本文
■プレビュー
◎方法その2
中央表示させたいセルを含んでいる＜tr＞〜＜/tr＞の＜tr＞内にalign=centerの記述を追加します。
■本文
■プレビュー
※この方が記述がカンタンになりますね。
5,
テーブル自体の表示位置を中央にする場合＜table〜＞内に
align=centerの記述を追加するだけです。
■本文
■プレビュー
6,テーブル自体の表示位置を右寄せにする場合
＜table〜＞内に
align=rightの記述を追加するだけです。
■本文
■プレビュー
■
表の作り方 1) 基本編 - 表の枠組みを作成
2) サイズ編 - 表のセルサイズ変更
3) 結合編 - 表のセルを結合
4) 位置編 - 文字列及び表の位置変更
5) 装飾編 - 表のセル及び枠線を装飾します
6) サンプル編 - 表のサンプルを紹介します
前回は、表の作り方 サイズ編_表のセルサイズ変更について紹介しました。
3) 結合編 - 表のセルを結合※今回はFC2ブログをベースに紹介しますが、基本的な作業は同様のはずです。
1,
基本的な結合パターンの紹介です。
縦セルの結合は、＜td＞内に
rowspan="結合数"を入れます。
■本文
※注意点は、表の1行目と2行目の＜td＞〜＜/td＞の個数が違う点です。これが表を作成する上でのポイントともなるのですが、結合されるセルは記述する必要がありません。
■プレビュー
2,
もし1行目と2行目の＜td＞〜＜/td＞の個数を揃えてしまうと、以下の様に表が崩れてしまうのです。
■本文
■プレビュー
3,
rowspan="結合数"にて結合するセルの数を増やす場合は、以下のように＜tr＞〜＜/tr＞を増やすことで調整します。
■本文
■プレビュー
4,
横セルを結合する場合は、＜td＞内に
"colspan="結合数"を入れます。
■本文
■プレビュー
5,
横に結合するセルの数を増やす場合は、2行目以降の＜tr＞〜＜/tr＞内の＜td＞〜＜/td＞を増やして調整します。
■本文
■プレビュー
6,
縦セルと横セルの結合を織り交ぜた、ちょっとした表です。
参考にしてみて下さい。
■本文
■プレビュー
次回は、3)表の作り方 結合編_表のセルを結合について紹介します。
■
その他の表の作り方各種項目 1) 基本編 - 表の枠組みを作成
2) サイズ編 - 表のセルサイズ変更
3) 結合編 - 表のセルを結合
4) 位置編 - 文字列及び表の位置変更
5) 装飾編 - 表のセル及び枠線を装飾します
6) サンプル編 - 表のサンプルを紹介します
■
表の作り方 1) 基本編 - 表の枠組みを作成
2) サイズ編 - 表のセルサイズ変更
3) 結合編 - 表のセルを結合
4) 位置編 - 文字列及び表の位置変更
5) 装飾編 - 表のセル及び枠線を装飾します
6) サンプル編 - 表のサンプルを紹介します
前回は、表の作り方 基本編_表の枠組みを作成について紹介しました。
2) サイズ編 - 表のセルサイズ変更※今回はFC2ブログをベースに紹介しますが、基本的な作業は同様のはずです。
1,
セルの横サイズを変更させるには＜table border＞内に
width="長さ"を追加します。
■本文
■プレビュー
2,
セルの縦サイズを変更させるには＜table border＞内に
height="長さ"を追加します。
■本文
■プレビュー
3,
セル内の文字列が、指定したサイズに収まりきらない場合は、自動でセルサイズも伸びていきます。
■本文
■プレビュー
次回は、3)表の作り方 結合編_表のセルを結合について紹介します。
■
その他の表の作り方各種項目 1) 基本編 - 表の枠組みを作成
2) サイズ編 - 表のセルサイズ変更
3) 結合編 - 表のセルを結合
4) 位置編 - 文字列及び表の位置変更
5) 装飾編 - 表のセル及び枠線を装飾します
6) サンプル編 - 表のサンプルを紹介します
