Cocoon

WordPressで表を簡単に作成する方法

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