ミニ講座 第3回は、
tableタグについて です。
サイトの レイアウトに よく使われる tableですが
ブログでも、表として 活躍できます。
(JUGEM ・ FC2 ・ Ameblo ・ Seesaa は 使えるようです。)
細かい情報を伝える時に、わかりやすいかな。
tableについては 4-5回に分けて 書いていきます。
では、
table講座 「基本 + 横・縦のセルの 合体」 です。
まずは
基本セット
<table>
<tr>
<td></td>
</tr>
</table>
<table></table> = テーブル(表)セット
<tr></tr> = 1行 *table row の略
<td></td> = 1列 *table dataの略 またはセル
tableの中に trがあり、trの中に tdがあります |
注: JUGEMでは 記事の投稿を 自動改行に設定している場合
タグの間に 改行やスペースが入ると
記事に むやみに スペースが あいてしまいます。
注: アメブロでは 勝手に tableの中に
<tbody></tbody> が 入ります。
例
(1行3列)
わかりやすいように 枠線をつけます。<table border="1">
<table border="1">
<tr>
<td>ワン</td>
<td>ツー</td>
<td>スリー</td>
</tr>
</table>
例
(2行3列)
行をふやす場合、<tr></tr> のセットを 追加します。
<table border="1">
<tr>
<td>1行1列</td>
<td>1行2列</td>
<td>1行3列</td>
</tr>
<tr>
<td>2行1列</td>
<td>2行2列</td>
<td>2行3列</td>
</tr>
</table>
例
(横方向のセルの合体)
td colspan= に 融合させたいセルの数字を 入れます。
<table border="1">
<tr>
<td
colspan="2">1行1列</td>
<td>1行2列</td>
</tr>
<tr>
<td>2行1列</td>
<td>2行2列</td>
<td>2行3列</td>
</tr>
</table>
例
(縦方向のセルの合体)
td rowspan= に 融合させたいセルの数字を 入れます。
<table border="1">
<tr>
<td
rowspan="2">1行1列</td>
<td>1行2列</td>
<td>1行3列</td>
</tr>
<tr>
<td>2行1列</td>
<td>2行2列</td>
</tr>
</table>
他の 細かい設定は、次回
tableタグ編2に 続きます。
* Windows IE 及び JUGEMで 検証しています。
違う環境では、同じようにならないことがあります。 ご了承下さい。
現在、コメント承認制を 取り入れています。
発見次第 すぐ公開にしますので、少々お待ち下さいませ。
宣伝や 不適切なコメントは ご遠慮下さい。
サックリ 削除しちゃいます。