です。

問題：HTMLテーブルをコピーするだけでは不潔

企業のスタッフは表をコピーしないことが重要です。そうしないと、私たちのHTMLコードの中に、説明したような「ゴミ」がたくさん入ってしまいます。エディターの “ビジュアル “エリアでは、HTMLコードが表示されません。編集するには、WordPressエディタで「テキスト」をクリックする必要があります。コードを単純にコピーすると、必要のない小さな断片が一緒に入ってしまいます。ここでは、実際に使用した例を紹介します。

例 – テーブルの悪いHTML

まだまだ見えないところでいろいろなものが写し出されています。

<th class=”headerSort” tabindex=”0″ title=”Sort ascending” role=”columnheader button”>No.</th>となります。
<th class=”headerSort” tabindex=”0″ title=”Sort ascending” role=”columnheader button”>District</th>となります。
<th class=”headerSort” tabindex=”0″ title=”Sort Ascending” role=”columnheader button”>Area</th>

つまり、コピー＆ペーストによって奪われるものがあることがわかります。

例-テーブルの良いHTML

そうすることで、きれいな状態になります。

<th>No.</th>
<th>District</th>
<th>面積</th>

解決策：HTMLテーブルテンプレート

少しでもHTMLを使ったり、知っておく必要があります。簡単に保存してから、コピーや編集をするのが良いでしょう。

• ヒント1：<table>と<tbody>は最初だけ </table> </tbody>は最後だけ
• ヒント2：<th>は1行目にのみ使用し、再度閉じます（thは「表の見出し」の意味）。
• ヒント3：<tr>が行を開き、</tr>が行を閉じる（trは「テーブル行」と呼ばれる
• ヒント4：<td>で値やボックスを開き、</td>で閉じる(tdは「テーブルデータ」の意味)

3列、3行の表を作成します。

<br> <br>
<tbody>
<br> <br>
<th> ヘッダー1</th>
<th>ヘッダー2</th>
<th>ヘッダー3</th>
</tr>。
<br> <br>
<td>テキスト1</td
<td>テキスト2</td
<td>テキスト3</td
</tr>。
<br> <br>
<td>テキスト1</td
<td>テキスト2</td
<td>テキスト3</td
</tr>。
</tbody>
</table> </table

完成したテーブルはこんな感じです。

2列、2行の例です。

<br> <br>
<tbody>
<br> <br>
<th> ヘッダー1</th>
<th>ヘッダー2</th>
</tr>。
<br> <br>
<td>テキスト1</td
<td>テキスト2</td
</tr>。
</tbody>
</table> </table

4列、5行の別の例

<br> <br>
<tbody>
<br> <br>
<th> ヘッダー1</th>
<th>ヘッダー2</th>
<th>ヘッダー3</th>
<th>ヘッダー4</th>
</tr>。
<br> <br>
<td>テキスト1</td
<td>テキスト2</td
<td>テキスト3</td
<td>テキスト4</td
</tr>。
<br> <br>
<td>テキスト1</td
<td>テキスト2</td
<td>テキスト3</td
<td>テキスト4</td
</tr>。
<br> <br>
<td>テキスト1</td
<td>テキスト2</td
<td>テキスト3</td
<td>テキスト4</td
</tr>。
<br> <br>
<td>テキスト1</td
<td>テキスト2</td
<td>テキスト3</td
<td>テキスト4</td
</tr></tbody>
</table> </table

列や行を増やす

<table>…</table>という「テーブル」の中で、新しい「テーブル行」を開始したり、閉じたりすることで、より多くの行を得ることができます。これはこんな感じです。

<br> <br>
…
</td> </td

カラムの数に応じて、「テーブルデータ」を挿入する必要があります。

<br> <br>
<td>テキスト1</td
<td>テキスト2</td
<td>テキスト3</td
<td>テキスト4</td
</tr>。

です。