wordpress５のテーブルブロックは正直、デザイン性にも欠け、見づらい。個人的にはダサく感じます。本日紹介するHTMLコードでテーブルを作れば、枠線なしのストライプ式のシンプルなデザインが使えるようになります！
このコードを使えば、” WordPressのテーブルブロックも不要！プラグインも不要！CSSも不要！”で簡単に見やすく綺麗なテーブルが表示されます！私のブログでも大活躍中です♪
デザインは読者を惹きつけるために大事なことです。本日のコードを自分のサイトに使用し、シンプルかつきれいなデザインで読者さんを釘付けにしましょう！
（結論）WordPress/枠線なし！きれいなテーブルのHTMLコード
ストライプ型のきれいなテーブルを作れるHTMLコードがこちらです！
<table class="wp-block-table is-style-stripes">
<tbody>
<tr><td>項目①</td><td>概要①</td></tr>
<tr><td>項目②</td><td>概要②</td></tr>
<tr><td>項目③</td><td>概要③</td></tr>
<tr><td>項目④</td><td>概要④</td></tr>
<tr><td>項目⑤</td><td>概要⑤</td></tr>
<tr><td>項目⑥</td><td>概要⑥</td></tr>
</tbody>
</table>
こちらのコードを使ってテーブルを作ると以下のように表示されます。
| 項目① | 概要① |
| 項目② | 概要② |
| 項目③ | 概要③ |
| 項目④ | 概要④ |
| 項目⑤ | 概要⑤ |
| 項目⑥ | 概要⑥ |
灰色（グレー）と白色が交互にくるストライプのテーブルが完成します。シンプルだけど、すごく見やすくなります^^これにあたって、プラグイン・CSSコードの利用は一切不要！項目にはそれぞれのテーマ（名前）を概要にはテーマの説明を入れてあげましょう。
行を増やしたい場合
「行を増やす＝下に項目と概要を増やす」と思ってください。これは先ほどのコードの6項目目より下に「<tr><td>項目ｘ</td><td>概要ｘ</td></tr>（ｘ>6）」延々に足していけばできます。
追加コード（行）
<td>項目ｘ</td><td>概要ｘ</td></tr>
実際に項目ｘと概要ｘを加えたコードがこちらです！
<table class="wp-block-table is-style-stripes">
<tbody>
<tr><td>項目①</td><td>概要①</td></tr>
<tr><td>項目②</td><td>概要②</td></tr>
<tr><td>項目③</td><td>概要③</td></tr>
<tr><td>項目④</td><td>概要④</td></tr>
<tr><td>項目⑤</td><td>概要⑤</td></tr>
<tr><td>項目⑥</td><td>概要⑥</td></tr>
<tr><td>項目x</td><td>概要x</td></tr> ←追加分‼
</tbody>
</table>
で、ｘを加えてできたテーブル（表）がこちら。
| 項目① | 概要① |
| 項目② | 概要② |
| 項目③ | 概要③ |
| 項目④ | 概要④ |
| 項目⑤ | 概要⑤ |
| 項目⑥ | 概要⑥ |
| 項目x | 概要x |
下に表を伸ばしたい場合は、<tr><td>項目x</td><td>概要x</td></tr> のコードをどんどん追加していきましょう♪
列を増やしたい場合
「列を増やす＝右に概要を増やしていく」ということです。これは「概要①</td>」の右隣に「<td>補足①</td>」のコードを足していきましょう。下の②～⑥も同様にすれば、同じようにできます。
追加コード（列）
<td>補足①</td>
概要①の隣に補足①を加えたものが以下のコードです。
<table class="wp-block-table is-style-stripes">
<tbody>
<tr><td>項目①</td><td>概要①</td><td>補足①</td></tr>
<tr><td>項目②</td><td>概要②</td></tr>
<tr><td>項目③</td><td>概要③</td></tr>
<tr><td>項目④</td><td>概要④</td></tr>
<tr><td>項目⑤</td><td>概要⑤</td></tr>
<tr><td>項目⑥</td><td>概要⑥</td></tr>
</tbody>
</table>
で、補足①を加えてできるテーブル（表）がこちらです。
| 項目① | 概要① | 補足① |
| 項目② | 概要② | |
| 項目③ | 概要③ | |
| 項目④ | 概要④ | |
| 項目⑤ | 概要⑤ | |
| 項目⑥ | 概要⑥ |
2行目、3行目も1行目と同様に「<td>テキスト（補足①）</td>」を加えていけば、列はどんどん増やせるのでやってみましょう。
ちなみにコピーしたら、WordPressカスタムHTMLコードに貼り付けましょう。ちなみにブロックは以下の2パターンで出ます。
WordPress５に更新されている方は編集の左上の方に「＋」のマークがあると思うのでそこからカスタムHTMLを選択しましょう。
また、以下の画像のように必ず出てくるバーの中からHTMLの編集も可能です。
見やすい表を作って、見やすいブログを心がけましょう^^
そのままワードプレスのブロックを使ったらどうなるか
文頭でも申し上げましたが、WordPress５のテーブルブロックで作るブロック（表）はあまりいいものではありません。
上の画像を見たら分かると思いますが、すごく” 固い ” 感じがします。柔さや美しさに欠けるかなと…
一方、本日紹介したコードでブログを書けば以下のようになります。
柔さが加わり、見やすくもなりました。私はグルメ記事も書くのでこのぐらいのデザインの方がしっくりきます。実際どう表示されているか見たい方はこれらがあるページを良かったらご覧ください。
＜WordPressテーブルブロックで作った表＞
『元祖赤のれん 節ちゃんラーメン 本店』 福岡市天神の人気ラーメン店
＜本日お伝えしたHTMLコードで作った表＞
お持ち帰り対応中！『博多もつ鍋 おおやま』のお得なランチを頂く！
枠線無し×ストライプテーブルであなたのブログも見やすくしよう！
このコードを使うことのメリットは３つです！
✓WordPressテーブルブロックを使う必要がない！
✓WordPressプラグインなしできれいにできる！
✓CSSを使う必要もない！
以下のコードはもちろんコピペ可です！
<table class="wp-block-table is-style-stripes">
<tbody>
<tr><td>項目①</td><td>概要①</td></tr>
<tr><td>項目②</td><td>概要②</td></tr>
<tr><td>項目③</td><td>概要③</td></tr>
<tr><td>項目④</td><td>概要④</td></tr>
<tr><td>項目⑤</td><td>概要⑤</td></tr>
<tr><td>項目⑥</td><td>概要⑥</td></tr>
</tbody>
</table>
変に彩ることなく、シンプルなものなので度のブログ（サイト）にもマッチするでしょう！私はグルメ記事には毎回使っており、これを使うことで被リンク率もかなり上がっております！
私もワードプレスでグルメブログやってるー！って方は使うことをおすすめします。また、グルメブログやレビュー記事を書いている方は以下の記事は参考になると思うのでぜひ併せてご覧ください。
>>【テンプレ】初心者必見！読まれるグルメブログの書き方
見やすさをアップさせて、アクセスをどんどん伸ばして自己実現を果たしましょう‼^^
コメント