ワードプレスのコピペで簡単!【表の作成・HTMLタグ】

Vivid Sydney
Vivid Sydney

このサイトは、WordPressテーマ「スワロー」を使っています。

→ WordPressテーマ「スワロー」

表をHTMLで作ってみます。

コピペで、簡単に表を作ることができますよ~。

table・・・表の枠 

tr・・・行

td・・・セル(データセル)

th・・・見出しセル。一般的なブラウザで太字、センター。



3行表

例えば、このような3行表。

1データ1データ2
2データ1データ2
3データ1データ2

この表を作るには、

これを コピペ ↓

<table border="2" >
<tr>
<td>1</td>
  <td>データ1</td>
  <td>データ2</td>
</tr>
<tr>
<td>2</td>
  <td>データ1</td>
  <td>データ2</td>
</tr>
<tr>
<td>3</td>
  <td>データ1</td>
  <td>データ2</td>
</tr>
</table>

↑これを、カスタムHTMLに張り付けてください。任意の文字をいれてください。

外枠の太さ指定

border=" " で外枠の太さを指定できます。

上の表の場合 border="2" の2にしています。


<table border="2" > ~ </table> の border="2" を消し
<table > ~ </table> にすると ↓ こうなります。

1データ1データ2
2データ1データ2
3データ1データ2

線が消えるはず?ですが、ワードプレス テーマ(スワロー)では、こうなりました。

すっきり綺麗に見えますね。

この表を作るのは、これを コピペ ↓

<table >
<tr>
<td>1</td>
  <td>データ1</td>
  <td>データ2</td>
</tr>
<tr>
<td>2</td>
  <td>データ1</td>
  <td>データ2</td>
</tr>
<tr>
<td>3</td>
  <td>データ1</td>
  <td>データ2</td>
</tr>
</table>

↑これを、カスタムHTMLに張り付けてください。

3行表 縦タイトル太 色付き

1データ1データ2
2データ1データ2
3データ1データ2

th は、見出しセルです。一般的なブラウザで太字、センターになるようですが、ここでは色がつきました。センターにはなっていませんね。

この表を作るには、

これを コピペ ↓

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

もちろん、すきなだけ行を増やすことができます。

4行表 縦タイトル太

                       
1データ1データ2
2データ1データ2
3データ1データ2
4データ1データ2

この表を作るには、

これを コピペ ↓

<table border="2">
<tr>
<th>1</th>
  <td>データ1</td>
  <td>データ2</td>
</tr>
<tr>
<th>2</th>
  <td>データ1</td>
  <td>データ2</td>
</tr>
<tr>
<th>3</th>
  <td>データ1</td>
  <td>データ2</td>
</tr>
<th>4</th>
  <td>データ1</td>
  <td>データ2</td>
</table>

↑これを、カスタムHTMLに張り付けてください。

border=" " で外枠の太さを指定できます。ここでは、2にしています。

行を増やすには

行を増やしたい時は、このようにこれ↓を足すとOK。

<th>4</th>
  <td>データ1</td>
  <td>データ2</td>

<th>4</th>の数字は行になります。

↑これを、カスタムHTMLに張り付けてください。

3行表 横タイトル太 色付き

th・・・見出しセル。一般的なブラウザで太字、センターになるようですがセンターにならず、色がつきました。

123
データ1データ2データ3
データ1-2データ2-2データ3-2

この表を作るには、

これを コピペ ↓

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

↑これを、カスタムHTMLに張り付けてください。

border=" " で外枠の太さを指定できます。ここでは、3にしています。

4行表 横タイトル太

1234
データ1データ2データ3データ4
データ1-2データ2-2データ3-2データ4-2

↑これを、カスタムHTMLに張り付けてください。

この表を作るには、

これを コピペ ↓

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

↑これを、カスタムHTMLに張り付けてください。

border=" " で外枠の太さを指定できます。ここでは、3にしています。

行を増やすには

<th>4</th>

<td>データ4</td>

<td>データ4-2</td>

↑これを、カスタムHTMLに張り付けてください。

順番に増やしていけばOK。

あわせて読みたい

【コピペで簡単】スワローショートコード(53種類)Swallow