WEB ページ作成基準表の作成

よく使う CSSとテクニック

CSS

表を作成するときに使わることの多い CSS を以下の表に示します．この CSS を「style="プロパティ:値"」のようにします．

テクニック

以下のような HTML テクニックも有ります．

• セル内の改行には，「<br>」を使う．
• セルを水平方向に結合するときには，「<td colspan="結合セル数">」とする．もちろん，<th>でも使用可能．
• セルを垂直方向に結合するときには，「<td rowspan="結合セル数">」とする．これも，<th>で使用可能．

普通の表

通常の表は，<table class="default">を使います．このクラスを使うと，シンプルな表が表示されます．表が大きい場合には，「style="margin-left:50px"」のようにして，左に寄せます．

普通の表の書き方

<table class="default" summary="表の説明(図表を表示しないブラウザ向け)">
  <caption>表のキャプション</caption>
  <col style="width:幅px">
  <col style="width:幅px">

  <tr>
  <th>縦列1のカテゴリー</th>
  <th>縦列2のカテゴリー</th>
  </tr>

  <tr>
  <td>内容(1行1列)</td>
  <td>内容(1行2列)</td>
  </tr>
  
  <tr>
  <td>内容(2行1列)</td>
  <td>内容(2行2列)</td>
  </tr>

</table>

上の HTML をブラウザで表示すると以下のようになります．

立体的な表

罫線が立体的な表は，<table class="solid">を使います．このクラスを使うと，罫線が三次元的な表が表示されます．表が大きい場合には，「style="margin-left:50px"」のようにして，左に寄せます．

立体的な表の書き方

<table class="solid" summary="表の説明(図表を表示しないブラウザ向け)">
  <caption>表のキャプション</caption>
  <col style="width:幅px">
  <col style="width:幅px">

  <tr>
  <th>縦列1のカテゴリー</th>
  <th>縦列2のカテゴリー</th>
  </tr>

  <tr>
  <td>内容(1行1列)</td>
  <td>内容(1行2列)</td>
  </tr>
  
  <tr>
  <td>内容(2行1列)</td>
  <td>内容(2行2列)</td>
  </tr>

</table>

上の HTML をブラウザで表示すると以下のようになります．

アイテム説明用の表

複数のアイテムの説明に使います(具体例)．第一列がアイテム名，第二列がその説明です．プログラムのリストの説明にも使えます．これは，table を使い作成しますが，表番号はつきません．

アイテム説明に向いた表

<table class="item_explain" summary="表の説明文">
  <col width="幅[pixel]"> <col width="幅[pixel]">
      
  <tr class="top">
    <th>見出し(アイテム)</th>
    <th>見出し(説明)</th>
  </tr>
      
  <tr class="body">
    <td class="item">アイテム</td>
    <td class="explain">アイテムに対する説明</td>
  </tr>

  <tr class="body">
    <td class="item">アイテム</td>
    <td class="explain">アイテムに対する説明</td>
  </tr>

</table>

ひとつのアイテムや説明が短い場合，「<table class="item_explain narrow"」とします．すると，行の上下の隙間が狭くなり，引き締まった表になります．また，「アイテム」や「アイテム対する説明」の中で，<span class="arg"> — </span>を記載するとコマンドの引数を表現できます．

論文のような表 (とにかくシンプル)

論文で書かれるようなシンプルな表の書き方を示します．以下は，その例です．縦の罫線がなく横の計算も最小です．シンプルで美しい表です．

この表の最も上と下の横罫線は「<table rules="rows" style="border-bottom:1px solid; border-top:1px solid">」とします．中間の横線は，「<th style="border-bottom:2px solid">」とします．

最低限の横罫線だけのシンプルな表

<table rules="rows" style="border-bottom:1px solid; border-top:1px solid">

  <colgroup>
    <col style="width:幅px;"></col>
    <col style="width:幅px;"></col>
    <col style="width:幅px;"></col>
  </colgroup>

  <caption style="text-align:left">キャプションを書きます．</caption>

  <tr>
    <th style="border-bottom:2px solid">見出し 1</th>
    <th style="border-bottom:2px solid">見出し 2</th>
    <th style="border-bottom:2px solid">見出し 3</th>
  </tr>

  <tr>
    <td style="border:0px">説明</td>
    <td style="border:0px">説明</td>
    <td style="border:0px">説明</td>
  </tr>

          ︙

</table>

LaTeX のコマンドと出力 (図) のための表

手動で作成

LaTeX のコマンドとその出力(図)を説明する表は，<table class="latex_command_result">を使います(具体例)．このクラスを使うと，比較的簡単に LaTeX 用の表が作成可能です．以下は二列ですが，増やすことも可能です．

LaTeX のための表の書き方

<table class="latex_command_result" summary="表の説明(図表を表示しないブラウザ向け)">
  <caption>表のキャプション</caption>
  <col style="width:コマンドの幅px">
  <col style="width:結果の幅px">
  <col style="width:セパレーターの幅(推奨:5)px">
  <col style="width:コマンドの幅px">
  <col style="width:結果の幅px">

  <tr>yes
    <th class="command">コマンド</th>
    <th class="result">結果</th>
    <th class="separater"></th>
    <th class="command">コマンド</th>
    <th class="result">結果</th>
  </tr>

  <tr>
    <td class="command">LaTeX コマンド</td>
    <td class="result" style="max-width:幅px; max-height:高さpx"><img src="イメージファイルへのパス"></td>
    <td class="separater"></td>
    <td class="command">LaTeX コマンド</td>
    <td class="result" style="max-width:幅px; max-height:高さpx"><img src="イメージファイルへのパス"></td>
  </tr>
  
  <tr>
    <td class="command">LaTeX コマンド</td>
    <td class="result" style="max-width:幅px; max-height:高さpx"><img src="イメージファイルへのパス"></td>
    <td class="separater"></td>
    <td class="command">LaTeX コマンド</td>
    <td class="result" style="max-width:幅px; max-height:高さpx"><img src="イメージファイルへのパス"></td>
  </tr>

</table>

クラスに latex_command_result を使った例

コマンド	出力		コマンド	出力		コマンド	出力		コマンド	出力
\varGamma			\varDelta			\varTheta			\varLambda
\varXi			\varPi			\varSigma			\varUpsilon
\varPhi			\varPsi			\varOmega

プログラムで自動生成

LaTeX 他のコマンドをアウトプットを表にするための専用のプログラムです．以下に表示例を示します．

プログラムの実行例 (ヒエログリフ)

コマンド	出力		コマンド	出力
\textpmhg{abcedf}			\textpmhg{ABCDEF}
\textpmhg{Japan}			\textpmhg{Tokyo}
\textpmhg{Yamamoto}			\textpmhg{Masashi}

プログラム

自動的に表を作成するプログラム一式「mk_table.zip」を解凍すれば，使えます．このプログラムを使うためには，Python3 と LaTeX が必要です．

プログラム一式の内容は，以下の通りです．

入力ファイル

入力ファイルはコマンドファイルとLaTeX ソースファイルです．解凍したファイル群のうち，command.txt が前者で，source.tex が後者です．ファイルの名前を変更することは可能です．その場合は，シェルスクリプトやバッチファイルを書き換えます．

コマンドファイル (command.txt)

これは，HTMLの表を作成する部分と LaTeX のコマンドを記述する部分に分かれます．HTML を作成する部分の入力は以下のとおりです．

LaTeX のコマンドは各業に「番号: 出力の高さ, LaTeX コマンド, 出力ファイル名(*.svg)」を記載します．番号は整数で，0から順番に記載します．出力の高さを変化させると，表示される画像の大きさが変わります．

LaTeX ソースファイル (source.tex)

元となる LaTeX のソースファイルです．このソースファイルの「%test」がコマンドファイルのコマンド部分と入れ替えて画像ファイルを作成します．使用するスタイルファイル (*.sty) を記述する必要があります．

実行方法・表示

実効は，「run.sh」あるいは「run.bat」を起動します．すると，画像ファイル (*.svg) と HTMLファイル (table.html) が作成されます．

以下を目的の HTMLページ (PHP) に記載すると，table.html が読み込まれ表が表示されます．

<?php include "パス/table.html"; ?>

また，入力ファイルの [html] > dir で指定したディレクトリー (例: aa/bb/cc/) の場合，table の id は "aa:bb:cc" です．したがって，「<:a href="#aa:bb:cc">リンク元<:/a>」でリンクを貼ることができます．

ページ作成情報

参考資料

更新履歴

last update:2021/12/31 18:35:45