WordPressで表を簡単に作成する方法
WordPressで表を作る方法は2種類あります。
- WordPressのプラグインを入れる
- HTMLで表を作る
初心者にはプラグインの方が簡単なイメージがあるかもしれませんが、実はHTMLで表を作るのは凄く簡単です。なぜならシンプルな表であればコピーして使うだけで十分だからです。
本記事では、コピーして簡単に表が作れるHTMLを紹介します。
スポンサーリンク

コピーしたHTMLはWordPressのテキストエディタに張り付けるだけで表が完成します。
2列の表を作るHTMLサンプル
タイトル | 説明 |
タイトルA | タイトルAの説明 |
タイトルB | タイトルBの説明 |
タイトルC | タイトルCの説明 |
上記の2列の表を作るHTMLは以下の通り。
行を増やしたい場合は、<tr>タグ(赤字の部分)を増やすと行が増えます。
<table>
<tbody>
<tr style="background-color: #f2f2f2; text-align: center;">
<td>タイトル</td>
<td>説明</td>
</tr>
<tr>
<td>タイトルA</td>
<td>タイトルAの説明</td>
</tr>
<tr>
<td>タイトルB</td>
<td>タイトルBの説明</td>
</tr>
<tr>
<td>タイトルC</td>
<td>タイトルCの説明</td>
</tr>
</tbody>
</table>
3列の表を作るHTMLサンプル
タイトル | 説明 | 補足 |
タイトルA | タイトルAの説明 | タイトルAの補足 |
タイトルB | タイトルBの説明 | タイトルBの補足 |
タイトルC | タイトルCの説明 | タイトルCの補足 |
上記の3列の表を作るHTMLは以下の通り。2列の表との違いは赤字になっている個所です。
列を増やしたい場合は<td>タグを増やすと列が増えます。
<table> <tbody> <tr style="background-color: #f2f2f2; text-align: center;"> <td>タイトル</td> <td>説明</td> <td>補足</td> </tr> <tr> <td>タイトルA</td> <td>タイトルAの説明</td> <td>タイトルAの補足</td> </tr> <tr> <td>タイトルB</td> <td>タイトルBの説明</td> <td>タイトルBの補足</td> </tr> <tr> <td>タイトルC</td> <td>タイトルCの説明</td> <td>タイトルCの補足</td> </tr> </tbody> </table>
上と左にタイトルがある表のHTMLサンプル
住所 | 従業員 | 就業時間 | |
Aサンプル会社 | 神奈川県横浜市 | 1,000人 | 9:00 - 18:00 |
Bサンプル会社 | 東京都世田谷区 | 500人 | 9:30 - 17:45 |
上記の表を作るHTMLは以下の通り。
<table> <tbody> <tr style="background-color: #f2f2f2; text-align: center;"> <td></td> <td>住所</td> <td>従業員</td> <td>就業時間</td> </tr> <tr> <td style="background-color: #f2f2f2; text-align: center;">Aサンプル会社</td> <td>神奈川県横浜市</td> <td>1,000人</td> <td>9:00 - 18:00</td> </tr> <tr> <td style="background-color: #f2f2f2; text-align: center;">Bサンプル会社</td> <td>東京都世田谷区</td> <td>500人</td> <td>9:30 - 17:45</td> </tr> </tbody> </table>
終わりに
本記事ではWordPressで簡単に表が作れるHTMLのサンプルを紹介しました。シンプルな表であればコピーして使えるので、プラグインを使うより簡単かもしれません。

最後まで読んでいただきありがとうございました。
本記事で紹介しているHTMLはご自由にお使いください。
helpful
この記事は役に立ちましたか?