当メディアのリンクにはアフィリエイト広告が含まれています

WORDPRESSでの表の作り方

WordPress

WordPressでの表の作り方を忘備録的に書いておきます。

プラグインを使って一発ってやり方もあるらしいのですが、あまりプラグインを入れるということが好きではないので初心者ながら勉強しました。

表の作り方

テーブルについては、「table」を使用します。

<table border="3">
<tr>
<th>見出し1</th>
<th>見出し2</th>
<th>見出し3</th>
</tr>
<tr>
<td>データ1-1</td>
<td>データ2-1</td>
<td>データ3-1</td>
</tr>
<tr>
<td>データ1-2</td>
<td>データ2-2</td>
<td>データ3-2</td>
</tr>
</table>

 

見出し1 見出し2 見出し3
データ1-1 データ2-1 データ3-1
データ1-2 データ2-2 データ3-2

となります。

これを繰り返すのですが、単純に左から右に上から書いていくことになりすね。

<tr></tr>で横にデータを書いていく、そんな感じです。

結合について

では今度はセルを結合させるやり方です。

結合も横方向と縦方向がありますよね

縦方向の結合

 

<table border="3">
<tr>
<td rowspan="3">垂直方向の結合</td>
<td>データ1</td>
</tr>
<tr>
<td>データ2</td>
</tr>
<tr>
<td>データ3</td>
</tr>
</table>
垂直方向の結合 データ1
データ2
データ3

こんな感じですね。<rowspan=”セル数”>と言うかたちで結合されます。

横方向の結合

<table border="3">
<tr>
<td colspan="3">水平方向の結合</td>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
<td>データ3</td>
</tr>
</table>
水平方向の結合
データ1 データ2 データ3

こちらは<colspan=”セル数”>ということになります。

最後に

簡単にまとめたので、結構あっさりまとめてしまいました。

こういう書き方をするときは、表の下書きを作ってした方がいいかもしれませんね。

表に色を付けたりするのも、あるとは思いますが今の自分にはこの表で十分なのでまた必要に迫られたら勉強します。

コメント