esprits top Esprit's Style

    -    エンジニアの足つぼ    -

テーブル

〆 いろいろなテーブルを作成します

<table ??>, <tr>, <td>, <th>


1.まずは基本のテーブルです。

<table>
  <tr>
    <th> ヘッダー1</th>
    <th> ヘッダー2</th>
  </tr>
  <tr>
    <td> ノルウェー</td>
    <td> オスロ </td>
  </tr>
  <tr>
    <td> スウェーデン</td>
    <td> ストック </td>
  </tr>
</table>
国名 首都 通貨
ノルウェー オスロ ノルウェークローネ
スウェーデン ストックホルム スウェーデンクローネ
フィンランド ヘルシンキ マルカ→ ユーロ€
デンマーク コペンハーゲン デンマーククローネ
エストニア タリン クロン
ラトビア リガ ラッツ
リトアニア ビリニュス リタス→ ユーロ€

2.テーブル内の表示位置を設定します

<td align="left, center, right" valign="top, middle, bottom">

<table>
  <tr>
    <td align="left" valign="top">(北西)
    <td align="center" valign="top"> 玄武(北)
    <td align="right" valign="top"> 鬼門(北東) 
  </tr>
  <tr>
    <td align="left" valign="middle"> 白虎(西) 
    <td align="center" valign="middle"> 四神獣 

    <td align="right" valign="middle"> 青龍(東)
  </tr>
  <tr>
    <td align="left" valign="bottom">(南西)

    <td align="center" valign="bottom"> 朱雀(南)
    <td align="right" valign="bottom">(南東)
  </tr>
</table>
(北西) 玄武(北) 鬼門(北東)
白虎(西) 四神獣 青龍(東)
(南西) 朱雀(南) (南東)

3.テーブルの外枠の太さの調節します

<table border="外枠の太さを指定">

<table border="5">
  <tr>
    <td> 壱 </td>
    <td> 弐 </td>
  </tr>
  <tr>
    <td> 参 </td>
    <td> 四 </td>
  </tr>
</table>
睦月 如月
弥生 卯月

4.テーブルのセル内の余白(枠と内容の間隔)の設定を行います

<table cellpadding ="セル内の余白を指定">

<table cellpadding="12">
  <tr>
    <td> 伍 </td>
    <td> 六 </td>
  </tr>
  <tr>
    <td> 七 </td>
    <td> 八 </td>
  </tr>
</table>
皐月 水無月
文月 葉月

5.テーブルの外枠からセルまでの間隔、セルとセルの間隔の調節をします

<table cellspacing="外枠からセルまでの間隔、セルとセルの間隔を指定">

<table cellspacing="10">
  <tr>
    <td> 九 </td>
    <td> 十 </td>
  </tr>
  <tr>
    <td> 十一 </td>
    <td> 十弐 </td>
  </tr>
 </table>
長月 神無月
霜月 師走

6.テーブルにタイトルをつけます

<caption> テーブル名 </caption>

<table>
<cation>
   テーブルタイトル
  </caption>
  <tr>
    <td> Α,Β,Γ,Δ,Ε,Ζ </td>
    <td> A,V,G,D,E,Z </td>
    <td> </td>
  <tr>
    <td> Η,Θ,Ι,Κ,Λ,Μ </td>
    <td> I,TH,I,K,L,M </td>
  </tr>
  <tr>
    <td> Ν,Ξ,Ο,Π,Ρ,Σ </td>
    <td> N,X,O,P,R,S </td>
  </tr>
  <tr>
    <td> Τ,Φ,Χ,Ψ,Ω </td>
    <td> T,F,CH,PS,O </td>
  </tr>
</table>

ギリシア神話 オリンポス12神
ギリシア名 英語名 詳細
ゼウス ジュピター 全知全能の神
ポセイドン ネプチューン 海神、海王星
ヘラ ジュノー 女性の守護神
デメテル ケレス 植物と豊穣の女神
アテナ ミネルヴァ 知恵と芸術の女神
ヘファイストス バルカン 火と鍛冶の神、アフロディテの夫
アレス マース 軍神、火星
アポロン アポロ 太陽神
アルテミス ディアナ 月の神、アポロンと双子
ヘルメス マーキュリー 商業、旅人の守護神、水星
アフロディテ ヴィーナス 美と愛欲の神
ディオニソス バッカス ブドウとワインの神

7.テーブルのセルを結合します

<td colspan="結合する行の数">,  <th colspan="?">
<td rowspan="結合する列の数">,  <th rowspan="?">

<table> 
<tr>
  <th colspan="2"> ビールの種類  </th>
  <th> 主な産地 </th>
</tr>
<tr>
  <td rowspan="2"> ラガー </td>
  <td rowspan="2"> すっきり </td>
  <td> 日本、ドイツ、チェコ </td>
</tr>
</table>
ビールの種類 主な産地
ラガー すっきり 日本、ドイツ、チェコ
アメリカ、カナダ
エール フルーティ イギリス、ベルギー

8.テーブルの大きさ、セルの大きさを調節します

<table width="??", height="??">
<td   width="??", height="??">

<table width=230>
<tr>
  <th colspan="3"> りんごの種類 </th>
</tr>
<tr>
  <td width="100"height="70">
    ふじ </td>
  <td> 陸奥 </td>
  <td> 紅玉 </td>
</tr>
<tr>
  <td  height="40"> 王林 </td>
  <td> つがる </td>
  <td> 北斗 </td>
</tr>
</table>
りんごの種類
ふじ 陸奥 紅玉
王林 つがる 北斗

9.テーブルの罫線、背景に色をつけます

<table bordercolor="罫線の色">
<table bgcolor="表全体の背景色">
<td bgcolor="セルの背景色">

<table  bgcolor="表全体の背景色"
     bordercolor="罫線の色">
  <tr>
    <th colspan="3"  bgcolor="セルの背景色">
         コーヒーの種類 </th>
  </tr>
  <tr>
    <td bgcolor="セルの背景色">
         カフェ </td>
  <td>   </td>
    <td bgcolor="セルの背景色">
        (伊)コーヒー </td>
  </tr>
</table>
コーヒーの種類
カフェ   (伊)コーヒー
エスプレッソ 圧力をかけて抽出したコーヒー (伊)espresso = 高速
カプチーノ エスプレッソ + ホットミルク + ミルクフォーム  
カフェ・ラテ エスプレッソ + ホットミルク (伊)latte = milk
カフェ・オレ フランス版コーヒー牛乳 コーヒー + ミルク (仏)au lait = with milk
カフェ・マキアート エスプレッソ + ミルクフォームを少し (伊)マキアート = 染み
カフェ・アメリカーノ エスプレッソ + お湯  
カフェ・モカ エスプレッソ +チョコレートシロップ+ ホットミルク  

10.テーブルの外枠、枠線の表示形式を指定します

<table frame="void, above, below, lhs, rhs, hsides, vsides, box, border">

<table  frame="void">
  <tr>
    <td> 山女 </td><td> < 河豚 </td>
  </tr>
  <tr>
    <td> 海鼠 </td><td> 海豚 </td>
  </tr>
</table>
frame="lhs(左)"
frame="above(上)"
frame="rhs(右)"
frame="hsides(上下)"
浅蜊
frame="box(all)"
海栗 海鞘
frame="vsides(左右)"
九絵 鶏魚
喜知次 春告魚
※読めない漢字は、マウスオーバしてね

11.テーブルの枠線の表示形式を指定します

<table rules="none, rows, cols, groups, all">

<table  rules="none">
  <tr><td> みかん </td><td> りんご </td></tr>
  <tr><td> れもん </td><td> びわ </td></tr>
  <tr><th> さくらんぼ </th><th> ぶどう </th></tr>
</table>
蜜柑 林檎
檸檬 枇杷
桜桃 葡萄
rules="groups"
杏  李 
rules="rows"
西瓜 南瓜
柚子 石榴
伊予柑 無花果
rules="cols"
銀杏 胡桃
金平糖 花梨糖
最中 饅頭
rules="all"
餡蜜
甘納豆 羊羹
煎餅 心太

12.テーブルの横の行をグループ化します

<thead>, <tbody, <tfoot>

※表のヘッダとフッタに別の書式を設定したいときに利用します。
※利用するときはかならず<thead>, <tfoot>,<tbodyの順番に記述します。

<table>
<thead bgcolor="オレンジ">
  <tr><th> ① </th><th> ② </th></tr>
</thead>
<tfoot bgcolor="グリーン">
  <tr><td> ⑪ </td><td> ⑫ </td></tr>
</tfoot>
<tbody bgcolor="ベージュ">
  <tr><td> ③ </td><td> ④ </td></tr>
  <tr><td> ⑤ </td><td> ⑥ </td></tr>
  <tr><td> ⑦ </td><td> ⑧ </td></tr>
  <tr><td> ⑨ </td><td> ⑩ </td></tr>
</tbody>
</table>
天気 読み
にじ
くもり
しも
ひょう
あられ

13.テーブルの縦の列をグループ化します

<col span="縦列数" width="幅">

※表の列ごとの書式を設定したいときに利用します。
Netscapeだとうまくみえない?!

<table>
  <col span="1" bgcolor="オレンジ">
  <col span="2" bgcolor="ベージュ">
  <tr>
    <th> Ⅰ </th><th> Ⅱ </th>
  </tr>
  <tr>
    <td> Ⅳ </td><td> Ⅴ </td>
  </tr>
  <tr>
    <td> Ⅶ </td><td> Ⅷ </td>
  </tr>
  <tr>
    <td> Ⅹ </td><td> 11 </td>
  </tr>
  <tr>
    <td> 13 </td><td> 14 </td>
  </tr>
</table>
蝙蝠 bat こうもり
驢馬 donkey ろば
栗鼠 squirre りす
駱駝 camel らくだ
麒麟 giraff きりん
crocodile わに
rhinoceros さい
河馬 hippopotamus かば

14.テーブルの枠線を border=1 より細くします

<table border="0" bgcolor="#000000"
    cellpadding="0" cellspacing="0">
  <tr><td>
    <table border="0" width="190"
      cellpadding="2" cellspacing="1">
      <tr bgcolor="#ffffffff">
        <td> 1 </td><td> UNO </td>
        <td> 2 </td><td> DOS </td>
        <td> 3 </td><td> TRES </td>
        </tr>
    </table>
  </tr></td>
</table>
Color Reveral Film
FUJICROME Velvia
PROVIA
ASTIA
TOREBI
SensiaⅢ
Kodachrome E100VS
EKTACHROME DYNA High Color
DYNA EX100
KonicaChrome SINBI
森羅
AGFA Chrome RSXⅡ
CT precisa
The link to this site is free.   /   Last Updated : 28.May.2012   
Copyright © ESPRITS STYLE. 2003-2007   /   ご意見、感想、苦情は、 こちらへ...
counter