レスポンシブに対応した綺麗なテーブルを作るコツと修正方法

ワードプレスでは、ビジュアルエディタから簡単にテーブルを作成できますが、いろいろと弱点もあり、モバイル端末で見た際、間延びしていたりはみ出していたりと、きれいに表示するのは難しいですよね。

今回はワードプレスでレスポンシブ対応のテーブルをレイアウトが崩れないように作るコツを、我流ですが、説明していきます。

レイアウトが乱れる原因
テーブル作成の前提
レスポンシブテーブルの前提
- テーブル全体の幅の設定
ビジュアルエディタで表を作る
エクセルで作った表を貼り付けた場合
既存のテーブルを修正したい
テーブルをよく使うなら

レイアウトが乱れる原因

昔から「ホームページビルダー」などのツールを使ったHTML生成は、勝手なコードが追加されるので好きではないですが、ワードプレスのビジュアルエディタもそういった点で使いにくい事があります。

テーブル操作では特に、

ちょっと枠線に触れただけで幅を指定するコードが追加されてしまい、レスポンシブどころかひどいレイアウトに！！

行数の長いテーブルであれば、すべての行・すべてのセルに幅指定タグが入ってしまい、修正するのがイヤになってしまったり。

レイアウトがうまくいかない原因は、幅指定のコードが自動挿入されてしまう為です。

思い通りのレイアウトで新規作成する方法と、既にひどいレイアウトになってしまったテーブルの修正方法、更にエクセルから貼り付けた場合の修正方法も、基本的には同様です。

テーブル全体枠は100%にする

セル単位の幅指定は１行目だけに行う

セルの幅指定はピクセルで行わず％で設定する

テーブル作成の前提

そもそもの前提として、テーブルのレイアウトに無理があるものは作らない事！

今やスマホで見られる事の方が多いという意識を持ち、スマホでも見やすい程度のテーブルレイアウトを考えて作りましょう。

やたらに横項目が多い、文字数が多いテーブルはどんなに成型しても見やすいものにならないので、項目を分けて２つの表にしたり、見出し列を２列にするなどの工夫も必要です。

レスポンシブテーブルの前提

テーブル全体の幅をピクセルなどで指定せず、「１００％」に設定しておくことでレスポンシブ対応になります。

但し、ワードプレスが自動で挿入してしまう各セルへの幅指定コードが残っていると、思ったようには表示されません。

テーブル全体の幅の設定

ワードプレスで作成した表は、初期値で１００％です。

　「表のプロパティ」で幅を「１００％」にする

それ以外の高さなどは空白にしておきます。

ビジュアルエディタで表を作る

注意点

列（横項目）の数は最初に決めておく
列項目に合った幅をピクセルではなく表全体の割合（％）で指定する
テーブルの枠線を動かさない！線に触れない！

テーブルの枠線に触れてしまった場合は、ツールバーの「取り消し」を押すか「Ctrl＋Z」キーでひとつ前の状態へ戻せます。

テーブル作成

まず、ツールバーからテーブルを挿入します。

最初に３行以上のテーブルを作ると、すべての行・すべてのセルに幅指定するコードが自動挿入されてしまい修正するのが大変になりますので、まずは２行だけで作り、必要な行はあとで追加します。

　複数行のテーブルを作りたい場合でも　必要な列数×２行で作る

HTMLでは以下のようになっています。

<table style="width: 100%; border-collapse: collapse;" border="1">
<tbody>
<tr>
<td style="width: 33.3333%;"></td>
<td style="width: 33.3333%;"></td>
<td style="width: 33.3333%;"></td>
</tr>
<tr>
<td style="width: 33.3333%;"></td>
<td style="width: 33.3333%;"></td>
<td style="width: 33.3333%;"></td>
</tr>
</tbody>
</table>

ビジュアルエディタからテーブルを挿入すると、初期値はテーブル全体の幅が「100%」（１行目）
各列は等分に指定コードが入ります。（４行目～　<td>タグ部）

今回は３列ですので、すべてのセルに幅指定コード（style=”width: 33.3333%;”）が入っています。

ここで幅を変えたい場合に絶対にやってはいけない事は
テーブルの枠線を動かす事です！枠線を触るのは、この後テーブル内容を編集する際にも絶対に禁止です！
ちょっとでも触れると幅指定が崩れますのでご注意下さい。

ここで作ったテーブルの１行目に、見出しを入力しておくとそれぞれにどの程度の幅が欲しいか目安になるかもしれません。

項目１　ABCDEFG	項目２　HIJ	項目３　KLMN

セル幅の変更

たとえば、1列目を50%、２列目を20%、３列目を30%にしてみます。

（作成した列数の合計が100%になるように、各セルの幅を指定します。）

ビジュアルエディタから

※ビジュアルエディタで行う方法を説明しますが、もちろんテキストエディタで直接変えても構いません。

以下のように、最初のセルにカーソルがある状態で、再びツールバーのテーブルから

　「セルのプロパティ」を開きます。

　幅のところに50%と入力します。

同様に、２列目・３列目にカーソルを置いてそれぞれプロパティで幅を指定します。

HTMLでは、以下のように変わります。

<table style="width: 100%; border-collapse: collapse;" border="1">
<tbody>
<tr>
<td style="width: 50%;"></td>
<td style="width: 20%;"></td>
<td style="width: 30%;"></td>
</tr>
<tr>
<td style="width: 33.3333%;"></td>
<td style="width: 33.3333%;"></td>
<td style="width: 33.3333%;"></td>
</tr>
</tbody>
</table>

１行目の幅を変更しても、２行目以降は最初のまま（33.3333%）です。これが全部自動で変わるようなら使えるのですが、こういう仕様なのでこれがネックです。

テキストエディタで２行目の幅指定を削除

このままで下へ行追加を行うと、それ以降の行にすべて２行目と同じ幅指定コードが入ってしまう為、残ってしまっている２行目の幅指定をテキストエディタで削除します。

これをしておくことで、幅指定されているのは１行目のみとなり、メンテナンスが楽になります。

右上の「テキスト」タブから編集できます。

修正した１行目と、修正していない２行目があります。

　この２行目の「 style=”width: 33.3333%;”」の部分をすべて削除します。

ここまで出来れば、あとは必要な行を下へ追加していきます。

　２行目のセルにカーソルを置いて「行を下に挿入」で追加します。

下へ追加した行は、その直前の行と同じコードが自動挿入されています。

２行目の幅指定は削除してあるので、３行目以降、追加した行には幅指定コードは入りません。

<table style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<td style="width: 50%;">項目１　ABCDEFG</td>
<td style="width: 20%;">項目２　HIJ</td>
<td style="width: 30%;">項目３　KLMN</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

枠線に触りさえしなければ、このまま行を増やしたり減らしたり、内容を編集したりしてもレイアウトが崩れる事はありません。

幅を修正したい

編集途中で、幅を変えたい場合には、１行目のセルプロパティで変更する事で可能です。

１行目のみのメンテナンスでいつでも自在に幅を変更できます。

装飾する

くどいようですが、文字装飾やセンタリングなどを行いたい場合も、枠線には触れないようにお気をつけください。

●列を縦に選択する事で一度に装飾可能です。

●全体を選択する事も出来ます。

エクセルで作った表を貼り付けた場合

エクセルで作った表などを、ビジュアルエディタ画面に貼り付けると簡単に表が挿入されますが、その表のサイズ、セル幅が自動で入ってしまう為、レスポンシブにならないので修正をする必要があります。

たとえば以下のような表を貼り付けた場合

HTMLソースでは以下のようになります。

<table width="446">
<tbody>
<tr>
<td width="168">見出し１</td>
<td width="139">見出し２</td>
<td width="139">見出し３</td>
</tr>
<tr>
<td>●●●</td>
<td>XXXXXX</td>
<td>XXXXXX</td>
</tr>
<tr>
<td>〇〇〇</td>
<td>XXXXXX</td>
<td>XXXXXX</td>
</tr>
....

この時点で修正してしまえば、簡単です。

テーブル全体を100%に変更

あとは１行目の幅指定を全部で100%になるよう調整

既存のテーブルを修正したい

どんなサイズのテーブルかにより、手間は違ってきますが、小さいテーブルであれば１行目だけ、幅の指定を％で行い、２行目以降の幅指定コードを１つずつ、テキストエディタで削除していくことで可能です。

行数の多いテーブルで、テキストエディタでの修正が大変な場合は、テーブルタグを丸ごとエディタ（ワードプレスのではなく、通常のエディタソフト）に貼り付けて、検索・置換を行うと、簡単に時短できます。

たとえば以下のように、行ごとに全部、幅指定がある場合

<table width="446">
<tbody>
<tr>
<td style="width: 141px;">見出し１</td>
<td style="width: 165px;">見出し２</td>
<td style="width: 139px;">見出し３</td>
</tr>
<tr>
<td style="width: 141px;">●●●</td>
<td style="width: 165px;">XXXXXX</td>
<td style="width: 139px;">XXXXXX</td>
</tr>
......

<tabel>～</table>までのタグを切り取って、エディタに貼り付け

style=”width: 141px;”　を　すべて置換

style=”width: 165px;　を　すべて置換・・パターン分繰り返し、シンプルになったコードをワードプレスのテキストエディタに貼り付ければ、かなり手間は減ります。

【例のエディタは　TeraPad】

検索・置換が出来る無料のエディタはネットにいくらでもあるので、お気に入りのものをご利用下さい。

テーブルをよく使うなら

定型文に登録

例えば以下のようなコードを定型文に登録しておけば、用途に合わせて列数の増減と、１行目の幅だけ修正すれば使えます。

<table style="width: 100%;" border="1">
<tbody>
<tr>
<td style="width: 20%;"></td>
<td style="width: 20%;"></td>
<td style="width: 20%;"></td>
<td style="width: 20%;"></td>
<td style="width: 20%;"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

テーブル装飾をCSSに

更に装飾はCSSに書いておけば便利です。

例えば、見出し部分に背景色をつける以下のようなCSSを定義しておき、

.table1 {
width: 100%;
border-collapse: collapse;
text-align: left;
line-height: 1.5;
border: 1px solid #ccc;
font-size: 13px;
}
.table1 th {
padding: 10px;
font-weight: bold;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
background: #8fd2ed;
}

定型文には定義したクラス名も入れておけば、装飾付テーブルを簡単に挿入できます。

※定型文に　class=”table1″　も追記しておく。
※見出し用の１行目のみ　<td>タグではなく<th>タグを使う。

<table style="width: 100%;" border="1" class="table1">
<tbody>
<tr>
<th style="width: 50%;"></th>
<th style="width: 50%;"></th>
</tr>
.....　略
</tbody>
</table>

その他テーブルデザインは以下も参考にして下さい。