HTMLタグでホームページ作成(SEO対策) そのG 表を挿入してみよう。

表を挿入して見やすくしよう。

文章を左揃え、中央揃え、左揃えにしてを見やすくなった。

今度は表を挿入してみる。

sample9.html

<HTML>
<HEAD>
<TITLE>
ホームページの作成方法
</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">社長になりたい日記</H1>
<H2 ALIGN="CENTER">社長を目指すため汗みず働く平社員の物語</H2>
<P ALIGN="RIGHT">;更新日 2009.3.15</P>
<HR>
<P>3月10日</P>
<P>
今日は会社であった。最近、<BIG><BIG>定時上がり</BIG></BIG>ではあるが、仕事が詰まっており、苦しんでいる
。<BR>
しかし、家に持ち帰って<S>サービス残業する気はない。</S><BR>
会社は会社。自宅は自宅。<BR><BR>
<SMALL>建前はそうなんだけどね。。</SMALL>
</P>
<HR>
<P>
3月11日
</P>
<P>
今日も会社。<STRONG>早く週末にならないかな。</STRONG><BR>
今週はどこいこうかな。<BR>
残念ながら、<B>家計</B>が<I>財政難</I>で<U>遠出</U>は無理だけど、考えてみるか。<BR>
</P>
<HR>
<P>
3月13日
</P>
<P>
今日は金曜日。定時の日だ。といっても、最近は残業禁止だ。<BR>
<DIV ALIGN="LEFT">
<IMG SRC="yuuhi.jpg" ALT="夕日" WIDTH="320" HEIGHT="240" BORDER="1"><BR>
</DIV>
何気に携帯で撮ってみた。<BR>
夜遅くの残業もなくなってしまったなぁ〜。<BR>
</P>
<HR>
<P>
<TABLE BORDER="1" ALIGN="CENTER">
<CAPTION ALIGN="TOP">今週の残業予定</CAPTION>
<TR ALIGN="RIGHT" VALIGN="TOP">
<TD ALIGN="CENTER">日付</TD>
<TD>3/16</TD>
<TD>3/17</TD>
<TD>3/18</TD>
<TD>3/19</TD>
<TD>3/20</TD>
</TR>
<TR ALIGN="RIGHT" VALIGN="TOP">
<TD ALIGN="CENTER">残業時間</TD>
<TD>2</TD>
<TD>2</TD>
<TD>2</TD>
<TD>2</TD>
<TD>0</TD>
</TR>
</TABLE>
</P>
<HR>
</BODY>
</HTML>

表を作るには以下のタグを使用する。
<TABLE>
<TR>
<TD>

表題をつけたいときは<CAPTION>を使用する。

<TABLE BORDER="1" ALIGN="CENTER">〜</TABLE>で表の枠の太さ、表の位置を決める。
BORDER="1"で枠の太さ、
ALIGN="CENTER"で表の位置
を決める。

<TABLE>を設定した中に、<TR>(行)を設定する。
<TR ALIGN="RIGHT" VALIGN="TOP">〜</TR>で行の設定を行う。
この行ではセルでの文字の位置は右揃え、上揃えと設定する。
デフォルトは左揃え、中央揃え。
行を追加したい場合は、<TR>〜</TR>を追加していく。

<TR>(行)を設定した中に、<TD>(列)を設定する。
<TD ALIGN="CENTER">残業時間</TD>
ここで一つのセルの設定ができる。ALIGN="CENTER"とすれば、このセルだけ、文章を中央揃えにできる。
何も設定しなければ、デフォルト値、あるいは<TR>で設定したものとなる。
列を追加したい場合は、<TD>〜</TD>を追加していく。

表題は<CAPTION ALIGN="TOP">今週の残業予定</CAPTION>でつける。
ALIGN="TOP" or ALIGN="BOTTOM"で表の上か下かに表題をつけられる。


サンプルソースをダウンロードできます。

以上で表の作成方法完了。

文章にリンクを貼ってみよう。


実践!ホームページ作成TOP