初めてのHTML　-基本的なタグ<table>- ＠TWクラブ【BloodyRosary】製作


次はこれ。

<table>


テーブル。今までのタグとは一味違い、
ちょっと難しくなる！が、サイトのレイアウトをいい感じにするのに
なかなかの威力がある！


↓のような感じ。

アイテムリスト（左が名前、右が効果）

薬草	HP50000回復
ライフリザレア	HP8000000、MP4500000回復
霊聖草ヒナギク	死亡状態のキャラを復活

↓　中身はこんな感じ

<p>アイテムリスト（左が名前、右が効果）</p>
<table border=1 summary="item">
<tr>
<td>薬草</td><td>HP50000回復</td>
</tr>
<tr>
<td>ライフリザレア</td><td>HP8000000、MP4500000回復</td>
</tr>
<tr>
<td>霊聖草ヒナギク</td><td>死亡状態のキャラを復活</td>
</tr>
</table>


お気づきだろうか？？
今までこのサイトの説明部分で四角く囲ってあったやつ、
つまり、それがtableだったのだ！！！




まずは「table」　と直接書いてあるものから説明。

『<table> </table>』で囲まれた部分が、テーブルになる。
このtableの中にある、『border』ってのがあるが、
これは枠線の太さを指定できる。太さは１とか２とか。
ちなみに５とかにすると…。

こうなる



次にsummaryだが、アクセス性向上のために～………ということで、
入れないとエラーになる。てきとーな文字でも入れておこう。

例では『item』とかそれっぽいの入れてるけど、てきとーだから。『1』とか『a』でもおｋｗ




次は『<tr>』かな。
これはテーブルの行を示している。
『<tr> </tr>』の区間に、その行に入れるもんを入れる。
/trで改行、みたいなイメージ。

次は『<td>』。
これはテーブルの列を示している。
trで囲まれた行内の列、つまりこれを増やせば増やすほど、横に伸びる。
『<td> </td>』の区間に、文字とかリンクとか、画像なんかも入れることができる。



例の１つを抜粋して見てみよう。


わかりにくいかもだが、薬草とHP50000回復の間に、ちゃんとtd、/tdで
区分けされている。



↑こうしたほうがわかりやすいだろうか？



それでは、test2.htmlを改良してみよう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja-JP">
<head>

<link rel="stylesheet" href="default.css" type="text/css">
<link rel="prev" href="index.html">
<link rev="made" href="mailto:mai_tukamoto@infoseek.jp">

<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<title>ここは次のページだ</title>
</head>
<body>

<h1>昨日の一言</h1><br>

<p>
俺を信じろ、アル！<br>
</p>

<p>一昨日以前の一言</p>
<table border=1 summary="item">
<tr>
<td>１週間前</td><td>雷がいい感じ。</td>
</tr>
<tr>
<td>１ヶ月前</td><td>七転八倒、火車も涼しく。</td>
</tr>
<tr>
<td>半年前</td><td>泣けばいいさ。大声上げて。</td>
</tr>
</table>

</body>
</html>

↓こんな感じで表示されるはず。


これで、リストなどの簡単なレイアウトができるようになった☆


次へ(スタイルシート)


前へ(基本的なタグ<a>)


目次へ



別館TOPに戻る

ブログに戻る

初めてのHTML -基本的なタグ<table>- ＠TWクラブ【BloodyRosary】製作

初めてのHTML　-基本的なタグ<table>- ＠TWクラブ【BloodyRosary】製作