今日は疲労が溜まっております、HIDEです。
昨日は遅くまでブログの更新をしてしまったためなのか、
週末に飲みすぎたり、新しく買った自転車で走りすぎたり、ハマっている海外ドラマを観すぎたり・・・
とにかく疲れました。
今週も平日はたっぷり勉強し、週末はたっぷり遊びたいと思います。
徐々に体も慣れていくでしょう。
では、表の作成の仕方について今日は勉強していきましょう。
以前はこのような表を作りました。
今回作るのはこちらです。
少し複雑にしてみました。
どのような時にこのような表を使用するかは分かりませんが、少し複雑な表を作れるようになれば
こんな表も作ることができます。
いつ使うときが来るか分かりません・・・。
ただ、様々なコードを入力してみた結果、なんとなく表の作り方が分かった気がします。
それでは作成していきましょう。
１．表の一番上と左側のセルについて入力。
この時、出来上がりの表を思い浮かべると一番上段のセルは３つのセルを横に跨っているため
colspan=”３”としたいところですが、そうすると一番左側のセルまでTOPの文字が被ってしまいますので
colspan=”１”をまず入力して空白のセルを入れます。その後でcolspan=”２”を入力します。
<th>タグに打ち込んでいけば、表のように見出しっぽくなります。
<td>タグだと他のセルと同じ表示になります。
次に左側のセルですが、このセルは右の4つのセルを縦に跨っているので
rowspan=”４”とします。
colspan=横にいくつ跨るか、 rowspan=縦にいくつ跨るか、と覚えておけばいいでしょう。
２．項目を作成
項目を作成する際は、<td>タグに入力していけば良いです。
ただし、セルの横幅や高さを調整したい場合があると思いますのでその際は
width=”数字”、height=”数字”で調整します。
今回の場合で言うと、widthを規定しない場合はこのようになります。
colspanやrowspan、widthやheightを活用して思い描くような表を作れるようになれば
<tr><th><td>タグをマスターしたと言えると思います。
<tr></tr>タグの配置を誤ると表も崩れてしまいますので、
もし表がおかしくなったら<tr>タグの場所を変えてみるといいかもしれません。
HIDE