■ ヒントだよ！HTML & CSS ■
■ HTML
・body内タグ4
- <table 属性="属性値">～</table>
表組みを表す。属性:グローバル属性。
- <tr 属性="属性値">～</tr>
- <td 属性="属性値">～</td>
表組みのセルを表す。
属性
- 列を結合する:colspan="結合する列数"
- 行を結合する:rowspan="結合する行数"
- ヘッダーセルのid属性の値を引く継ぐ:headers="ヘッダーセルのid"
- 例:<table>
<tr>
<td>--1--</td><td>--2--</td>
</tr><tr>
<td>--3--</td><td>--4--</td>
</table>
<tabel borer="～" cellspacing="～" cellpadding="～"
>の属性使用が禁止になったので、
<table border=1" cellspacing="0" cellpadding="0">をCSSで表現すると、
table用cssは
border: 1px solid #000000; border-collapse: collapse;
となり
td用cssは、border: 1px solid #000000;
となります。
| ____1____ |
____2____ |
____3____ |
____4____ |
<table border="1">の場合は、
table用cssは
border: 1px solid #000000; border-collapse: separate;
となり
td用cssは、border: 1px solid #000000;
となります。
| ____1____ |
____2____ |
____3____ |
____4____ |
なお、<table> こと <table border="0">の場合、cssの指定は必要ありません。
- <th 属性="属性値">～</th>
表組みの見出しセルを表す。
属性
属性
- 列を結合する:colspan="結合する列数"
- 行を結合する:rowspan="結合する行数"
- ヘッダーセルのid属性の値を引く継ぐ:headers="ヘッダーセルのid"
例:<table class="tal">
<tr>
<th class="tbb">見出し1</th><th class="tbb">見出し2</th>
</tr><tr>
<td class="tbb">------1------</td><td class="tbb">------2------</td>
</tr>
</table>
| 見出し1 | 見出し2 |
| ------1------ | ------2------ |
※リスト等のタグに囲まれると、文字が中央揃えではなく、左揃えになる場合が有ります。
参照:<table class="tal">
<tr>
<td class="tbb tac"><b>見出し1</b></td><td class="tbb tac"><b>見出し2</b></td>
</tr><tr>
<td class="tbb">------1------</td><td class="tbb">------2------</td>
</tr>
</table>
※.tac { text-align:center; } (中央揃え)
| 見出し1 | 見出し2 |
| ------1------ | ------2------ |
- <canption 属性="属性値">～</canption>
表組みのタイトルを表す。属性:グローバル属性。
例:<table class="tal">
<canption>表1-5.ＸＸＸＸについての結果</canption>
<tr>
<th class="tbb">見出し1</th><th class="tbb">見出し2</th>
</tr><tr>
<td class="tbb">------1------</td><td class="tbb">------2------</td>
</tr>
</table>
表1-5.ＸＸＸＸについての結果
| 見出し1 | 見出し2 |
| ------1------ | ------2------ |
- <colgroup 属性="属性値">～</colgroup>
表組みの列グループをを表す。
属性:
例:<table class="tal">
<canption>表6.MMMについて</canption>
<colgroup class="bgc1" span="1"></colgroup>
<colgroup class="bgc4" span="2"></colgroup>
<tr>
<th class="tbb">No.</td>
<th class="tbb">AA</td>
<th class="tbb">BB</td>
<th class="tbb">CC</td>
</tr><tr>
<td class="tbb tar00">1001</td>
<td class="tbb">ＭＭ</td>
<td class="tbb">ＮＮ</td>
<td class="tbb">ＢＣ</td>
</tr><tr>
<td class="tbb tar00">20030</td>
<td class="tbb">ＨＪ</td>
<td class="tbb">ＧＦＬ</td>
<td class="tbb">ＢＤ</td>
</tr>
</table>
表6.MMMについて
| No.
| AA
| BB
| CC
|
| 1001 |
ＭＭ |
ＮＮ |
ＢＣ |
| 20030 |
ＨＪ |
ＧＦＬ |
ＢＤ |
- <col 属性="属性値"> 表組みの列を表す。
属性
例:<table class="tal">
<canption>表6.MMMについて</canption>
<col class="bgc1" span="1">
<col class="bgc4" span="2">
<tr>
<th class="tbb">No.</td>
<th class="tbb">AA</td>
<th class="tbb">BB</td>
<th class="tbb">CC</td>
</tr><tr>
<td class="tbb tar00">1001</td>
<td class="tbb">ＭＭ</td>
<td class="tbb">ＮＮ</td>
<td class="tbb">ＢＣ</td>
</tr><tr>
<td class="tbb tar00">20030</td>
<td class="tbb">ＨＪ</td>
<td class="tbb">ＧＦＬ</td>
<td class="tbb">ＢＤ</td>
</tr>
</table>
表6.MMMについて
| No.
| AA
| BB
| CC
|
| 1001 |
ＭＭ |
ＮＮ |
ＢＣ |
| 20030 |
ＨＪ |
ＧＦＬ |
ＢＤ |
例:<table class="tal">
<canption>表6.MMMについて</canption>
<colgroup class="bgc1" span="1"></colgroup>
<colgroup>
<col class="bgc4" span="2">
<col class="bgc6" span="1">
</colgroup>
<tr>
<th class="tbb">No.</td>
<th class="tbb">AA</td>
<th class="tbb">BB</td>
<th class="tbb">CC</td>
</tr><tr>
<td class="tbb tar00">1001</td>
<td class="tbb">ＭＭ</td>
<td class="tbb">ＮＮ</td>
<td class="tbb">ＢＣ</td>
</tr><tr>
<td class="tbb tar00">20030</td>
<td class="tbb">ＨＪ</td>
<td class="tbb">ＧＦＬ</td>
<td class="tbb">ＢＤ</td>
</tr>
</table>
表6.MMMについて
| No.
| AA
| BB
| CC
|
| 1001 |
ＭＭ |
ＮＮ |
ＢＣ |
| 20030 |
ＨＪ |
ＧＦＬ |
ＢＤ |
- <tbody 属性="属性値">～</tbody>
表組みの本体部分の行グループを表す。属性:グローバル属性。
- <thead 属性="属性値">～</thead>
表組のヘッダー部分の行を表す。属性:グローバル属性。
- <tfoot 属性="属性値">～</tfoot>
表組みのぶったー部分の行グループを表す。属性:グローバル属性。
例:
thead～thead
tbody～tbody
tfoot～tfoot
© KinutaHandicraft
