
こんにちわ。WordPressでブログを運営しているヒロユキと申します。
WordPressにテーブルを挿入したいことはよくあるのですが、 WordPress標準のエディタを使用するとすべてのセルを手入力しなければいけません。
簡単な表であれば、標準エディタで問題ないのですが大きな表を書くときには面倒です。
Excelを使用して表を作れば、オートフィルや関数を使用することができます。作成時間を省略することが出来るのでおすすめです。
Excelで書く→ Excel からHTMLに変換→HTMLをWordPressに貼る
上記手順について記載します。
結合やタグを使用しないのであればコピペで良い
まずExcelで結合やタグを使用しない場合ですが、 Excel 上で表をコピーして WordPress にそのままペーストすればOKです。
校正も兼ねてWordで文章を作成している方も多いかと思いますが、 Word で表を作成してコピペでもOKです。
”タグを使用する”とは、下記のようにセル内にHTMLタグを使う場合です。

今回の例では、「いちご」という文字を強調するためにBタグを使用しています。
画像を表に入れる場合は、IMGタグを使用することになるので、タグを使用する場合はかなり多いです。
WordPress に直接コピペすると、タグが文字として表示されてしまいます。またセルの結合が引き継がれずに、表が崩れています。

そのため、 結合やタグを使用する場合は手直しが必要となってしまいます。
結合やタグを使用する場合
結合やタグを使う場合ですが、手直不要な方法がわからなかったので、VBAマクロに頼ることにしました。
手順としては、前述したとおり以下のとおりです。
- Excelで書く
- ExcelからHTMLに変換
- HTMLをWordPressに貼る
手順2の「ExcelからHTMLに変換」をVBAマクロで実施することにしました。
例として、以下のような画像付き表をEXCELを利用して素早く作る方法を記載します。
項目 | 画像 | 種類 | 値段 |
---|---|---|---|
いちご | ![]() | 果物 | 100 |
みかん | ![]() | 200 | |
キャベツ | ![]() | 野菜 | 300 |
手順1.Excelで書く
Excelでテーブルにしたい内容を表にします。
以下のように、タグを使用して画像などを指定します。

画像のURLはWordPressでメディアを開いて確認します。

そのURLを使用してIMGタグを作成します。
<img src="https://gomi.slavesystems.com/wp-content/uploads/2020/02/image-6.png" width="128" height="128" >
手順2. ExcelからHTMLに変換
EXCELの表データ(TSV)をHTML形式に変換します。
変換は、下記の変換サイトが一番お手軽だと思います。
https://ao-system.net/exceltable/
上記サイトは非常に便利で私もよく使用しているのですが
- 1列目が<TH>にならない
- タグがエスケープされて普通の文字で出力されてしまう
という点が自分のやり方と合わないということがあったので、自分でマクロを組んでHTMLを出力できるようにしました。
そのマクロが入ったEXCELファイルが以下です。
ソースは以下のようになります。
Function HTMLTABLE(r As Range, _
Optional alignment As Boolean = False, _
Optional tableOption As String = "", _
Optional trOption As String = "", _
Optional thOption As String = "", _
Optional tdOption As String = "") As String
Dim ret As String
Dim row As Long
Dim column As Integer
Dim c As Object
Dim colspan As String
Dim rowspan As String
Dim align As String
Dim valign As String
Dim tableTag As String
Dim trTag As String
Dim thTag As String
Dim tdTag As String
If tableOption <> "" Then
tableTag = "<table " & tableOption & ">"
Else
tableTag = "<table>"
End If
If trOption <> "" Then
trTag = "<tr " & trOption & ">"
Else
trTag = "<tr>"
End If
If thOption <> "" Then
thTag = "<th " & thOption
Else
thTag = "<th"
End If
If tdOption <> "" Then
tdTag = "<td " & tdOption
Else
tdTag = "<td"
End If
ret = tableTag
For row = 1 To r.Rows.Count
ret = ret & trTag
For column = 1 To r.Columns.Count
Set c = r.Item(row, column)
If (c.MergeCells And c.Address = c.MergeArea.Item(1).Address) Or Not c.MergeCells Then
colspan = ""
rowspan = ""
If c.MergeCells And c.MergeArea.Columns.Count > 1 Then
colspan = " colspan=" & c.MergeArea.Columns.Count & " "
End If
If c.MergeCells And c.MergeArea.Rows.Count > 1 Then
rowspan = " rowspan=" & c.MergeArea.Rows.Count & " "
End If
align = ""
valign = ""
If alignment Then
Select Case Range(c.Address).HorizontalAlignment
Case xlLeft
align = " align = ""left"" "
Case xlCenter
align = " align = ""center"" "
Case xlRight
align = " align = ""right"" "
Case xlJustify
align = " align = ""justify"" "
Case Else
End Select
Select Case Range(c.Address).VerticalAlignment
Case xlTop
valign = " valign = ""top"" "
Case xlCenter
valign = " valign = ""middle"" "
Case xlBottom
valign = " valign = ""bottom"" "
Case Else
End Select
End If
If row = 1 Then
ret = ret & thTag & colspan & rowspan & align & valign & ">" & c.Value & "</th>"
Else
ret = ret & tdTag & colspan & rowspan & align & valign & ">" & c.Value & "</td>"
End If
End If
Next column
ret = ret & "</tr>"
Next row
ret = ret & "</table>"
HTMLTABLE = ret
End Function
使い方
HTMLTABLEという自作関数を作成しています。その関数の引数に、HTML化したい表の範囲を渡すとHTMLコードが作成されます。

手順3. HTMLをWordPressに貼る
手順2のHTMLTABLE関数でHTMLコードを作成したら、それをWordPressのエディタに貼り付けます。
ただ、そのまま貼り付けてしまうとタグが文字として認識されてしまうので、カスタムHTMLを使用します。
1.フォーマットの中にある「カスタムHTML」を選択

2.HTMLタグにソースをコピペする

以上です。