【HTMLコピペ テンプレ付き】Wix エディタで表組みを作成する3つの方法
Wix エディタの弱点の一つに、表組みが思ったように作りづらいことがあります。
「テーブルマスター」という Wix アプリはあるのですが、行の挿入や削除ができなかったり、セルの結合ができなかったりと悩ましい点がいくつかあります。
そこで、Wix で表を作成する方法を3つご紹介します。
Wix エディタで表を作る3つの方法
Wix アプリ「テーブルマスター」で表を作る
Wix 公式のアプリ「テーブルマスター」を使うと、手軽に表を作成できます。
ただしいくつかの弱点があるので、注意が必要です。
Wix アプリ「テーブルマスター」のメリット
Wix 公式のアプリなので、Wix のサポートを受けることができる
難しい知識なしで表組みが作成できる
Wix アプリ「テーブルマスター」のデメリット
行や列の追加および削除、セルの結合ができない
一行目が強制的に見出しになる
セルの余白を調整できない
表示がやや重い
Wix エディタ「リスト＆グリッド」で表を作る
Wixエディタの［追加］をクリックすると、ストリップ・テキスト・画像とメニューが出てきます。その中の［リスト＆グリッド］にある［リピーター］もしくは［テーブル］を使うことで、表のように見せることができます。
リピーターでは、行を複製して増やすことで表のように使うことができます。
縦の枠線をつけることは難しいですが、デザイン次第では表組み以上に美しく見せることもできます。
「リピーター」ーのメリット
テーブルマスターの代替として一番使いやすい
複製で簡単に行を増やせる
「リピーター」のデメリット
コンテンツのボリュームにばらつきがあると表示を整えにくくなる
表示がやや重い
縦の枠線を実装しづらい
テーブルでは、データベースと接続して使います。高度な作業になるため、状況に応じての使い分けが必要です。
Wix エディタ「埋め込み」で表を作る
初歩的なHTMLとCSSを使えるなら、この方法も実はおすすめです。
HTMLの作成には、Excelの表を貼り付けてコードを生成できるHTMLジェネレータなどを利用すると便利です。
「HTML埋め込み」ーのメリット
レスポンシブにできる
セルの結合のある複雑な表組みも実装できる
「HTML埋め込み」のデメリット
HTMLとCSSの知識が必要
Wixのウェブフォントが使えない
セルのサイズは余白（padding）で自動調整させるイメージです。
幅はpxではなく%で指定することで、画面幅に応じて自動的に調整されます。
以下のコードを［ウィジェットの埋め込み］を使ってエディタ上に貼り付け、書き換えてお使いください。
=== 以下コピペ ===
<style>
table , td {
border: 1px solid #595959;
border-collapse: collapse;
}
table {
width: 100%;
}
td {
padding: 8px;
}
</style>
<table>
<tr>
<td>セル１</td>
<td>セル２</td>
<td>セル３</td>
<td>セル４</td>
</tr>
<tr>
<td>セル５</td>
<td>セル６</td>
<td>セル７</td>
<td>セル８</td>
</tr>
<tr>
<td>セル９</td>
<td>セル１０</td>
<td>セル１１</td>
<td>セル１２</td>
</tr>
</table>
=== ここまで ===
まとめ
Wix以外のCMSも表組み機能の実装には苦戦しているようで、結局はHTMLが一番自由度が高そうです。
そもそも、会社概要や製品紹介などのコンテンツを「本当に表組みにする必要があるのか？」を検討し、別の魅力的な見せ方があるなら、無理して表組みにしなくてもいいのかもしれません。
以上、どうぞご参考ください。