SWELLで表の作り方を解説|縦横中央に配置する方法もわかりやすく紹介

swellで表(テーブル)を作る方法|表の中の縦横中央配置も解説
♀ asa-create
現役フリーランスweb・ECデザイナー6年目突入。
クライアントワークで得た実務に使える知識やデザイン制作、副業のノウハウを実体験ベースで発信。
cliant work / illustrator・photoshop
AI / adobe firefly・Midjouney・Canva

私のブログはSWELLを利用して作成しているのですが、頻繁に表(テーブル)を使うので、まずは基本を皆様にご紹介いたします。

特に、表の中のテキストを垂直・平行どちらも中央配置にしたいって方はぜひ、参考にしてみてくださいね。

この記事でわかること
  • 表(テーブル)の基本的な作成方法
  • 表の中のテキストの配置を垂直・平行(縦横)中央配置にしたい
  • 表(テーブル)のヘッダーの色を変更したい

SWELLで表を作成する方法|縦横中央にテキストを配置する手順を解説

目次

SWELLで表(テーブル)を作る手順

比較表や料金表など、表(テーブル)を作成したい機会は多いと思います。
早速、表を作成していきましょう。

asa

下記の内容を見た上で、省く箇所があれば、省略してくださいね。

STEP
表を下記の位置に入れていきたいと思います
SWELLで表作成|この位置にテーブルを作る
SWELLで表作成|この位置にテーブルを作る
STEP
右側にプラスマークが出てくるので、プラスをクリック
SWELLで表作成|右側にプラスマークがあるので、クリック
SWELLで表作成|右側にプラスマークがあるので、クリック
STEP
プラスマークを押すと右側にブロックエディター出現

ここに【テーブル】がある場合は、テーブルをクリック。
テーブルがない時は「すべてを表示」をクリックする。

SWELLで表作成|プラスマークを押すと右側にブロックエディターが出現する
SWELLで表作成|プラスマークを押すと右側にブロックエディターが出現する
STEP
すべて表示をクリックすると左側にさらにブロックエディターが出現
SWELLで表作成|左側にブロックエディターが表示される
SWELLで表作成|左側にブロックエディターが表示される
STEP
テーブルをクリック
SWELLで表作成|下の方までスクロールすると【テーブル】が出てくるよ
SWELLで表作成|下の方までスクロールすると【テーブル】が出てくるよ
STEP
作りたい表のカラム数、行数を入力します

カラム数=横に何個作るか。
行数=縦に何個作るか。
と考えると、いいです!

SWELLで表作成|表のカラム数と行数を作りたい表の数にする
SWELLで表作成|表のカラム数と行数を作りたい表の数にする

5カラム、3行の表が作成される

SWELLで表作成|5カラム、3行の表が完成
SWELLで表作成|5カラム、3行の表が完成
STEP
カラム数を5、行数を3に設定

ヘッダー(色付き帯)を追加したいので、行数を減らして作成する

本来は、縦列(行数)を4行にしたいですが、ヘッダー(色付き帯)を作りたいので4行ではなく、3行にしてます。

SWELLで表作成|今回は5カラムの3行にして、ヘッダーセクションを追加する
SWELLで表作成|今回は5カラムの3行にして、ヘッダーセクションを追加する
STEP
【ヘッダーセクション】を押すと、ヘッダー(色付きの帯)が追加される
SWELLで表作成|本来は4行作成したかったので、ヘッダーセクションを追加して、4行にしました
SWELLで表作成|本来は4行作成したかったので、ヘッダーセクションを追加して、4行にしました
STEP
ヘッダーの色を変えたい時は、ヘッダーカラーから選択

ヘッダー(色付き帯)の色を変更する方法

SWELLで表作成|ヘッダーカラーを変える時は右側のテーブルヘッダー設定の色を変更すれば変わります
SWELLで表作成|ヘッダーカラーを変える時は右側のテーブルヘッダー設定の色を変更すれば変わります
STEP
表の中にテキストを入れていく
SWELLで表作成|表に内容を入れていきます
SWELLで表作成|表に内容を入れていきます
STEP
表のカラム数(横の数)が多い時は、【横スクロール】を押せば、見やすくなります
SWELLで表作成|表の項目が長い時は横スクロールの指定もできます
SWELLで表作成|表の項目が長い時は横スクロールの指定もできます
asa

下記からの内容がこの記事で一番伝えたい箇所になります!

STEP
下記のように表の中が揃ってなくて見づらい時は【テーブル全体の中央揃え】を垂直・平行に設定する
SWELLで表作成【重要】表の中が整理されていなくて見づらい!そんな時は【テーブル全体の中央揃え】をする
SWELLで表作成【重要】表の中が整理されていなくて見づらい!そんな時は【テーブル全体の中央揃え】をする

【重要】テーブル全体の中央揃えをすると、見た目がスッキリする

SWELLで表作成|Before
SWELLで表作成|Before
SWELLで表作成|After
SWELLで表作成|After

ここまでで、表が無事に完成です。

まだまだ背景色を変更したり、背景にアイコンを入れたり、できることがたくさんあるので、今回は基本として抑えておいてくださいね◎

swellで表(テーブル)を作る方法|表の中の縦横中央配置も解説

この記事が気に入ったら
フォローしてね!

目次