コツコツ*ワンダーコトン!
ちょこっと かわいいもの
みょうなもの 発見するの、すきであります!
<< April 2017 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 >>
<< お小遣いサイトの王様!ネットマイル | main | 役立つ 日経パソコン! >>
スポンサーサイト

一定期間更新がないため広告を表示しています

- | URL | -
HTML+CSS vol.3 tableタグ編1
ミニ講座 第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> のセットを 追加します。

1行1列1行2列1行3列
2行1列2行2列2行3列

<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= に 融合させたいセルの数字を 入れます。

1行1列1行2列
2行1列2行2列2行3列

<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= に 融合させたいセルの数字を 入れます。

1行1列1行2列1行3列
2行1列2行2列

<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で 検証しています。
違う環境では、同じようにならないことがあります。 ご了承下さい。
ブログ編集 HTML+CSS | URL | comments(0)
スポンサーサイト
- | URL | -
コメント、ありがとうございます!
現在、コメント承認制を 取り入れています。
発見次第 すぐ公開にしますので、少々お待ち下さいませ。
宣伝や 不適切なコメントは ご遠慮下さい。
サックリ 削除しちゃいます。









Next | ↑PAGE TOP | Pre


【NDS】ニュー・スーパーマリオブラザーズ5月25日発売予定!
【NDS】ニュー・
スーパーマリオブラザーズ
5月25日発売予定!

Nintendo DS Lite
最安値は?
 →
   - Hit Ranking -
  アフィリエイト部門
 No.1 LinkShare
 No.2 アドリンク
 No.3 楽天アフィリエイト

   アンケート部門
 No.1 マクロミル
 No.2 mpack
 No.3 iMiネット

  メールポイント部門
 No.1 ECナビ
 No.2 ネットマイル
 No.3 だぶるくりっく


DVD&CDレンタル
月1980円 借り放題。
モバイルからも 予約できる DMM
1ヶ月無料キャンペーン中。




アフィリエイト系ブログ

お気に入りブログ

世界標準のブログソフトウェア「Movable Type」発売中
Movable Type 3.2
日本語版発売中!!