ド初心者のためのHTMLの基本[テーブル編] ～コピペするだけで使えるリスト～
目次
表の作成
ただ単に表を作る
| 見出しセル | 見出しセル横の1 | 見出しセル横の2 | 見出しセル横の3 |
|---|---|---|---|
| 見出しセル縦の1 | データセル1の1 | データセル2の1 | データセル3の1 |
| 見出しセル縦の2 | データセル1の2 | データセル2の2 | データセル3の2 |
| 見出しセル縦の3 | データセル1の3 | データセル2の3 | データセル3の3 |
htmlの記載
<table cellpadding="10">
<tbody>
<tr>
<th>見出しセル</th>
<th>見出しセル横の1</th>
<th>見出しセル横の2</th>
<th>見出しセル横の3</th>
</tr>
<tr>
<th>見出しセル縦の1</th>
<td>データセル1の1</td>
<td>データセル2の1</td>
<td>データセル3の1</td>
</tr>
<tr>
<th>見出しセル縦の2</th>
<td>データセル1の2</td>
<td>データセル2の2</td>
<td>データセル3の2</td>
</tr>
<tr>
<th>見出しセル縦の3</th>
<td>データセル1の3</td>
<td>データセル2の3</td>
<td>データセル3の3</td>
</tr>
</tbody>
</table>
表のセルの余白を変える
| 見出しセル | 見出しセル横の1 | 見出しセル横の2 | 見出しセル横の3 |
|---|---|---|---|
| 見出しセル縦の1 | データセル1の1 | データセル2の1 | データセル3の1 |
| 見出しセル縦の2 | データセル1の2 | データセル2の2 | データセル3の2 |
| 見出しセル縦の3 | データセル1の3 | データセル2の3 | データセル3の3 |
htmlの記載
<table cellpadding="10">
<tbody>
<tr>
<th>見出しセル</th>
<th>見出しセル横の1</th>
<th>見出しセル横の2</th>
<th>見出しセル横の3</th>
</tr>
<tr>
<th>見出しセル縦の1</th>
<td>データセル1の1</td>
<td>データセル2の1</td>
<td>データセル3の1</td>
</tr>
<tr>
<th>見出しセル縦の2</th>
<td>データセル1の2</td>
<td>データセル2の2</td>
<td>データセル3の2</td>
</tr>
<tr>
<th>見出しセル縦の3</th>
<td>データセル1の3</td>
<td>データセル2の3</td>
<td>データセル3の3</td>
</tr>
</tbody>
</table>
表のフレームを変える
| 見出しセル | 見出しセル横の1 | 見出しセル横の2 | 見出しセル横の3 |
|---|---|---|---|
| 見出しセル縦の1 | データセル1の1 | データセル2の1 | データセル3の1 |
| 見出しセル縦の2 | データセル1の2 | データセル2の2 | データセル3の2 |
| 見出しセル縦の3 | データセル1の3 | データセル2の3 | データセル3の3 |
htmlの記載
<table style="height: 100px;" border="1" width="600">
<tbody>
<tr>
<th>見出しセル</th>
<th>見出しセル横の1</th>
<th>見出しセル横の2</th>
<th>見出しセル横の3</th>
</tr>
<tr>
<th>見出しセル縦の1</th>
<td>データセル1の1</td>
<td>データセル2の1</td>
<td>データセル3の1</td>
</tr>
<tr>
<th>見出しセル縦の2</th>
<td>データセル1の2</td>
<td>データセル2の2</td>
<td>データセル3の2</td>
</tr>
<tr>
<th>見出しセル縦の3</th>
<td>データセル1の3</td>
<td>データセル2の3</td>
<td>データセル3の3</td>
</tr>
</tbody>
</table>
表全体のセルの色を変える
| 見出しセル | 見出しセル横の1 | 見出しセル横の2 | 見出しセル横の3 |
|---|---|---|---|
| 見出しセル縦の1 | データセル1の1 | データセル2の1 | データセル3の1 |
| 見出しセル縦の2 | データセル1の2 | データセル2の2 | データセル3の2 |
| 見出しセル縦の3 | データセル1の3 | データセル2の3 | データセル3の3 |
htmlの記載
<table style="height: 100px;" width="600" bgcolor="#f0f8ff">
<tbody>
<tr>
<th>見出しセル</th>
<th>見出しセル横の1</th>
<th>見出しセル横の2</th>
<th>見出しセル横の3</th>
</tr>
<tr>
<th>見出しセル縦の1</th>
<td>データセル1の1</td>
<td>データセル2の1</td>
<td>データセル3の1</td>
</tr>
<tr>
<th>見出しセル縦の2</th>
<td>データセル1の2</td>
<td>データセル2の2</td>
<td>データセル3の2</td>
</tr>
<tr>
<th>見出しセル縦の3</th>
<td>データセル1の3</td>
<td>データセル2の3</td>
<td>データセル3の3</td>
</tr>
</tbody>
</table>
表の一部のセルの色を変える２
| 見出しセル | 見出しセル横の1 | 見出しセル横の2 | 見出しセル横の3 |
|---|---|---|---|
| 見出しセル縦の1 | データセル1の1 | データセル2の1 | データセル3の1 |
| 見出しセル縦の2 | データセル1の2 | データセル2の2 | データセル3の2 |
| 見出しセル縦の3 | データセル1の3 | データセル2の3 | データセル3の3 |
htmlの記載
<table style="height: 100px;" width="600">
<tbody>
<tr>
<th style="background-color: #6ff666;">見出しセル</th>
<th>見出しセル横の1</th>
<th>見出しセル横の2</th>
<th>見出しセル横の3</th>
</tr>
<tr>
<th>見出しセル縦の1</th>
<td>データセル1の1</td>
<td style="background-color: #6ff666;">データセル2の1</td>
<td>データセル3の1</td>
</tr>
<tr>
<th>見出しセル縦の2</th>
<td>データセル1の2</td>
<td>データセル2の2</td>
<td>データセル3の2</td>
</tr>
<tr>
<th>見出しセル縦の3</th>
<td>データセル1の3</td>
<td>データセル2の3</td>
<td style="background-color: #6ff666;">データセル3の3</td>
</tr>
</tbody>
</table>
表の文字の色を変える
| 見出しセル | 見出しセル横の1 | 見出しセル横の2 | 見出しセル横の3 |
|---|---|---|---|
| 見出しセル縦の1 | データセル1の1 | データセル2の1 | データセル3の1 |
| 見出しセル縦の2 | データセル1の2 | データセル2の2 | データセル3の2 |
| 見出しセル縦の3 | データセル1の3 | データセル2の3 | データセル3の3 |
htmlの記載
<table style="height: 100px;" width="600">
<tbody>
<tr>
<th>見出しセル</th>
<th>見出しセル横の1</th>
<th>見出しセル横の2</th>
<th>見出しセル横の3</th>
</tr>
<tr>
<th>見出しセル縦の1</th>
<td><span style="color: #ff0000;">データセル1の1</span></td>
<td style="color: #0000cc;">データセル2の1</td>
<td>データセル3の1</td>
</tr>
<tr>
<th>見出しセル縦の2</th>
<td>データセル1の2</td>
<td>データセル2の2</td>
<td>データセル3の2</td>
</tr>
<tr>
<th>見出しセル縦の3</th>
<td>データセル1の3</td>
<td>データセル2の3</td>
<td>データセル3の3</td>
</tr>
</tbody>
</table>
関連記事
