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

シェアする

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

スポンサーリンク




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

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

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

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

tableを使った表組みはソースが長くなるので、シンプルな表組みであればDLタグを用いるのが簡単で便利です。
例えば2列2業の表組みを作ると、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対策への1歩

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

是非お試しください。

The following two tabs change content below.

sawaking

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




シェアする

スポンサーリンク