でぃーのブログ ~よろずのこと~

なんでもかんでも書くよ

ド初心者のための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>

表の一部のセルの色を変える2

見出しセル 見出しセル横の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>

 

関連記事

www.deeee66.com