　表を作ろう

表の作り方

表を作ろう

　表を作る　<table border="幅の数位">　

　基本は(１)罫線表示　(０)を指定した場合は罫線は表示しません。
　</table>　終了タグーは必ず付けましょう

1	2	3
a	b	c
あ	い	う

　表のそれぞれのセルの中のデータに付ける <td> <table>(データ)　
　横のよこ一行ずつに付ける　<tr> <table row>　
　表全体に付ける　<table>

　線無しで、横に並べる　

１

２

３

４

　上に２行　下に２行　

a	b
あ	い

　線を入れる　<table border="数位">

a	b
あ	い

　表の横にヘッダにを付ける　(左上側が強調)

　(<td>の変わりに<th>を使います)

　

a b

あい

　　　　　　　 <table border="1">
<tr><th>a</th><td>b</td></tr>　
<tr><td>あ</td><td>い</td></tr>　
</table>

　表の縦にヘッダにを付ける　(左側が強調)

　(<td>の変わりに<th>を使います)

a	b
あ	い

　表の縦・横にヘッダにを付ける　(左側・上側が強調)

　( <td>の変わりに<th>を使います )

	1	2
a	b	c
あ	い	う

　キャプション(題名/説明文)を付ける　[表の上に付ける]

　

題名/説明文
テイト次　　

た下です

　　 <table border="1">
<caption>題名/説明文</caption>　
<tr><th>テイト</th><td>次</td></tr>　
<tr><th>た</th><td>下です</td></tr>　
</table>

　キャプション(題名/説明文)を下に付ける　

題名/説明文
テイト	次
た	下です

　キャプション(題名/説明文)を左に付ける　

　　<caption align="left">題名/説明文

題名/説明文
テスト＿＿＿＿＿＿	テスト＿＿＿＿＿＿

　キャプション(題名/説明文)を右に付ける　

　　<caption align="right">題名/説明文

題名/説明文
テスト＿＿＿＿＿＿	テスト＿＿＿＿＿＿

　　　複数の項目にまたがるセルを作る　　　

　横にまたがるセルを作る　

　

テイト

た下ですく

　　 <table border="1">
<tr><th colspan="3">テイト</th></tr>　
<tr><th> た </th><td>下です</td><td> く </td></tr>　
</table>　

　縦にまたがるセルを作る　

　

テイト次か

い中です

た下です

　　 <table border="1">
<tr><th rowspan="3">テイト</th><td>次</td><td>か</td></tr>　
<tr><td>い</td><td>中です</td></tr>　
<tr><td>た</td><td>下です</td></tr>　
</table>　

　縦横にまたがるセルを作る　

　

　横セル

縦
セ
ル a b c

d e f

た下り

　　 <table border="1">
<tr><td></td><th colspan="3">横セル</th></tr>　
<th rowspan="3">縦<br>セ<br>ル<td>a</td><td>b</td><td>c</td></tr>　
<tr><td>d</td><td>e</td><td>f</td></tr>　
<tr><td>た</td><td>下</td><td>り</td></tr>　
</table>　

　セルの中のテキストをレイアウトする　

　　(横方向)<td> <th> <tr>に有効

　

　テキストを左・中・右に振り分ける(寄せる)　

　<td align="位置">　("left"　左)　("center"　中)　("right"　右)

　

左・・・・・・・中・・・・・・・・右

左

中

右

　　 <table border="1">
<tr><td>左・・・・・・・中・・・・・・・・右</td></tr>　
<tr><td align="left">左</td></tr>　
<tr><td align="center">中</td></tr>　
<tr><td align="right">右</td></tr>　
</table>　

　セルの中のテキストをレイアウトする　

　　(縦方向)<td> <th> <tr>に有効

　

　テキストを上・中・下に振り分ける(寄せる)　
　
<td rowspan="またがる数"valign="位置"> 　("top"　上) ("middle"　中)　("bottom" 下)

　

上です中です下ですａａａ

ｏｏｏ

ｚｚｚ

　 <table border="1">　
<tr>
<td rowspan="3"valign="top">上です</td>　
<td rowspan="3"valign="middle">中です</td>　
<td rowspan="3"valign="bottom">下です</td>　
<td>ａａａ</td></tr>　
<tr><td>ｏｏｏ</td></tr>　
<tr><td>ｚｚｚ</td></tr>　
</table>

　セル内のフォントのサイズを変えたい　

　<font size="大きさ">　　("１"＜"７")

<table border="1">
<tr><td>普通の文字・・・・・</td>
<td><font size="6">大きい文字・・・・・</td>
</tr>　
</table>

普通の文字・・・・・・！

大きい文字・・・・・・！

　セル内のフォントのサイズを変えたい　
　左右のセルの１行めの文字を揃えたい　(下ぞろえ)

　　<valign="baseline">　　("baseline"　)　

<table border="1">
<tr valign="baseline">
<td>普通の文字・・・・</td>
<td><font size="6">大きい文字・・・・・・</td>
</tr>　
</table>

普通の文字・・・・・！

大きい文字・・・・！

　表の大きさを設定したい　

　　<table width="横幅"height="縦幅">　　　線長指定

大きく成ったかな？

<table border="1" width="300" height="100">
<tr>大きく成ったかな？</tr>
</table>

　線の画面あたりのパーセント　

　　<table width="横幅%"height="縦幅%">　

　<table border="1" width="60%" height="50%"><tr>大きく成ったかな？</tr></table>

大きく成ったかな？

　セル内のテキスト、との間隔を調節したい　

　　<table border="1" cellpadding="間隔数位">　０～

11	22	33
a	b	c
ああ	いい	うう

　罫線に色を色を付けたい　

罫線	線に色が付いたかな？
罫線２	線に色が付いた？

<table border="1" bordercolor="#ff8000">
<tr><th>　罫線</th><td>　線に色が付いたかな？</td></tr>　
<tr><th>　罫線２</th><td>　線に色が付いた？</td></tr>　
</table>

　罫線の中に色を付けたい　

罫線	中に色が付いたかな？
罫線	中に色が付いた？

<table border="1">
<tr><th>罫線</th> <td bgcolor="#80ff80">中に色が付いたかな？</td></tr>
<tr><th>罫線</th> <td bgcolor="#ff00ff">中に色が付いた？</td></tr>
</table>

　表のバックに画像を入れたい　

　　<table background="画像">　　　画像指定

画像が入ったかな？

<table background="POST.GIF">
<tr>画像が入ったかな？</tr>
</table>

　罫線の外枠の表示させる部分を選ぶ　

　　<table border="幅" frame="表示部分指定">
　　frame=(表示部分指定一個だけ指定)
　　frame="box"　　　四方全部を表示　余り意味がない(笑)
　　frame="void" 　　周り全部を表示し無い
　　frame="hsides"　上下のみを表示
　　frame="vsides"　左右だけを表示
　　frame="above"　上部だけを表示
　　frame="below"　下部だけを表示
　　frame="lhs"　　　左だけを表示
　　frame="rhs"　　　右部だけを表示

罫線	線が表示したかな？
罫線２	線が消えたたかな？

<table border="1" frame="rhs">
<tr><th>　罫線</th><td>　線が表示したかな？</td></tr>　
<tr><th>　罫線２</th><td>　線が消えたたかな？</td></tr>　
</table>

　罫線の内線の表示させる部分を選ぶ　

　　<table border="幅" rules="表示部分指定">
　　rules=(表示部分指定一個だけ指定)
　　rules="all"　　　　中全部を表示　余り意味がない(笑)
　　rules="none" 　　罫線の表示し無い
　　rules="groups"　グループ間の境界線のみを表示
　　rules="rows" 　　横列の罫線のみを表示
　　rules="cols" 　　縦行の罫線のみを表示

罫線	線が表示したかな？
罫線２	線が消えたたかな？

<table border="1" rules="cols">
<tr><th>　罫線</th><td>　線が表示したかな？</td></tr>　
<tr><th>　罫線２</th><td>　線が消えたたかな？</td></tr>　
</table>

　罫線(外)め太さを指定して立体に見せたい　（立体指定）

　<table border="外枠幅の値数">　　(０～　)数字が大きいほど立体に見える。

罫線	立体に成ったかな？
罫線２	立体に成った？

<table border="20">
<tr><th>　罫線</th>
<td>　立体に成ったかな？</td></tr>　
<tr><th>　罫線２</th>
<td>　立体に成った？</td></tr>　
</table>

　罫線(外)の太さを指定して　谷に見せたい　（立体指定）

　<table border="外枠幅の値数" bordercolorlight="#上枠色の値数" bordercolordark="#下枠色の値数">
　(０～　)数字が大きいほど引っ込んで見える。

罫線	へこんだかな？
罫線２	凹んだかな？

<table border="20" bordercolorlight="#777777" bordercolordark="#cccccc">
<tr><th>　罫線</th>
<td>　へこんだかな？</td></tr>　
<tr><th>　罫線２</th>
<td>　凹んだかな？　</td></tr>　
</table>

　罫線(外)の太さを指定して　色を付けたい

　<table border="外枠幅の値数" bordercolor="#外枠色の値数"> 　(#０～　)色が付く

罫線	幅広枠？
罫線２	広く成ったかな？

<table border="20" bordercolor="#cc0000">
<tr><th>　罫線</th>
<td>　幅広枠？</td></tr>　
<tr><th>　罫線２</th>
<td>　広く成ったかな？　</td></tr>　
</table>

　罫線の太さを全部太くしたい　

　<table border cellspacing="値数">　　　(０～　)数字が大きいほど厚く見える。

罫線	幅広く成ったかな？
罫線２	幅広くに成った？

<table border cellspacing="20">
<tr><th>　罫線</th>
<td>　立体に成ったかな？</td></tr>　
<tr><th>　罫線２</th>
<td>　立体に成った？</td></tr>　
</table>

　罫線(外＆中)の太さを指定して　上記の組合わせ

罫線	幅広枠？
罫線２	中の線には色が付けられない残念

<table border="20" cellspacing="20" bordercolorlight="#777777" bordercolordark="#cccccc">
<tr><th>　罫線</th>
<td>　幅広枠？</td></tr>　
<tr><th>　罫線２</th>
<td>　中の線には色が付けられない残念　</td></tr>　
</table>

　罫線(下にだけ罫線を付ける)

中

エンドです。