HTML備忘録 / 記述メモ3

  • 2003年7月18日：作成
  • 2018年10月26日：全面改訂

表 <table>

<table>はHTML5でsummary属性以外は廃止され、summary属性も必須ではなく、状況しだいでは<figure>と組合わせて<p>のコメントで代替する事も認められる。

表用のCSSはほとんど詰められていないが、今回はHTML4.01時代のような最後の1pixel合わせはしない。人間が丸くなったのか疲れているのかそれは謎であるが、素のままで十分に美しいと感じる (^_^;)

なお、廃止された属性の中でnowrap（折返し禁止）は取敢えず必要なのでclass="nowrap"を作り対応する。

2018.10.31：Opera 12はCSSの罫線に非対応、表示されない。

2018.11.04：これ↑は勘違い。新丸ゴシックを適応するとOpera 12は新丸ゴで表示できず、さらに罫線が消失する。ますますWebフォントが使い辛くなってきた (-"-)

<table style="width:**px">

デフォルトのテーブル。中央表示、幅はコンテンツに合わせるかstyle="width:**px"で直接指定、本文幅一杯なら100%で指定する。

table {text-align:center; border-collapse: collapse; 
	border:2px solid #808080; padding:0px; margin:0 auto; 
	margin-bottom:1.5em;}
caption {font-weight:nomal; color:#00ffff; text-align:left; 
	margin-bottom:5px;}
th {border:1px solid #808080; background-color:#008080; 
	padding:5px;}
td {border:1px solid #808080; padding:5px;}
th.nowrap,td.nowrap {white-space: nowrap;}
デフォルトのテーブル
<th>見出し1<th>見出し2<th>見出し3<th>見出し4
<td>項目1-1<td>項目1-2<td>項目1-3<td>項目1-4
<td>項目2-1<td>項目2-2<td>項目2-3<td>項目2-4
<td>項目3-1<td>項目3-2<td>項目3-3<td>項目3-4
width:100%、nowrapを指定したテーブル
<th>見出し1<th>見出し2<th>見出し3<th>見出し4
<td>項目1-1<td>項目1-2<td>項目1-3<td>項目1-4
<td>項目2-1<td>項目2-2<td>項目2-3<td>項目2-4 折返し標準のまま
<td>項目3-1<td class="nowrap">項目3-2<td>項目3-3<td>項目3-4

<table class="right" style="width:**px">

右寄せの小さなテーブル。幅はコンテンツに合わせるかstyle="width:**px"で直接指定する（上限400pxを目安）。

table.right {float:right; text-align:center; 
	border-collapse:collapse; border:2px solid #808080; 
	padding:0px; margin:0.3em 0em 0em 1em;}

margin:0.3emは<p>と上を揃えるため（トライアンドエラーで決めた）
右寄せの小さなテーブル
<th>見出し1<th>見出し2<th>見出し3
<td>項目1-1<td>項目1-2<td>項目1-3
<td>項目2-1<td>項目2-2<td>項目2-3
<td>項目3-1<td>項目3-2<td>項目3-3

後で出てくる画像と同じで、個人的に文章中の挿入物はこの位置が一番落ち着く。

確かにCSSレイアウトは便利だが、様々なパターンを片っ端から事前に準備するのもどうかと思う。テーブル幅のように、少数例外にはタグ内直接記入で対応するのが賢い気がする。この2パターンがあれば十分だ、と書きながら自分の<table>使用頻度なら全て直接記入でも良かった事に気が付いてしまった (^_^;)

リスト <li> <ul> <ol> <dl>

HTML5で<ol>で一二三やイロハの様な和風序数も追加されたが、Internet Explorer 11とOpera 12が対応しない。古すぎるOperaは仕方がないと思うが、Internet Explorer非対応は問題である。が、幸い日本語的話題を扱わない「時代おくれ」では和風序数を使う予定はないので無問題もーまんたい。

行間を本文に合わせ175%とし、定義リスト<dl>の<dd>が下がり過ぎるので2emを指定している。

ul, ol, dl, li {line-height:175%;}
dd {margin-left: 2em;}
  1. <ol>、<li>は序列のあるリストを表す
  2. HTML5でtype属性（マーカー）は廃止されたので、CSSで指定する
  3. このサンプルはマーカー未指定（デフォルト decimal／算用数字）
<ol style="list-style-type:*****;">による序数（マーカー）指定例
  1. none
  2. マーカーなし
  1. disc
  2. 円盤
  3. （丸／塗潰しあり）
  1. circle
  2. 円
  3. （丸／塗潰しなし）
  1. square
  2. 四角
  3. （塗潰しあり）
  1. lower-roman
  2. ローマ数字（小）
  3. （ⅰ　ⅱ　ⅲ）
  1. upper-roman
  2. ローマ数字（大）
  3. （Ⅰ　Ⅱ　Ⅲ）
  1. lower-greek
  2. ギリシャ文字（小）
  3. （α　β　γ）
  1. decimal
  2. 算用数字
  3. （1　2　3）
  1. decimal-leading-zero
  2. ゼロ付数字
  3. （01　02　03）
  1. lower-latin
  2. アルファベット（小）
  3. （a　b　c）
  1. lower-alpha
  2. アルファベット（小）
  3. （a　b　c）
  1. upper-latin
  2. アルファベット（大）
  3. （A　B　C）
  1. upper-alpha
  2. アルファベット（大）
  3. （A　B　C）
  1. cjk-ideographic
  2. 漢数字
  3. （一　二　三）
  1. hiragana
  2. かな（五十音順）
  3. （あ　い　う）
  1. katakana
  2. カナ（五十音順）
  3. （あ　い　う）
  1. hiragana-iroha
  2. かな（いろは順）
  3. （い　ろ　は）
  1. katakana-iroha
  2. カナ（イロハ順）
  3. （イ　ロ　ハ）

このように表自身にsummary的要素を含めるのは禁じ手だと思うが、<summary>があまりにも使いにくいもので・・・ (^_^;)

なぜか<ul>でも<ol>でも結果は同じで、非対応の場合には<ul>はdisk（円盤）が<ol>は数字が表示される。なお、この<table>と<ul>は（二度と使わないと思うので）<head>～</head>のローカルのCSSで制御している。

この表は不均等であるが十分美しい。HTML4.01時代は最後の1pxcelが<table>使いのステータスだったから、均等分割に頑張ったなぁ (^^ゞ

序列のあるlist-style-typeとvalue属性を組み合わせる事で、任意の序列を指定したり、任意の序列から始めたりできる。

  1. 1を指定
  2. 何も指定せず引き継ぐ
  3. 10を指定
  4. 5を指定
<ol style="list-style-type: lower-roman;">
<li value="1">1を指定</li>
<li>何も指定せず引き継ぐ</li>
<li value="10">10を指定</li>
<li value="5">5を指定</li>
</ol>
<dt>定義する用語（Definition Term）
<dd>用語の説明（Definition Description）
  • <li>と組合わせ複数の意味付けも可能
  • この場合の</li>が省略できるのは謎 (-"-)
HTML 4.01からの変更点
特にない
項目の目次に戻る サイトのトップに戻る