ワードプレスのコピペで簡単!【表の作成・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・・・見出しセル。一般的なブラウザで太字、センターになるようですがセンターにならず、色がつきました。

1 2 3
データ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行表 横タイトル太

1 2 3 4
データ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。





あわせて読みたい

【スワロー】コピペでアイコンFont Awesome
このサイトは、Wordpressテーマ「スワロー」を使っています。いました。 → WordPressテーマ「スワロー」 スワローは、Font Awesome5(無料版)のアイコンが使えます。 Font Awesome とは 文字と同じように...

ワードプレスにコピペで簡単バッジ(CSS不要)関連・参考・あわせて読みたい・出典・おすすめ
このサイトは、WordPressテーマ「スワロー」を使っています。いました。 → WordPressテーマ「スワロー」 あわせて読みたい 参考 LINK サイト このような ↑ バッジがあると見栄えもいいし、目立って読みやすくなりますよね。...

スワローで下線・太字・マーカーの【AddQuicktag】設定タグ
このサイトは、WordPressテーマ「スワロー」を使っています。いました。 → WordPressテーマ「スワロー」 スワローで文字をこのように、 ・下線、・赤太字、・文字を小さく、文字を大きく、文字をもっと大きくしたり、マーカー 装飾し...

【コピペで簡単】スワローショートコード(53種類)Swallow
このサイトは、WordPressテーマ「スワロー」を使っています。いました。 → WordPressテーマ「スワロー」 スワローショートコードまとめです。 ショートコードは、HTMLコードを呼び出す短縮コードです。 ブログカード ブログカー...
タイトルとURLをコピーしました