テーブルタグの説明３
Yahoo!ブックマークに登録
はてなブックマークに登録
livedoorに記事をクリップ| テーブルタグページ一覧 | |
|---|---|
| 解説 |
テーブルタグの説明が多くなるので下記のページに分けました。
|
| テーブルのマス（セル）を連結させる | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| 見本 |
<table border> <tr> <td colspan="3">文字1</td> </tr> <tr> <td>文字2</td><td>文字3</td><td>文字4</td> </tr> <tr> <td>文字5</td><td>文字6</td><td>文字7</td> </tr> </table> |
|||||||||
| 結果 |
|
|||||||||
| 見本 |
<table border> <tr> <td rowspan="3">文字1</td><td>文字2</td><td>文字3</td> </tr> <tr> <td>文字4</td><td>文字5</td> </tr> <tr> <td>文字6</td><td>文字7</td> </tr> </table> |
|||||||||
| 結果 |
|
|||||||||
| 解説 |
<td> <th> タグに記載すると、数字分だけマス（セル）を繋げる事ができます。
|
|||||||||
| テーブルに題名をつける | |||||||
|---|---|---|---|---|---|---|---|
| タグ |
<table border> <caption>題名</caption> <tr> <td>文字1</td><td>文字2</td><td>文字3</td> </tr> <tr> <td>文字4</td><td>文字5</td><td>文字6</td> </tr> </table> |
||||||
| 結果 |
|
||||||
| 解説 |
テーブルに見出し・題名を付けることができます。
|
||||||
| テーブルをグループ化させる | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| 見本 |
<table border> <thead bgcolor="#ffaaaa"> <tr> <td>文字1</td><td>文字2</td><td>文字3</td> </tr> </thead> <tfoot bgcolor="#aaffaa"> <tr> <td>文字4</td><td>文字5</td><td>文字6</td> </tr> </tfoot> <tbody bgcolor="#aaaaff"> <tr> <td>文字7</td><td>文字8</td><td>文字9</td> </tr> </tbody> </table> |
|||||||||
| 結果 |
|
|||||||||
| 解説 |
<thead> <tfoot> <tbody> タグで囲んだマス（セル）にまとめて効果を反映させることができます。上の見本の場合は、<thead> <tfoot> <tbody> に別々の色を指定しました。 記述する順番は、<thead> → <tfoot> → <tbody> という順に記載する必要があります。 |
|||||||||
| テーブルを列でグループ化させる | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 見本 |
<table border width="400"> <colgroup span="2" bgcolor="#ffaaaa"></colgroup> <colgroup bgcolor="#aaffaa" align="center"></colgroup> <colgroup bgcolor="#aaaaff" align="right"></colgroup> <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> |
||||||||||||
| 結果 |
|
||||||||||||
| 解説 | <colgroup> タグで列ごとをグループ化させて、この列にはこの効果を反映させるという指定ができます。何個かの列をまとめて指定する場合は span="数字" で列数を指定します。上の見本では、２列、１列、１列の指定になっております。span="数字" を書かない場合は１列分扱いになります。 | ||||||||||||
ＨＴＭＬ辞典
- 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>
- コメントタグ <!-- -->
