HTMLの表を整形する。フレーム用テンプレート、フレームなしコラム

HTMLテーブルの書式設定 – 今日は小さな基本から実践まで。WordPressで社員と一緒にオリジナルの文章を作りたいというお客様が多くいらっしゃいました。検索エンジンに最適化された文章にするために、様々な小さな機能が追加されています。例えば、メディアライブラリの写真や、Youtubeの動画を埋め込むこともできます。コピー＆ペーストでテーブルを挿入するだけでは、自分のコンテンツ管理システムには必要のない多くのHTMLスニペットが必要になります。今日は、誰でも自分で生成・修正できるシンプルなHTMLテーブルの例を見てみましょう。

です。

問題：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>。

です。