table de おかたづけ
| ■■■ | ★★★ 表（table) で 整理 ★★★ | ■■■ |
★★★ 整頓しましょ 遊びましょ ★★★
自動改行（初心者向け）と自動改行なし（<BR>タグで指定）がありますが
改行なしで作成されることを基準にして説明しますのでご了承ください
★単純に簡単に整理がした～い という方
難しく考えると 大変なので
横に並んでるものや 整理したいよぉ っと思っておられる方
ｺﾚ以下をお読みくださいませ＾＾
| 1-1 | 1-2 |
| 2-1 | 2-2 |
ｺﾚは table という要素を使って 表を作成し
その中に数字を納めたものです
表組 table の 基本的なﾀｸﾞです
<TABLE border="1">
<TBODY>
<TR>
<TD>1-1</TD>
<TD>1-2</TD>
</TR>
<TR>
<TD>2-1</TD>
<TD>2-2</TD>
</TR>
</TBODY>
</TABLE>
<TABLE border="1">
<TBODY>
<TR>
<TD>1-1</TD>
<TD>1-2</TD>
</TR>
<TR>
<TD>2-1</TD>
<TD>2-2</TD>
</TR>
</TBODY>
</TABLE>
<TABLE >で始まり</TABLE>で終わる
この間に
縦横に並ぶセルを作ります
←赤い文字にした部分です
TRは行の定義 指示します
TDは列の定義 指示します
列の数だけ<TD></TD>のｾｯﾄが並びます
この繰り返しを<TR>と</TR>ではさみます
一行目は二列なので２回（1-1,1-2の部分）
はさまっているのがわかりますか？
二行目の二列も見つかりましたか？（2-1,2-2の部分）
この間に
縦横に並ぶセルを作ります
←赤い文字にした部分です
TRは行の定義 指示します
TDは列の定義 指示します
列の数だけ<TD></TD>のｾｯﾄが並びます
この繰り返しを<TR>と</TR>ではさみます
一行目は二列なので２回（1-1,1-2の部分）
はさまっているのがわかりますか？
二行目の二列も見つかりましたか？（2-1,2-2の部分）
この数字の箇所に画像をはさむと･･･
 |
 |
 |
 |
となります
ｺｺまでが単純な表組です
要は 上記の ﾀｸﾞをコピーして使ってください
数字のところに
好きなもの入れちゃって～ ってことです
ｺﾚで あなたも 片付け上手ってことですね～
★ラインもサイズも考えた～い という方
２行２列の表は作れましたか＾＾
３行４列とか遊んでみてね
<TABLE border="1"
>
<TBODY>
<TR>
<TD>1-1</TD>
<TD>1-2</TD>
<TD>1-3</TD>
<TD>1-4</TD>
</TR>
<TR>
<TD>2-1</TD>
<TD>2-2</TD>
<TD>2-3</TD>
<TD>2-4</TD>
</TR>
<TR>
<TD>3-1</TD>
<TD>3-2</TD>
<TD>3-3</TD>
<TD>3-4</TD>
</TR>
</TBODY>
</TABLE>
<TBODY>
<TR>
<TD>1-1</TD>
<TD>1-2</TD>
<TD>1-3</TD>
<TD>1-4</TD>
</TR>
<TR>
<TD>2-1</TD>
<TD>2-2</TD>
<TD>2-3</TD>
<TD>2-4</TD>
</TR>
<TR>
<TD>3-1</TD>
<TD>3-2</TD>
<TD>3-3</TD>
<TD>3-4</TD>
</TR>
</TBODY>
</TABLE>
← コレをコピーして使うと3行4列です できた？
で･･･説明していなかったけど 気になっていた人いるかしら?
TABLE の脇にある border="1" （赤い文字にしてあります） ｺﾚは数字を変えてみるとワカルヨ＾＾ｂ
3に変えると
| 1-1 | 1-2 |
| 2-1 | 2-2 |
7に変えると
| 1-1 | 1-2 |
| 2-1 | 2-2 |
・・・ｺｺは解説無しでよいですかぁ＾＾
0 にするか borderを入れないと 枠は表示されません
では大きさのバラバラなものを入れてみましょう
| 1-1 | 1-2 |
| ぶ | 2-2 |
|---|
２行目１列目に ぶ をいれて見ましたよ
大きさが変わったのが解りますか
枠のサイズを指定していないので
行・列幅が一番大きいフォント（（font)文字の大きさ）になります
| 1-1 | ぶ |
| 2-1 | 2-2 |
ねっ＾＾
ではサイズ指定をして見ましょう
width は 表組の横幅 heigh は 表組の縦幅 いずれも ﾋﾟｸｾﾙ数か％で
うふっ
ｺﾚは table のところで指定したもの
<TABLE width="100" height="100" border="1">
<TR>
<TD>うふっ</TD>
</TR>
</TABLE>
<TABLE width="100" height="100" border="1">
<TR>
<TD>うふっ</TD>
</TR>
</TABLE>
ここまで わかりましたか？
では次は 飾ってみましょう
次 行ってみます？
ジャンル別一覧
人気のクチコミテーマ
-
-
- 大好き無印良品
- 【無印良品】高性能でシンプルなハン…
- (2024-12-01 21:22:58)
-
-
-
- 手芸・ハンドメイド好きなヒト、大集…
- 今日はエッグアート講座
- (2024-12-03 22:10:07)
-
-
-
- ☆手作り大好きさん☆
- 第１回 #自然栽培ザクロシロップ #…
- (2024-12-03 13:53:12)
-
© Rakuten Group, Inc.
