【HTMLコピペ テンプレ付き】Wix で表を作成する8つの方法（2025年最新）
- 日向 凛
- 2021年8月18日
- 読了時間: 6分
更新日：3月11日
Wix の弱点の一つに、表を作りづらいことがあげられます。
ここでは、Wix アプリ「テーブルマスター」ではちょっと…というときに使える表の作成方法をご紹介します。
ツール選定のポイント：
セル結合ができるのは、ボックス、HTML、Google スプレッドシート。
セルにリンクができないのは、画像とブログ。
Wix で表を作る3つの方法
Wix アプリ「テーブルマスター」で表を作る
Wix 公式のアプリ「テーブルマスター」を使うと、簡単な表を作成できます。
残念ながら、Wix パートナー界隈ではあまり使われていません。
Wix アプリ「テーブルマスター」のメリット
Wix 公式のアプリなので、Wix のサポートを受けることができる
難しい知識なしで表組みが作成できる
Wix アプリ「テーブルマスター」のデメリット
行や列の追加および削除、セルの結合ができない
一行目が強制的に見出しになる
セルの余白を調整できない
表示がやや重い
表の枠線が一部表示されないことがある
YouTube
【表作成】Wixエディタでテーブルマスターアプリを使って表組みを作成する方法
Wix エディタ「リピーター」で表を作る ★おすすめ
Wixエディタの画面左メニュー［＋パーツを追加］→［リスト］にある［空白のリピーター］を使って、表のように見せることができます。
リピーター上にテキストを配置し、行を複製して表のように作成することができます。
縦の枠線は、［装飾］→［ライン］で線を配置します。ズレないように気をつけましょう。
デザイン次第では一般的な表組み以上に美しく見せることもできます。
「リピーター」のメリット
テーブルマスターの代替として一番使いやすい
複製で簡単に行を増やせる
「リピーター」のデメリット
コンテンツのボリュームにばらつきがあると表示を整えにくくなる
表示が少し重い
縦の枠線を実装しづらい
Wix エディタ「ボックス」で表を作る
Wixエディタの画面左メニュー［＋パーツを追加］→［ボックス］を使って、表のように見せることができます。ボックスをセルの1つとして、コツコツ並べて作成します。
「ボックス」のメリット
色・サイズ・テキストともに自由度が高い。
「ボックス」のデメリット
ズレやすい
レイアウト工数が大変
ソース的にどのような意味をなしているかが不明
Wix エディタ CMS連携「テーブル」で表を作る
あらかじめ、CMSでコンテンツコレクションを作成しておきます。
Wixエディタの画面左メニュー［＋パーツを追加］→［リスト］にある［テーブル］を配置し、CMSに接続して表を表示させます。
CMS連携「テーブル」のメリット
ボリュームがあるデータベースもCMS連携させるだけで簡単
CMS連携「テーブル」のデメリット
セルの結合ができない
ちょっとした表には工数が多くて不向き
Wix エディタ「埋め込み」HTMLで表を作る
セル結合もレスポンシブにもできるため、筆者がもっとも気に入っている作り方です。
Wixエディタの画面左メニュー［＋パーツを追加］→［埋め込みコード］にある［HTML埋め込み］を使って、表を表示させます。
ただ、これには iframe の埋め込みコードが使われていて、セキュリティの観点からセルの中のテキストを検索エンジンに拾ってもらえない仕様になっています。
これさえなければ、表作成はHTML埋め込み一択なのですが…辛いところです。
HTMLの作成には、Excelの表を貼り付けてコードを生成できるHTMLジェネレータなどを利用すると便利です。
「HTML埋め込み」ーのメリット
レスポンシブにできる
セルの結合のある複雑な表組みも実装できる
「HTML埋め込み」のデメリット
セルの中のテキストを検索エンジンに拾ってもらえない（残念…）
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 エディタ「埋め込み」で Excel の表を反映させる
Excelで作成した表を Wix に埋め込むには、Google スプレッドシートと［HTML埋め込み］を使います。手順は下記になります。
Google スプレッドシートにExcelの表をインポート、もしくはコピペで貼り付け
Wix エディタに［HTML埋め込み］を配置
Google スプレッドシートの共有リンクか埋め込みコードを貼り付けて表示させる
［HTML埋め込み］は、Wixエディタの画面左メニュー［＋パーツを追加］→［埋め込みコード］にある［HTML埋め込み］をクリックします。
Google スプレッドシートのコード取得は、Google スプレッドシートメニューの［ファイル］→［共有］→［ウェブに公開］→［ファイル］→リンクか埋め込みをタブで選択しコードをコピーします。共有リンクの方がうまく表示されます（2025年2月時点）。
メリット・デメリットは「Wix エディタ「埋め込み」で表を作る」と同じです。
Wix ブログで表を作る
ブログ記事作成画面で［追加］→［表］をクリックすると、記事中に表が挿入されます。
行や列の追加・削除はできますが、セルの結合はできないようです（2025年2月時点）。
ちょっとまだセルへの日本語入力がうまくできません。
こういう場合は、テキストエディタで文章を作成しコピーして貼りつけましょう。
ビジュアル重視！画像で表を作る
最終手段です。思い通りの美しい表を作成したい場合は、画像で作成して貼りつけます。
SEOの効果は望めませんが、イメージ通りのビジュアルにすることはできます。
デスクトップ用とモバイル用の2通りを作成して、スマートフォンでも見やすい表にしましょう。
まとめ
Wix 含めCMSでの表組み実装はなかなか難しいです。
HTML埋め込みが一番自由度が高いですが、SEO的に残念。
こうなると、コンテンツを「本当に表組みにする必要があるのか？」を検討することも必要かも知れません。別の見せ方があるなら、無理して表組みにしなくてもいいですね。
以上、どうぞご参考ください。
作業代行は、弊社の Wix 制作チームまでご依頼ください。
Commentaires