WordPressの表作成ならExcel Onlineがオススメ

いつもWordpressの文章は、テキストエディタで作っています。一方で、表はExcel Onlineを使っています。(不要な情報がない)キレイなtableタグをコピー&ペーストできるので便利です。

WordPressの表の作り方

Excel Onlineで表を作成

WordPressに貼り付け

あとは、Wordpressのエディタ部分に貼り付けるだけです。簡単ですね。

完成した様子

このような表です。

列名1列名2
行1テストテスト
行2テストテスト
行3テストテスト

HTMLソースを確認すると、きれいなHTMLソースである事が確認できます。

HTML
<table>
<tbody>
<tr>
<td></td>
<td>列名1</td>
<td>列名2</td>
</tr>
<tr>
<td>行1</td>
<td>テスト</td>
<td>テスト</td>
</tr>
<tr>
<td>行2</td>
<td>テスト</td>
<td>テスト</td>
</tr>
<tr>
<td>行3</td>
<td>テスト</td>
<td>テスト</td>
</tr>
</tbody>
</table>

WordPressの表の列幅を調整したい

一列目の列幅を狭くしたい、この調整を行います。

完成した表(例)

列名1列名2
行1テストテスト
行2テストテスト
行3テストテスト

table-layoutプロパティで列幅調整

列幅を修正するには、table-layoutプロパティを使うと便利です。

一列目だけ幅を指定して、他の列幅は均等に割り当てます。

table-layoutプロパティに「fixed」を指定する場合には、必要に応じて各列(セル)の幅を指定しますが、幅が指定されていない列には残りの幅が均等に割り当てられます。
参考:table-layout-スタイルシートリファレンス

HTML
<table style="table-layout: fixed;">
<tbody>
<tr>
<td style="width: 60px;"></td>
<td>列名1</td>
<td>列名2</td>
</tr>
<tr>
<td>行1</td>
<td>テスト</td>
<td>テスト</td>
</tr>
<tr>
<td>行2</td>
<td>テスト</td>
<td>テスト</td>
</tr>
<tr>
<td>行3</td>
<td>テスト</td>
<td>テスト</td>
</tr>
</tbody>
</table>

 

以上が、Wordpressの表作成方法のご紹介でした。