単純に見出しと項目の場合は以下の通り。
┌──────────────────────────────────────┐
│<ul>天下人                                                                  │
│  <li>織田信長</li>                                                         │
│  <li>豊臣秀吉</li>                                                         │
│  <li>徳川家康</li>                                                         │
│</ul>                                                                       │
└──────────────────────────────────────┘

入れ子にする場合は以下のような感じ。
┌──────────────────────────────────────┐
│<ul>戦国武将                                                                │
│  <li>織田信長</li>                                                         │
│  <li>豊臣秀吉</li>                                                         │
│  <li>徳川家康                                                              │
│    <ul>                                                                    │
│      <li>酒井忠次</li>                                                     │
│      <li>本多忠勝</li>                                                     │
│      <li>榊原康政</li>                                                     │
│      <li>井伊直政</li>                                                     │
│    </ul>                                                                   │
│  </li>                                                                     │
│</ul>                                                                       │
└──────────────────────────────────────┘


CSS的には以下のような感じか。
┌──────────────────────────────────────┐
│ul {                                                                        │
│    padding-left        :0;                                                 │
│}                                                                           │
│ul > li {                                                                   │
│    margin-left         :1em;                                               │
│}                                                                           │
└──────────────────────────────────────┘
  ・特にしていないとulタグの左横に適当に余白(padding)ができる
  ・liタグには「・」等の印が先頭につくが、範囲外の左側につくので
    左にmarginを開けた方がよい
    なお、前述のulタグの適当な余白と組み合わせれば見えるが
    その余白をなくしてしまうと、左詰めで「・」が見えなくなる
                                  ┌────────┐
  既定の表示イメージ              │    ulタグ      │
                                  │  ・liタグの内容│
                                  │  ・liタグの内容│
                                  └────────┘
                                  ┌────────┐
  paddingを無くした場合のイメージ │ulタグ          │
                                  │liタグの内容    │
                                  │liタグの内容    │
                                  └────────┘
                                  ┌────────┐
  上記CSSのイメージ               │ulタグ          │
                                  │・liタグの内容  │
                                  │・liタグの内容  │
                                  └────────┘
  なお、主な印は以下の通り
  ┌────────────┬──────┬──────┐
  │list-style-type:none;   │なし        │            │
  ├────────────┼──────┼──────┤
  │list-style-type:disc;   │小さい黒丸  │一階層目    │
  ├────────────┼──────┼──────┤
  │list-style-type:circle; │小さい白丸  │二階層目    │
  ├────────────┼──────┼──────┤
  │list-style-type:square; │小さい黒四角│三階層目以降│
  └────────────┴──────┴──────┘

今更ながら、現在のところボタンはどういう方式で運用されているのか軽く見てみた。

以下の三つがあり、大手サイトはほぼそのいずれかを使っている。
┌──┬──────┬────────────────────────────┐
│i系 │inputタグ系 │<input type="button" name="" value="ボタン"/>           │
│    │            │<input type="submit" name="" value="ボタン"/>           │
├──┼──────┼────────────────────────────┤
│b系 │buttonタグ系│<button name="" value="">ボタン</button>                │
├──┼──────┼────────────────────────────┤
│a系 │aタグ系     │<a href="">ボタン</a>                                   │
└──┴──────┴────────────────────────────┘

特徴を分析すると以下の通り。
┌──┬───────────────────────────────────┐
│i系 │○オーソドックスなやり方                                              │
│    │×ラベル名が属性に含まれるので、多言語対応時のビュー切り分けが不得手  │
├──┼───────────────────────────────────┤
│b系 │○モダンなやり方(value値が表に出ないので自由に使える)                 │
│    │×レガシーブラウザでは非対応                                          │
├──┼───────────────────────────────────┤
│a系 │○ボタンに依存しないやり方                                            │
│    │×本来の使い方ではない(ボタン形状は自前で用意)                        │
└──┴───────────────────────────────────┘

「i系」から「b系」から移行しつつある一方で、
別概念の「a系」に移行する流れも見られる感じか。

┌──────────────────────────────────────┐
│<form method="post" action="">                                              │
│  <table>                                                                   │
│    <thead>                                                                 │
│      <tr>                                                                  │
│        <th>項目1</th>                                                      │
│        <th>項目2</th>                                                      │
│      </tr>                                                                 │
│    </thead>                                                                │
│    <tbody>                                                                 │
│      <tr>                                                                  │
│        <td><input type="text" name="col1[]" value="1-a"/></td>             │
│        <td><input type="text" name="col2[]" value="2-a"/></td>             │
│      </tr>                                                                 │
│      <tr>                                                                  │
│        <td><input type="text" name="col1[]" value="1-b"/></td>             │
│        <td><input type="text" name="col2[]" value="2-b"/></td>             │
│      </tr>                                                                 │
│    </tbody>                                                                │
│  </table>                                                                  │
│  <input type="submit" value="送信"/>                                       │
│</form>                                                                     │
└──────────────────────────────────────┘
明細をPOSTする場合、name属性を個別に配列にすると、項目ごとの配列となってしまう。
┌──────────────────────────────────────┐
│$_POST['col1'] = array(                                                     │
│    0 => '1-a',                                                             │
│    1 => '1-b',                                                             │
│);                                                                          │
│$_POST['col2'] = array(                                                     │
│    0 => '2-a',                                                             │
│    1 => '2-b',                                                             │
│);                                                                          │
└──────────────────────────────────────┘

データベースからデータを取得したような多次元連想配列にしたい場合には？
┌──────────────────────────────────────┐
│$_POST['data'] = array(                                                     │
│    0 => array(                                                             │
│        'col1' => '1-a',                                                    │
│        'col2' => '2-a',                                                    │
│    ),                                                                      │
│    1 => array(                                                             │
│        'col1' => '1-b',                                                    │
│        'col2' => '2-b',                                                    │
│    ),                                                                      │
│);                                                                          │
└──────────────────────────────────────┘

まず、name属性をつけて直接POSTするのではなく、class属性で束ねて
それらを編集してPOSTする方式に切り替える。
よって、submitボタンではなく、buttonボタンを使用する。
┌──────────────────────────────────────┐
│<form method="post" action="">                                              │
│  <table>                                                                   │
│    <thead>                                                                 │
│      <tr>                                                                  │
│        <th>項目1</th>                                                      │
│        <th>項目2</th>                                                      │
│      </tr>                                                                 │
│    </thead>                                                                │
│    <tbody>                                                                 │
│      <tr>                                                                  │
│        <td><input type="text" class="name-col1" value=""/></td>            │
│        <td><input type="text" class="name-col2" value=""/></td>            │
│      </tr>                                                                 │
│      <tr>                                                                  │
│        <td><input type="text" class="name-col1" value=""/></td>            │
│        <td><input type="text" class="name-col2" value=""/></td>            │
│      </tr>                                                                 │
│    </tbody>                                                                │
│  </table>                                                                  │
│  <input type="button" id="submit" value="送信"/>                           │
│</form>                                                                     │
└──────────────────────────────────────┘
さて、送信方法だが、二つの案がある。(以下jQueryを使用、PHPで受信を例とする)

【案１】hidden項目で送信する方法
┌──────────────────────────────────────┐
│$('#submit').click(function() {                                             │
│    var index = 0;                                                          │
│    $('tbody tr').each(function() {                                         │
│        $(this).closest('form')                                             │
│            .append($('<input>').prop('type', 'hidden')                     │
│                                .prop('name', 'data[' + index + '][col1]')  │
│                                .val($(this).find('.name-col1').val())      │
│            )                                                               │
│            .append($('<input>').prop('type', 'hidden')                     │
│                                .prop('name', 'data[' + index + '][col2]')  │
│                                .val($(this).find('.name-col2').val())      │
│            );                                                              │
│        index++;                                                            │
│    });                                                                     │
│    $('tbody').closest('form')                                              │
│        .submit();                                                          │
│});                                                                         │
├───┬──────────────────────────────────┤
│PHP側 │$配列 = $_POST['data'];                                             │
└───┴──────────────────────────────────┘
  hidden項目を生成して、そこに設定して送信する。
  よって、そのまま使える。

【案２】JSON文字列で送信する方法
┌──────────────────────────────────────┐
│$('#submit').click(function() {                                             │
│    var jsonArray = new Array();                                            │
│    $('tbody tr').each(function() {                                         │
│        jsonArray.push({                                                    │
│            "col1" :$(this).find('.name-col1').val(),                       │
│            "col2" :$(this).find('.name-col2').val()                        │
│        });                                                                 │
│    });                                                                     │
│    $('tbody').closest('form')                                              │
│        .append($('<input>').prop('type', 'hidden')                         │
│                            .prop('name', 'data')                           │
│                            .val(JSON.stringify(jsonArray))                 │
│        )                                                                   │
│        .submit();                                                          │
│});                                                                         │
├───┬──────────────────────────────────┤
│PHP側 │$配列 = json_decode($_POST['data'], TRUE);                          │
└───┴──────────────────────────────────┘
  一旦、連想配列(ハッシュオブジェクト)にしたものを
  「JSON.stringify()」でJSON文字列に変換して、送信する。
  PHP側では「json_decode()」でデコードする必要がある。
  一つの項目として送信するので(変換処理は必要だが)管理がしやすいという利点あり。

tableタグの全貌は以下のような感じ。
┌─────┬───────────┬────────────────────┐
│table     │テーブル領域          │                                        │
│├caption │  テーブル見出        │                                        │
│├colgroup│  列グループ定義      │列の定義を事前に行うことができる        │
││└col   │    列定義            │                                        │
│├thead   │  ヘッダ行領域        │                                        │
││└tr    │    ヘッダ行          │                                        │
││  ├th  │      ヘッダ行の見出列│                                        │
││  └td  │      ヘッダ行の一般列│                                        │
│├tfoot   │  フッタ行領域        │フッタ行はデータ行より前に定義しないと  │
││└tr    │    フッタ行          │                        いけないので注意│
││  ├th  │      フッタ行の見出列│                                        │
││  └td  │      フッタ行の一般列│                                        │
│└tbody   │  データ行領域        │                                        │
│  └tr    │    データ行          │                                        │
│    ├th  │      データ行の見出列│                                        │
│    └td  │      データ行の一般列│                                        │
└─────┴───────────┴────────────────────┘

最も端折った以下の形が結構使われるかも。最初の頃はこれしかなかった気が。。。
┌─────┬───────────┬────────────────────┐
│table     │テーブル領域          │                                        │
│  └tr    │    データ行          │                                        │
│    ├th  │      データ行の見出列│                                        │
│    └td  │      データ行の一般列│                                        │
└─────┴───────────┴────────────────────┘

最近の流れだと、ヘッダを付けた以下の形が最もシンプルな形のようだ。
┌─────┬───────────┬────────────────────┐
│table     │テーブル領域          │                                        │
│├thead   │  ヘッダ行領域        │                                        │
││└tr    │    ヘッダ行          │                                        │
││  └th  │      ヘッダ行の見出列│                                        │
│└tbody   │  データ行領域        │                                        │
│  └tr    │    データ行          │                                        │
│    └td  │      データ行の一般列│                                        │
└─────┴───────────┴────────────────────┘

アンカーリンクっぽい装飾なんだけど、リンク先に飛ばないアンカーリンクの作り方。
＃ボタンの代わりにアンカーリンクを使いたい場合なんか向け

(1) JavaScriptでfalseを返してリンク先に飛ばない方法
┌──────────────────────────────────────┐
│<a href="" onclick="return false;">リンク</a>                               │
└──────────────────────────────────────┘
ほぼこれが正解。但し、JavaScript無効だと使えない。

(2) ページ内リンクでごまかす方法
┌──────────────────────────────────────┐
│<a href="#">リンク</a>                                                      │
└──────────────────────────────────────┘
ページ内先頭へのリンクとなるので、ページがスクロールした先にあった場合には
先頭に飛んでしまうのでばれてしまう。

(3) リンクはやめて装飾でごまかす方法
┌──────────────────────────────────────┐
│<span style="color:#0000FF;cursor:pointer;text-decoration:underline;"       │
│                                                              >リンク</span>│
└──────────────────────────────────────┘
リンク済みの場合は文字が紫色にならないので違和感があるかも。
何のイベントも意識しなくていいからこれが無難かもしれない。

「 」は文字コード「0xC2A0」の半角空白で、
「 」は文字コード「0xE28082」の半角空白でそれぞれ表示される。

よって、これをコピペしても、一般的な半角空白「0x20」とは違うことになる。

コピペで指定されたものをPHP的に変換するには、以下のような方法がある。
┌──────────────────────────────────────┐
│$■ = preg_replace('/\xC2\xA0/'    , ' ', $■);  //  を半角空白にする  │
│$■ = preg_replace('/\xE2\x80\x82/', ' ', $■);  //  を半角空白にする  │
└──────────────────────────────────────┘

でも、なかなかこの「0xC2A0」と「0xE28082」にはお目にかかれないような気がする。

たいていは「0x20」に変換されて表示されているようだ。

例えばSmartyで以下のように変換して表示したとしても…
┌──────────────────────────────────────┐
│{■|replace:' ':' '}                                                   │
└──────────────────────────────────────┘
「あ1- 1」だと「0xE28082」( )となるが、
「あ 1-1」だと「0x20」(半角空白)となって表示されるようだ。

また、「0xC2A0」( )に至っては、見たことがない。

本来「 」は「0xA0」なのだが、UTF-8的には「0xC2A0」となるものらしい。
ただ、「0xA0」も「0xC2A0」も表示されているのをみたことがないので
真偽がわからない。

画面の遷移方法をまとめた(jQueryを使用)。

(1) アンカーリンクを使う方法
  ┌────────────────────────────────────┐
  │<a href="遷移先.htm">遷移！</a>                                         │
  └────────────────────────────────────┘
(2) window.open()を使う方法
  ┌────────────────────────────────────┐
  │<input type="button" value="遷移！"/>                                   │
  ├────────────────────────────────────┤
  │$(':button[value="遷移！"]').click(function() {                         │
  │    window.open('遷移先.htm', '_top');                                  │
  │});                                                                     │
  └────────────────────────────────────┘
(3) POST送信を使う方法
  ┌────────────────────────────────────┐
  │<form method="post" action="遷移先.htm">                                │
  │<input type="submit" value="遷移！"/>                                   │
  │</form>                                                                 │
  └────────────────────────────────────┘
(4) POST送信を使う方法(jQueryで向き先変更)
  ┌────────────────────────────────────┐
  │<form method="post" action="ダミー.htm">                                │
  │<input type="button" value="遷移！"/>                                   │
  │</form>                                                                 │
  ├────────────────────────────────────┤
  │$(':button[value="遷移！"]').click(function() {                         │
  │    $('form').attr('action', '遷移先.htm');                             │
  │    $('form').submit();                                                 │
  │});                                                                     │
  └────────────────────────────────────┘

IEの場合、「 」により右インデントをしたら効かなかった。

※右インデントって、右寄せして、空白で少し調整するやつですよ。

ところが、「 」にしたらうまくいった。
一半角スペースだけだけどね。

前門の「 」、後門の「 」なの？

┌──────────────────────────────────────┐
│<input type="radio" name="論理型" value="true" />真                         │
│<input type="radio" name="論理型" value="false"/>偽                         │
└──────────────────────────────────────┘
とした場合、
┌──────────────────────────────────────┐
│$取得 = ($_POST['論理型']) ? TRUE : FALSE;                                  │
└──────────────────────────────────────┘
では、どちらもTRUEとなってしまう。
これは「true」「false」ともに文字列とみなされ、空文字以外はTRUEとなるからだ。

┌──────────────────────────────────────┐
│<input type="radio" name="論理型" value="true"/>真                          │
│<input type="radio" name="論理型" value=""    />偽                          │
└──────────────────────────────────────┘
もしくは
┌──────────────────────────────────────┐
│<input type="radio" name="論理型" value="1"/>真                             │
│<input type="radio" name="論理型" value="0"/>偽                             │
└──────────────────────────────────────┘
ならば、正しく判定できる。

┌──────────────────────────────────────┐
│<input type="radio" name="論理型" value="true" />真                         │
│<input type="radio" name="論理型" value="false"/>偽                         │
└──────────────────────────────────────┘
のままで、判定側を以下のようにしてしまうというのもある。
┌──────────────────────────────────────┐
│$取得 = ($_POST['論理型'] === 'true') ? TRUE : FALSE;                       │
└──────────────────────────────────────┘

どれが一番妥当なのだろうか？

「 」ばかりお使いのあなた。

「 」っていう便利なスペースがあるんですよ。

字下げとかもできてしまう。

なんと「  」で、二文字分字下げしてくれる！

こ、これは、すごい。


他にも「 」「 」とかがあるらしい。。。