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 /
ご意見、感想、苦情は、
こちらへ...
|