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