|
|
次は、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>
|
|
トップページへ 動くタグ
|
|
tableタグ