×

[PR]この広告は3ヶ月以上更新がないため表示されています。
ホームページを更新後24時間以内に表示されなくなります。

ホームページを作ろう! tableタグ

トップページへ
はじめに
基本タグ
背景の設定
文字タグ
画像タグ
リンクタグ
動くタグ
広告を貼ろう!
次は、tableタグです。tableタグは少し複雑です。

まずは、基本系です。
なぜtrとかtdなんだ?と、思うかも知れませんが、あまり深く
考えないでください。僕も考えたことないです。
brは強制改行です。
<table>
<tr>
<td>
ここに文章を書いたり、<br>
画像を貼ったり<br>
もう一つtableタグを<br>
作ることもできます
</td>
</tr>
</table>
ここに文章を書いたり
画像を貼ったり
もう一つtableタグを
作ることもできます。

borderで外枠を付けます。数字を変えれば、太さが変わります。
<table border="1">
<tr>
<td>
ここに文章を書いたり、<br>
画像を貼ります。
</td>
</tr>
</table>
ここに文章を書いたり
画像を貼ります。
<table border="1">
<tr>
<td>
ここに文章を書いたり、<br>
画像を貼ります。
</td>
</tr>
</table>
ここに文章を書いたり
画像を貼ります。
bordercolorで枠の色を指定できます。
<table border="3" bordercolor="#00ff00">
<tr>
<td>
ここに文章を書いたり、<br>
画像を貼ったり<br>
もう一つtableタグを<br>
作ることもできます
</td>
</tr>
</table>
ここに文章を書いたり
画像を貼ったり
もう一つtableタグを
作ることもできます。

bgcolorで背景色を指定できます。
<table border="3" bgcolor="#00ff00">
<tr>
<td>
ここに文章を書いたり、<br>
画像を貼ったり<br>
もう一つtableタグを<br>
作ることもできます
</td>
</tr>
</table>
ここに文章を書いたり
画像を貼ったり
もう一つtableタグを
作ることもできます。

余白の大きさを変える場合は、cellpaddingを使います。
<table border="3" cellpadding="20">
<tr>
<td>
ここに文章を書いたり、<br>
画像を貼ったり<br>
もう一つtableタグを<br>
作ることもできます
</td>
</tr>
</table>
ここに文章を書いたり
画像を貼ったり
もう一つtableタグを
作ることもできます。

<tr><td>を繰り返すと、枠が縦に増えていきます。
<table border="1">
<tr><td>ここに文章を書いたり、</td></tr>
<tr><td>画像を貼ったり</td></tr>
<tr><td>もう一つtableタグを</td></tr>
<tr><td>作ることもできます</td></tr>
</table>
ここに文章を書いたり
画像を貼ったり
もう一つtableタグを
作ることもできます。

tdだけを増やすと、枠が横に増えていきます
<table border="1">
<tr><td>ここに文章を書いたり、</td>
<td>画像を貼ったり</td>
<td>もう一つtableタグを</td>
<td>作ることもできます</td><tr>
</table>
ここに文章を書いたり 画像を貼ったり もう一つtableタグを 作ることもできます。

widthで横幅、heightで縦幅を決めます。
数字のところを、%でも指定できます。
いま開いているページの縦の何%か、また横の何%かです。
<table width="150" height="100">
<tr>
<td>
ここに文章を書いたり、<br>
画像を貼ったり<br>
</td>
</tr>
</table>
文章を書いたり
画像を貼ったり

特定のタグの大きさだけを変えたいときは、 tdのところに入力してください。
ただ、横に並んでいるセルは縦幅が、 縦に並んでいるセルは横幅が、連動して 同じ大きさになります。
<table border="1">
<tr><td>ここに文章を書いたり、</td>
<td>画像を貼ったり</td>
<td width="150" height="100">もう一つtableタグを</td>
<td>作ることもできます</td><tr>
</table>
ここに文章を書いたり 画像を貼ったり もう一つtableタグを 作ることもできます。

rowspanを入れると、縦に何枠にもまたがったセルを作れます。
<table border="1">
<tr>
<td rowspan="3">ここに文章を書いたり、</td>
<td>画像を貼ったり</td></tr>
<tr><td>もう一つtableタグを</td></tr>
<tr><td>作ることもできます</td></tr>
</table>
ここに文章を書いたり 画像を貼ったり
もう一つtableタグを
作ることもできます。

colspanで横に何枠にもまたがったセルを作れます。
<table border="1">
<tr>
<td colspan="3">ここに文章を書いたり、</td></tr>
<td>画像を貼ったり</td>
<td>もう一つtableタグを</td>
<td>作ることもできます</td>
</table>
ここに文章を書いたり
画像を貼ったり もう一つtableタグを 作ることもできます。

alignでtableの位置を指定できます。
<table border="1" align="center">
<tr>
<td>
ここに文章を書いたり、<br>
画像を貼ったり<br>
もう一つtableタグを<br>
作ることもできます
</td>
</tr>
</table>
ここに文章を書いたり
画像を貼ったり
もう一つtableタグを
作ることもできます。

<table border="1" align="center">
<tr>
<td>
ここに文章を書いたり、<br>
画像を貼ったり<br>
もう一つtableタグを<br>
作ることもできます
</td>
</tr>
</table>
ここに文章を書いたり
画像を貼ったり
もう一つtableタグを
作ることもできます。

横にスクロールバーがあるテーブルを作るときは、
<textarea rows="5" cols="10">
tableタグの
応用編です
ここまでくれば
あともう少し
rowsで縦幅、
colsで横幅を設定します。 </textarea>

  

トップページへ  動くタグ
おすすめリンク

ホームページ

FC2レンタルサーバーLite

サーバー・レンタルサーバー

アフィリエイト・SEO対策

カウンター

無料・レンタル・掲示板

FC2プロフ