毎日いろんなことで頭を悩ましながらも、明日のために頑張ろうと自分を励ましています。
疲れるけど、頑張ろう!
表の作り方
ブログ上で表を作るにはどうしたらいいのか、ずっと知りたいと思っていた。ランキング表や野球のスコアを作っても、必ずどこかにズレが生じて見た目のよくないものになってしまう。今までも調べたことはあったが、「これは!」という方法を見つけられなかった。ところが、先日ひょんなことからブログ上での表の作り方を解説しているページに巡りあって、HTML の入力方法を知ることが出来た。以下に、そこから学んだ「表(テーブル)の作り方」を記してみる。(<>はすべて<>に直すこと)
1.<table>~</table>と、最初と最後を<table>タグで囲みます。「~」にあたるのがテーブルの内容になる。
2.表というのは縦に何マス、横に何マスという風になるので、次は縦のマス目の分だけ<tr>~</tr>を作る。例えば、縦が10マス(10行)ある表を作るには、<tr>~</tr>の部分を10作ることになる。
3.次に横のマス目の分だけ(つまり1行に何マスあるか)、<tr>~</tr>の間に<td>~</td>を埋め込む。例えば2マスの表にするには、一つの<tr>~</tr>の間に<td>~</td>が2つずつ埋め込むことになる。そして<td>~</td>の間に入れるものが、表の中に表示するものとなる。
4.<tr></tr>の部分を増やせば縦のマス目が増え、一つの<tr>~</tr>の中にある<td>~</td>をそれぞれ増やせば、横のマス目を増やすことが出来る。
5.また、<table>の中にborder="1"と入れ、<table border="1">とすると、表の中のマス目を区切る線の太さを示すことになり、この部分を入れないと線のない表になる。
6.さらに、<table>の中にwidth="310"と入れ、<table border="1" width="310">とすると、表の横幅を決めることが出来る。
文字で書かれてもよく分からないから、実際に「スタンリー・キューブリックの作品年表」というものを見つけたので、その作り方を写しておく。
<table border="1">
<tr><td> 1953年</td><td> 恐怖と欲望</td></tr>
<tr><td> 1956年</td><td> 現金に体を張れ</td></tr>
<tr><td> 1957年</td><td> 突撃</td></tr>
<tr><td> 1960年</td><td> スパルタカス</td></tr>
<tr><td> 1962年</td><td> ロリータ</td></tr>
<tr><td> 1964年</td><td> 博士の異常な愛情</td></tr>
<tr><td> 1968年</td><td> 2001年宇宙の旅</td></tr>
<tr><td> 1971年</td><td> 時計じかけのオレンジ</td></tr>
<tr><td> 1975年</td><td> バリー・リンドン</td></tr>
<tr><td> 1980年</td><td> シャイニング</td></tr>
<tr><td> 1987年</td><td> フルメタル・ジャケット</td></tr>
<tr><td> 1999年</td><td> アイズ・ワイド・シャット</td></tr>
</table>
と入力して<>を<>に直すと、こんな表になる。
このやり方で、手元にあった「サンデー毎日」から今年度の高校別・東京大学合格者数ベスト10を表にしてみた(border="3"、width="210"とする)
「2009年度東京大学合格者数ベスト25」
さらには、WBC決勝のスコアボードを作って、熱戦を記録する用意もしておく。
WBC決勝 日本vs. 韓国
1.<table>~</table>と、最初と最後を<table>タグで囲みます。「~」にあたるのがテーブルの内容になる。
2.表というのは縦に何マス、横に何マスという風になるので、次は縦のマス目の分だけ<tr>~</tr>を作る。例えば、縦が10マス(10行)ある表を作るには、<tr>~</tr>の部分を10作ることになる。
3.次に横のマス目の分だけ(つまり1行に何マスあるか)、<tr>~</tr>の間に<td>~</td>を埋め込む。例えば2マスの表にするには、一つの<tr>~</tr>の間に<td>~</td>が2つずつ埋め込むことになる。そして<td>~</td>の間に入れるものが、表の中に表示するものとなる。
4.<tr></tr>の部分を増やせば縦のマス目が増え、一つの<tr>~</tr>の中にある<td>~</td>をそれぞれ増やせば、横のマス目を増やすことが出来る。
5.また、<table>の中にborder="1"と入れ、<table border="1">とすると、表の中のマス目を区切る線の太さを示すことになり、この部分を入れないと線のない表になる。
6.さらに、<table>の中にwidth="310"と入れ、<table border="1" width="310">とすると、表の横幅を決めることが出来る。
文字で書かれてもよく分からないから、実際に「スタンリー・キューブリックの作品年表」というものを見つけたので、その作り方を写しておく。
<table border="1">
<tr><td> 1953年</td><td> 恐怖と欲望</td></tr>
<tr><td> 1956年</td><td> 現金に体を張れ</td></tr>
<tr><td> 1957年</td><td> 突撃</td></tr>
<tr><td> 1960年</td><td> スパルタカス</td></tr>
<tr><td> 1962年</td><td> ロリータ</td></tr>
<tr><td> 1964年</td><td> 博士の異常な愛情</td></tr>
<tr><td> 1968年</td><td> 2001年宇宙の旅</td></tr>
<tr><td> 1971年</td><td> 時計じかけのオレンジ</td></tr>
<tr><td> 1975年</td><td> バリー・リンドン</td></tr>
<tr><td> 1980年</td><td> シャイニング</td></tr>
<tr><td> 1987年</td><td> フルメタル・ジャケット</td></tr>
<tr><td> 1999年</td><td> アイズ・ワイド・シャット</td></tr>
</table>
と入力して<>を<>に直すと、こんな表になる。
1953年 | 恐怖と欲望 |
1956年 | 現金に体を張れ |
1957年 | 突撃 |
1960年 | スパルタカス |
1962年 | ロリータ |
1964年 | 博士の異常な愛情 |
1968年 | 2001年宇宙の旅 |
1971年 | 時計じかけのオレンジ |
1975年 | バリー・リンドン |
1980年 | シャイニング |
1987年 | フルメタル・ジャケット |
1999年 | アイズ・ワイド・シャット |
このやり方で、手元にあった「サンデー毎日」から今年度の高校別・東京大学合格者数ベスト10を表にしてみた(border="3"、width="210"とする)
「2009年度東京大学合格者数ベスト25」
開成(東京) | 130 |
筑波大付駒場(東京) | 97 |
灘(兵庫) | 97 |
麻布(東京) | 71 |
桜蔭(東京) | 67 |
栄光学園(神奈川) | 55 |
聖光学院(神奈川) | 47 |
ラ・サール(鹿児島) | 47 |
東大寺学園(奈良) | 43 |
岡崎(愛知) | 42 |
さらには、WBC決勝のスコアボードを作って、熱戦を記録する用意もしておく。
WBC決勝 日本vs. 韓国
team | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | total |
日本 | 0 | 0 | 1 | 0 | 0 | 0 | 1 | 1 | 0 | 2 | 5 |
韓国 | 0 | 0 | 0 | 0 | 1 | 0 | 0 | 1 | 1 | 0 | 3 |
コメント ( 49 ) | Trackback ( 0 )