table(表組み)作成を簡単にするDLタグで表テーブル作り

企業のWEBサイトはもちろんの事、ブログなどでもtable(テーブル)で表組みをする事は多いかと思います。
今回は、DLタグを使って簡単に表組みを作る方法を紹介します。
テーブルは良く使うけれどCSSはちょっと・・という方には必見です。

WordPressの記事などで表組みする時にも便利です。
table(表組み)作成を簡単にするDLタグで表テーブル作り #WordPress #css #table https://t.co/lHhJJYP5aZ

— sawaking (@sawaking) 2019年3月26日

table(表組み)作成を簡単にするDLタグで表テーブル作り

プラグインは使わない方が良い

WordPressではTable（テーブルでの表組み）を作るプラグインもあります。
でも、便利なようで不便。そもそもプラグインが使えなくなったらショートカットコードは全部使えなくなるし、テーブルを使っている記事は全部修正しなくてはならない。
プラグインなのでウィルス等を仕込まれるリスクも増える（プラグインの更新が止まった時など）。
というわけで、私はおすすめしません。

DLコードなら簡単に表組み（テーブル）が作れる

tableを使った表組みはソースが長くなるので、シンプルな表組みであればDLタグを用いるのが簡単で便利です。
例えば２列２業の表組みを作ると、tableタグだとソースは下記のような感じです。

	<table>
  <tbody>
    <tr>
      <th scope="row">氏名</th>
      <td>sawaking</td>
    </tr>
    <tr>
      <th scope="row">職業</th>
      <td>クリエイター</td>
    </tr>
  </tbody>
</table>

これがDLタグだと

	<dl>
	<dt>氏名</dt>
	<dd>sawaking</dd>
	<dt>職業</dt>
	<dd>クリエイター</dd>
	</dl>

とてもシンプルですよね。これだと、手打ちでもガンガンいけますし、AddQuicktagのようなプラグインで登録しておけば、ボタンを押すだけでいけちゃいます。

DLタグで表組みするコード

下記のCSSはPC用です。色などはお好みで変更してください。
下のサンプルではdtの幅が18em　その分ddが右に18emのmarginをもたせてあります。
dt幅の調整をする際は、ここを変更してください。
WordPressのテーマによっては、最初からdt ddタグ用にCSSが設定されている場合があるので、その場合はimportant入れます。

See the Pen mogVaL by sawaking (@sawaking) on CodePen.36532

下記のCSSはレスポンシブ用です。通常はこちらのCSSを使ってください。モバイルだと表が縦に並びます。

See the Pen ywrOee by sawaking (@sawaking) on CodePen.36532

シンプルなソースもSEO対策への１歩

WordPressテーマや記事ページなどのソースも同じですが、
ソースがシンプルであることはSEO対策への１歩でもあります。
また、DLタグの方がレスポンシブ表記も簡単に出来ますね。
私が作るサイトでは、今はDLタグで表組みをする事がほとんどです。

是非お試しください。

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

sawaking

川崎フロンターレ（サッカー）と犬をこよなく愛するクリエイターです。 フリーランス(アートディレクションやコンサルタント）を15年続け、現在は恵比寿にある企業のメディア部門にてディレクターをしています。 企業に務めながらフリーランス時代の遺産を副収入にぬくぬくと生きています。 このブログは、基本的にフリーランスの仕事やアフィリエイトの運営・WordPressのカスタマイズ等について書いていこうと思います。

最新記事 by sawaking (全て見る)

• Yet Another Related Posts(関連する記事)表示プラグインを任意の位置に表示させる - 2023年3月27日
• WordPressのダッシュボードにメッセージを掲載する方法 - 2022年6月15日
• カスタムフィールドに入力した値を検索キーワードに含めるプラグイン - 2022年1月18日