網上葉の書き方


その拾  表の作りかた 貳


東川吉嗣


  ここでは、網上葉の「表」をさらに詳しく表現するしかたについて述べる。
表に題名をつける
  表に題名をつけて表示するには、題名とすべき文字群を「<caption>」と「</caption>」で挾んで、「<table>」の指示に續いて、「<tr>」の前に入れる。前にあげた例の表に「表のすがた」といふ題目をつけるには、

<table border=1 bordercolor=#00ff00>
<caption>表のすがた</caption>
<tr><td>第一列目に</td><td>入れたい</td><td>文字群</td></tr>
<tr><td>二番目の列に</td><td>示して見たい</td><td>文字の群</td></tr>
<tr><td>三つ目の横の並びに</td><td>並べたい</td><td>もの</td></tr>
</table>

とすると、その結果は、次のやうに表現される。

表のすがた
第一列目に入れたい文字群
二番目の列に示して見たい文字の群
三つ目の横の並びに並べたいもの

  このやうに、題目は表本體の上で中央の位置に表示される。この題目の位置を表本體の下に表示させるには、「valign=bottom」といふ指示を付加する。上の例で、「<caption>表のすがた</caption>」に代へて、「<caption valign=bottom>表のすがた</caption>」と指示すると、次のやうに表現される。

表のすがた
第一列目に入れたい文字群
二番目の列に示して見たい文字の群
三つ目の横の並びに並べたいもの

  題目を左寄せに表記したいときは、「align=left」といふ指示を付加する。その結果は次のやうに表現される。

表のすがた
第一列目に入れたい文字群
二番目の列に示して見たい文字の群
三つ目の横の並びに並べたいもの

  題目を右寄せに表記したいときは、「align=right」といふ指示を付加する。その結果は次のやうに表現される。

表のすがた
第一列目に入れたい文字群
二番目の列に示して見たい文字の群
三つ目の横の並びに並べたいもの

  題目を本體の下に、左寄せに表記したいときは、「align=left」といふ指示と「valign=bottom」といふ指示を合はせて用ゐる。「<caption align=left valign=bottom>表のすがた</caption>」と指示した結果は次のやうに表現される。

表のすがた
第一列目に入れたい文字群
二番目の列に示して見たい文字の群
三つ目の横の並びに並べたいもの

  表題の文字群に色を着けたいとき、文字の大きさを變へたいとき、文字の見えたかを變へたいときなどは、文字群の場合と同じである。例へば、「表のすがた」と言ふ題目を左に寄せて、「ff0000」の色を着けて、「+3」の文字で、「下線を引く」ならば、「<caption align=left><font color=#ff0000 size=+3><u>表のすがた</u></font></caption>」と指示すると、次のやうに表現される。

表のすがた
第一列目に入れたい文字群
二番目の列に示して見たい文字の群
三つ目の横の並びに並べたいもの

小間に見出しをつける
  表の中で、それぞれの行の先頭の小間や、それぞれの列の先頭の小間に、項目名などを入れてほかの小間と區別したいときは、「<td></td>」に代へて、「<th></th>」を用ゐる。先の例に、適當な項目名を入れて、小間を増やしてみると。

<table border=1 bordercolor=#00ff00>
<caption align=left><font color=#ff0000 size=+3><u>表のすがた</u></font></caption>
<tr><th>項の名</th><th>いの項</th><th>ろの項</th><th>はの項</th></tr>
<tr><th>甲の項</th><td>第一列目に</td><td>入れたい</td><td>文字群</td></tr>
<tr><th>乙の項</th><td>二番目の列に</td><td>示して見たい</td><td>文字の群</td></tr>
<tr><th>丙の項</th><td>三つ目の横の並びに</td><td>並べたい</td><td>もの</td></tr>
</table>

と指定して、その結果は、次のやうになる。

表のすがた
項の名いの項ろの項はの項
甲の項第一列目に入れたい文字群
乙の項二番目の列に示して見たい文字の群
丙の項三つ目の横の並びに並べたいもの

表に色を着ける
  いま、次のやうな表があるとする。
   「
いろは十干
項の名いの項ろの項はの項にの項ほの項
甲の項いの甲ろの甲はの甲にの甲ほの甲
乙の項いの乙ろの乙はの乙にの乙ほの乙
丙の項いの丙ろの丙はの丙にの丙ほの丙
丁の項いの丁ろの丁はの丁にの丁ほの丁
戊の項いの戊ろの戊はの戊にの戊ほの戊

  この表の全部の下地に色を着けるには、「<table>」のところで色の指示をする。下地の色指定は、「bgcolor=#nnnnnn」と指示する。上の例を「ff69b4」に指定するには、「<table border=1 bordercolor=#00ff00 bgcolor=#ff69b4>」とすると、次のやうになる。

いろは十干
項の名いの項ろの項はの項にの項ほの項
甲の項いの甲ろの甲はの甲にの甲ほの甲
乙の項いの乙ろの乙はの乙にの乙ほの乙
丙の項いの丙ろの丙はの丙にの丙ほの丙
丁の項いの丁ろの丁はの丁にの丁ほの丁
戊の項いの戊ろの戊はの戊にの戊ほの戊

 表の中の特定の行、例へば「甲の項の列び」だけ、下地の色を變へるには、その列びを指定してゐる「tr」のところで「bgcolor=#nnnnnn」を指示する。上の例を「00ff00」に指定すると、「<tr bgcolor=#00ff00>」とすると、次のやうになる。

いろは十干
項の名いの項ろの項はの項にの項ほの項
甲の項いの甲ろの甲はの甲にの甲ほの甲
乙の項いの乙ろの乙はの乙にの乙ほの乙
丙の項いの丙ろの丙はの丙にの丙ほの丙
丁の項いの丁ろの丁はの丁にの丁ほの丁
戊の項いの戊ろの戊はの戊にの戊ほの戊

  特定の小間のみ下地の色を指定するには、その小間の「th」もしくは「td」のところで指定する、例へば「<th bgcolor=#87cebb>ろの項</th>」、「<td bgcolor=#ff0000>にの丁</td>」と指定すると、次のやうになる。

いろは十干
項の名いの項ろの項はの項にの項ほの項
甲の項いの甲ろの甲はの甲にの甲ほの甲
乙の項いの乙ろの乙はの乙にの乙ほの乙
丙の項いの丙ろの丙はの丙にの丙ほの丙
丁の項いの丁ろの丁はの丁にの丁ほの丁
戊の項いの戊ろの戊はの戊にの戊ほの戊

小間の中の文字の位置
  次のやうな表がある場合、

いろは十干
項の名 い の 項 ろ の 項 は の 項 に の 項 ほ の 項
甲の項いの甲ろの甲はの甲にの甲ほの甲
乙の項いの乙ろの乙はの乙にの乙ほの乙
丙の項いの丙ろの丙はの丙にの丙ほの丙
丁の項いの丁ろの丁はの丁にの丁ほの丁
戊の項いの戊ろの戊はの戊にの戊ほの戊

小間の中の文字は、左寄せで表現されてゐる。これを、「ろの丙」と言ふ小間の中だけ、文字を中央に表示させるには、<td align=center>ろの丙</td>」と、「はの丁」と言ふ小間の中だけ、文字を右寄せに表示させるには、「<td align=right>はの丁</td>」と、指定する。

いろは十干
項の名 い の 項 ろ の 項 は の 項 に の 項 ほ の 項
甲の項いの甲ろの甲はの甲にの甲ほの甲
乙の項いの乙ろの乙はの乙にの乙ほの乙
丙の項いの丙ろの丙はの丙にの丙ほの丙
丁の項いの丁ろの丁はの丁にの丁ほの丁
戊の項いの戊ろの戊はの戊にの戊ほの戊

  小間の中の文字を改行するには、「<br>」と、指定する。「丁の項」および「戊の項」を三行に書くと、次のやうに表現される。

いろは十干
項の名 い の 項 ろ の 項 は の 項 に の 項 ほ の 項
甲の項いの甲ろの甲はの甲にの甲ほの甲
乙の項いの乙ろの乙はの乙にの乙ほの乙
丙の項いの丙ろの丙はの丙にの丙ほの丙


いの丁ろの丁はの丁にの丁ほの丁


いの戊ろの戊はの戊にの戊ほの戊

  小間の天地が大きい時は、小間の中の文字群は、天地中央部に左寄りに表現される。この文字群を小間の天に表示させるには、「valign="top"」と、地に表示させるには「valign="bottom"」と指示する。指示のないときは「valign="middle"」と指示下のと同じ、天地の中央部に表示される。今、「丁の項」は、天寄りに、「はの戊」の小間は地に表示させるには、「丁の項」の行の初めの箇所で、「<tr valign="top">」と、および「はの戊」の小間については「<td valign="bottom">」と指定した時の表現は、次のやうになる。

いろは十干
項の名 い の 項 ろ の 項 は の 項 に の 項 ほ の 項
甲の項いの甲ろの甲はの甲にの甲ほの甲
乙の項いの乙ろの乙はの乙にの乙ほの乙
丙の項いの丙ろの丙はの丙にの丙ほの丙


いの丁ろの丁はの丁にの丁ほの丁


いの戊ろの戊はの戊にの戊ほの戊

  これで推察出來るやうに、「はの丁」の小間の文字は、「align=right」と「valign="top"」の二つの指定が効果を見せてゐる。このやうにして、一つ一つの小間について、下地の色、文字の色、文字の大きさや書體、文字の表示位置などを細かく指定することが出來る。


目次へ  その九へ  その拾一へ  資料  色、數値、名前の對照表へ  
この網上葉の履歴
○平成二十九年四月十六日、電子飛脚の宛先番地の訂正。
○平成二十二年四月二十四日、電子飛脚の宛先番地の訂正。
○平成十五年十一月二十日、掲載開始。

制作者  東川吉嗣  平成十五年、乃至二十九年
CopyRight © 2003 - 2017   Higasikawa Yositugu

SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送