テーブルタグの説明２
Yahoo!ブックマークに登録
はてなブックマークに登録
livedoorに記事をクリップ| テーブルタグページ一覧 | |
|---|---|
| 解説 |
テーブルタグの説明が多くなるので下記のページに分けました。
|
| テーブルの中身（セル）の余白や線幅をとる | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| タグ |
<table cellpadding="数字" cellspacing="数字"> <tr> <td>内容</td> </tr> </table> |
|||||||||
| 見本 |
<table border cellpadding="10"> <tr> <td>文字1</td><td>文字2</td><td>文字3</td> </tr> <tr> <td>文字4</td><td>文字5</td><td>文字6</td> </tr> <tr> <td>文字7</td><td>文字8</td><td>文字9</td> </tr> </table> |
|||||||||
| 結果 |
|
|||||||||
| 見本 |
<table border cellspacing="10"> <tr> <td>文字1</td><td>文字2</td><td>文字3</td> </tr> <tr> <td>文字4</td><td>文字5</td><td>文字6</td> </tr> <tr> <td>文字7</td><td>文字8</td><td>文字9</td> </tr> </table> |
|||||||||
| 結果 |
|
|||||||||
| 解説 |
<table> がテーブルタグの始まりです。基本的に <tr> や <td> とセットで使用します。 <tr> は縦の段を１段増やせます。 <td> は横の文字を書ける部分（セル）を１つ増やせます。 「border」 部分は、表に枠を表示するという意味です。 これを無しにすると透明になるので、それをレイアウトの基礎に使用すると便利です。 「border」 を 「border="数字"」 のように数字で外枠の太さを変える事もできます。 |
|||||||||
| 横と縦のサイズを指定する | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| タグ |
<table border width="数字" height="数字"> <tr> <td>文字1</td><td>文字2</td><td>文字3</td> </tr> <tr> <td>文字4</td><td>文字5</td><td>文字6</td> </tr> <tr> <td>文字7</td><td>文字8</td><td>文字9</td> </tr> </table> |
|||||||||
| 見本 |
<table border width="400" height="200"> <tr> <td>文字1</td><td>文字2</td><td>文字3</td> </tr> <tr> <td>文字4</td><td>文字5</td><td>文字6</td> </tr> <tr> <td>文字7</td><td>文字8</td><td>文字9</td> </tr> </table> |
|||||||||
| 結果 |
|
|||||||||
| 解説 |
「width="数字"」 で横の長さを指定することができます。 「height="数字"」 で縦の長さを指定することができます。 中のマス（セル）は、長さに合わせて自動的に伸びます。 |
|||||||||
| 見本 |
<table border width="100%"> <tr> <td>文字1</td><td>文字2</td><td>文字3</td> </tr> <tr> <td>文字4</td><td>文字5</td><td>文字6</td> </tr> <tr> <td>文字7</td><td>文字8</td><td>文字9</td> </tr> </table> |
|||||||||
| 結果 |
|
|||||||||
| 解説 | 「%（パーセント）」 で長さを指定すると、そのテーブルタグがある場所の範囲で伸びれる距離を計算し、その距離の何パーセント分の長さにするかという指定が可能です。 100% にすれば、伸びれるだけ伸びることになります。サイト全体の横幅が決まっていない状態で 100% にすると、ネットを見ているブラウザソフトの見える範囲まで伸びます。この場合、ブラウザを見ている人それぞれによって環境が違うので、人によって長さは変わってきます。 | |||||||||
| 見本 |
<table border> <tr> <td>文字1</td><td>文字2</td><td>文字3</td> </tr> <tr> <td>文字4</td><td width="300" height="100">文字5</td><td>文字6</td> </tr> <tr> <td>文字7</td><td>文字8</td><td>文字9</td> </tr> </table> |
|||||||||
| 結果 |
|
|||||||||
| 解説 | １マス（セル）分だけの長さを指定したいときは <td> <th> などのタグに直接長さを指定します。マス（セル）は、他のマス（セル）と隣接していますので、１つのマスの長さを決めると、隣接するマスも影響を受けます。 | |||||||||
| マス（セル）内の横位置を変える | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| 見本 |
<table border width="100%"> <tr> <td align="center">文字1</td><td>文字2</td><td>文字3</td> </tr> <tr> <td>文字4</td><td align="center">文字5</td><td>文字6</td> </tr> <tr> <td>文字7</td><td>文字8</td><td align="center">文字9</td> </tr> </table> |
|||||||||
| 結果 |
|
|||||||||
| 見本 |
<table border width="100%"> <tr align="center"> <td align="left">文字1</td><td>文字2</td><td>文字3</td> </tr> <tr align="center"> <td>文字4</td><td align="left">文字5</td><td>文字6</td> </tr> <tr align="center"> <td>文字7</td><td>文字8</td><td align="right">文字9</td> </tr> </table> |
|||||||||
| 結果 |
|
|||||||||
| 解説 |
テーブルが横に伸びている場合、マス（セル）内の横位置を指定することができます。
|
|||||||||
| マス（セル）内の縦位置を変える | |||||||
|---|---|---|---|---|---|---|---|
| 見本 |
<table border height="160"> <tr> <td valign="top">文字1</td><td>文字2</td><td>文字3</td> </tr> <tr> <td>文字4</td><td valign="bottom">文字5</td><td>文字6</td> </tr> </table> |
||||||
| 結果 |
|
||||||
| 見本 |
<table border height="160"> <tr valign="top"> <td valign="center">文字1</td><td>文字2</td><td>文字3</td> </tr> <tr valign="top"> <td>文字4</td><td valign="bottom">文字5</td><td>文字6</td> </tr> </table> |
||||||
| 結果 |
|
||||||
| 解説 |
テーブルが縦に伸びている場合、マス（セル）内の縦位置を指定することができます。
|
||||||
| 太字で真ん中に表示 | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| タグ |
<table border> <tr> <th>文字1</th><td>文字2</td><td>文字3</td> </tr> <tr> <td>文字4</td><th>文字5</th><td>文字6</td> </tr> <tr> <td>文字7</td><td>文字8</td><th>文字9</th> </tr> </table> |
|||||||||
| 結果 |
|
|||||||||
| 見本 |
<table border> <tr> <th bgcolor="#ffddaa" colspan="3">文字1</th> </tr> <tr> <td>文字1</td><td>文字2</td><td>文字3</td> </tr> <tr> <td>文字4</td><td>文字5</td><td>文字6</td> </tr> </table> |
|||||||||
| 結果 |
|
|||||||||
| 解説 |
<td>文字1</td> の、「td」 の所を 「th」 にするだけで、太字のセル内で真ん中に表示されるようになります。
太字タグやセンター表示などをイチイチ使わなくていいので便利です。 基本的に 「td」 と同じ扱いで使うことができます。 |
|||||||||
| テーブル全体の位置を変える | |||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 見本 |
<table border align="center"> <tr> <td>文字1</td><td>文字2</td><td>文字3</td> </tr> <tr> <td>文字4</td><td>文字5</td><td>文字6</td> </tr> <tr> <td>文字7</td><td>文字8</td><td>文字9</td> </tr> </table> |
||||||||||||||||||
| 結果 |
|
||||||||||||||||||
| 見本 |
<table border align="right"> <tr> <td>文字1</td><td>文字2</td><td>文字3</td> </tr> <tr> <td>文字4</td><td>文字5</td><td>文字6</td> </tr> <tr> <td>文字7</td><td>文字8</td><td>文字9</td> </tr> </table> <table border align="right"> <tr> <td>文字1</td><td>文字2</td><td>文字3</td> </tr> <tr> <td>文字4</td><td>文字5</td><td>文字6</td> </tr> <tr> <td>文字7</td><td>文字8</td><td>文字9</td> </tr> </table> ああああ <br clear="right"> ああああ |
||||||||||||||||||
| 結果 |
ああああ |
||||||||||||||||||
| 解説 |
<table> に 「align="center"」 を加えると表が中心に表示されます。 こういう場合、回り込みしている機能を解除しておく必要があります。 「<br clear="right">」 このように改行タグに回り込み解除の指定をする事で、テーブルの回り込みをその場で止めることができます。値は回り込ませている方向に合わせて left か right をお選び下さい。 |
||||||||||||||||||
ＨＴＭＬ辞典
- CSS辞典はこちら
- 【 基本タグ 】
- HTMLタグ（全体）
- HEADタグ（効果）
- TITLEタグ（題名）
- METAタグ（支援）
- LINKタグ（関連）
- BODYタグ（内容）
- 【 文字タグ 】
- 字色・サイズ <font>
- 太字タグ <b>
- 斜体タグ <i>
- 下線タグ <u>
- 打ち消し線タグ <s>
- 大字タグ <big>
- 小字タグ <small>
- 等間隔タグ <tt>
- 上付タグ <sup>
- 下付タグ <sub>
- 強調太字 <strong>
- 強調斜体タグ <em>
- 文字移動 <marquee>
- 【 区切りタグ 】
- 改行タグ <br>
- 見出しタグ <h>
- 段落タグ <p>
- 引用文 <blockquote>
- スペース表示 <pre>
- 一本線タグ <hr>
- 中央表示 <center>
- 【 リンクタグ 】
- リンク用タグ <a>
- ページ内リンク <a>
- メール起動リンク <a>
- リンク色の変更 <a>
- 【 リストタグ 】
- マークリストタグ <ul>
- 数字リストタグ <ol>
- 用語説明タグ <dl>
- 【 画像タグ 】
- 画像表示タグ <img>
- 画像内リンク <img>
- 【 テーブル 】
- 枠組み・表 <table>
- レイアウト・配置
- 【 フレーム 】
- 分割フレーム <frame>
- 内側フレーム <iframe>
- 【 フォーム 】
- フォーム <form>
- １行入力 <input>
- パスワード <input>
- ラジオボタン <input>
- チェックボックス
- ファイル送信 <input>
- 隠しデータ <input>
- 選択フォーム <select>
- 文章入力 <textarea>
- 送信・リセット <input>
- 画像ボタン <input>
- 通常ボタン <input>
- 【 その他 】
- 範囲指定タグ <div>
- 範囲指定タグ <span>
- コメントタグ <!-- -->
