オフィス菜のブログ

dlタグのテーブル化

たまたまできたのかも

このブログは、WordPressのツールを利用し、ロリポップ!レンタルサーバーを利用しています。
諸々のブログを閲覧していると、<dl>タグを利用し、きれいにテーブル表記しているサイトが、うらやましい限りです。
そこで、自己流で、たまたまかもしれませんが、私でも、<dl>タグを利用して、テーブル表記が、できました。
本稿では、このたまたま的な内容を備忘録として投稿します。

スタイルの例として

本当にたまたまです。諸々のテキストを閲覧し、自分なりにためした結果、WordPressの投稿ページでも利用できる感じです。
下記のリンク先に、具体的なコードを紹介します。(繰り返しますが、基本的に、備忘録です。)

このスタイルのリンク先 » <dl>タグのテーブル化の例 (テキストです)

文字数は、8文字の場合です

いろいろ操作していると、<dl>タグの、<dt>タグの部分の文字数により、幅が決まってくる感じです。
今回は、文字数が8文字で、私なりに、改定経歴などのような年月日の部分の利用に有効な感じがしています。

次のような感じです。

年月日
2012年02月19日
内容
新規投稿

参考図書

下記の図書や諸々のサイトのページのソースなどを参考にさせて頂きました。

2004年02月11日 の発行で内容的に、古いかもしれませんが、多くのスタイルを例として、諸々の解説がされています。
この図書のp.144にテーブルはもう使わないでとありますが、具体的な、スタイルの記載例を、この図書より見つけることができませんでした。
どこかに、記載されていると思いますが、・・・
この図書も2008年03月31日 の発行で内容的に、古いかもしれませんが、p.166 に<ul>タグの場合の横に並べるスタイルの例が記載されています。
このページの内容を念頭に置き、この図書の諸々のページと、別の図書のHTML/XHTML&スタイルシートデザインブックの、にらめっこの結果、たまたま、<dl>タブを利用したテーブル表記ができた感じです。

この別の図書のHTML/XHTML&スタイルシートデザインブックで、サイドバーの<li>タグの部分に、要素ulを要素ulの中に入り子にした記載例を紹介しています。

この記載例ですと、検証(XHTML 1.0 Transitional) 要素ulを要素ulの中に入り子にすることはできません。の警告が表記され、今回の私のホームページでは、採用しませんでした。
尚、下記のツールで作成しましたが・・・

テキスト作成
Microsoft Visual Web Developer 2010 Express
DOCTYPE部分
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

とにかく、勉強になったと思う、今日頃ごろです。

-以 上-

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください