【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のウェブフォントが使えない
![Wixエディタ[ウィジェットの埋め込み]を追加](https://static.wixstatic.com/media/ef2e0b_25175161c5d34030adfe6bf37a132da9~mv2.jpg/v1/fill/w_980,h_613,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/ef2e0b_25175161c5d34030adfe6bf37a132da9~mv2.jpg)


セルのサイズは余白(padding)で自動調整させるイメージです。
幅はpxではなく%で指定することで、画面幅に応じて自動的に調整されます。
以下のコードを[ウィジェットの埋め込み]を使ってエディタ上に貼り付け、書き換えてお使いください。
=== 以下コピペ ===
<style>
table , td {
border: 1px solid #595959;
border-collapse: collapse;
}
table {
width: 100%;
}
td {
padding: 8px;
}
</style>
<table>
<tr>
<td>セル1</td>
<td>セル2</td>
<td>セル3</td>
<td>セル4</td>
</tr>
<tr>
<td>セル5</td>
<td>セル6</td>
<td>セル7</td>
<td>セル8</td>
</tr>
<tr>
<td>セル9</td>
<td>セル10</td>
<td>セル11</td>
<td>セル12</td>
</tr>
</table>
=== ここまで ===
まとめ
Wix以外のCMSも表組み機能の実装には苦戦しているようで、結局はHTMLが一番自由度が高そうです。
そもそも、会社概要や製品紹介などのコンテンツを「本当に表組みにする必要があるのか?」を検討し、別の魅力的な見せ方があるなら、無理して表組みにしなくてもいいのかもしれません。
以上、どうぞご参考ください。