HTML

HTMLで「表組」する

(基礎から応用まで)

1.横1行の表
2.横2行に表題とDATAを4つを入れる
3.横3行×縦5列にDATA8個を2行に分けて入れる
4.複雑な表組(横8行×縦6列)
5.1【文字の配置(th)の書き方参照】
5.2【文字の配置(td)の書き方参照】
6.背景に色を付ける

【HTMLで表組】

簡単な表から難解な表までの書き方をまとめてみます。

【簡単な表組/基礎編】
1.横1行の表

【HTMLで書くと】
< table >
< thead >
< tr >
< th > < /th >
< /tr >
< /thead >
< /table >

2.横2行に表題とDATAを4つを入れる

月日 DATA
2018/5/30 1 2 3 4

【HTMLで書くと】
< table >
< thead >
< tr >
< th > 月日 < /th >
<th colspan= ” 4 ” > DATA < /th >
< /tr >
< tr >
< th > 2018/5/30 < /th >
< td align=”center” > 1 < /td >
< td > 2 < /td >
< td align=”center” > 3 < /td >
< td > 4 < /td >
< /tr >
< /thead >
< /table >

3.横3行×縦5列にDATA8個を2行に分けて入れる

月日 DATA
2018/5/30 1 2 3 4
2018/5/31 5 6 7 8

【HTMLで書くと】
< table >
< thead >
< tr >
< th style=”text-align: center;”> 月日 < /th >
<th colspan= ” 4 ” > DATA < /th >
< /tr >
< tr >
< th style=”text-align: center;”> 2018/5/30 < /th >
< td style=”text-align: center;”> 1 < /td >
< td style=”text-align: center;”> 2 < /td >
< td style=”text-align: center;”> 3 < /td >
< td style=”text-align: center;”> 4 < /td >
< /tr >
< tr >
< th > 2018/5/31 < /th >
< td > 5 < /td >
< td > 6 < /td >
< td > 7 < /td >
< td > 8 < /td >
< /tr >
< /thead >
< /table >

4.複雑な表組(横8行×縦6列)

内 容
A B C D
1 2 3 4 5
E F G H I
J K L
M N
6 7 8
Q R

【HTMLで書くと】
< table >
< thead >
< tr >
< th ></th>

<th style=”text-align: center;”colspan= “5 ” >  内容 < /td >

< /tr >
< tr >

< th style=”text-align: center;” colspan= ” 2 ” > A < /th >
< td style=”text-align: center;” colspan= ” 3 ” > B < /td >
< td style=”text-align: center;” > C < /td >
< td style=”text-align: center;” > D < /td >

< /tr >
< tr >

< td style=”text-align: left;” > 1 < /td >
< td style=”text-align: center;” > 2 < /td >
< td style=”text-align: center;” > 3 < /td >
< td style=”text-align: center;” > 4 < /td >
< td style=”text-align: right;” > 5 < /td >

< /tr >
< tr >

< th style=”text-align: center; vertical-align: middle;” rowspan= ” 5 ” > E < /th >
< td style=”text-align: center; vertical-align: top;” rowspan= ” 5 ” > F < /td >
< td style=”text-align: center;” colspan= ” 2 ” > G < /td >
< td style=”text-align: center;” > H < /td >
< td style=”text-align: center;” > I < /td >

< /tr >

< tr >

< td style=”text-align: center; vertical-align: middle;” rowspan= ” 2 ” colspan= ” 2 ” > J < /td >
< td style=”text-align: center;” > K < /td >
< td style=”text-align: center;” > L < /td >

< /tr >
< tr >

< td style=”text-align: center;” > M < /td >
< td style=”text-align: center;” > N < /td >

< /tr >
< tr >

< td style=”text-align: center;” > 6 < /td >
< td style=”text-align: center;” > 7 < /td >
< td style=”text-align: right; vertical-align: bottom;” rowspan= ” 2 ” colspan= ” 2 ” > 8 < /td >

< /tr >
< tr >

< td style=”text-align: center;” rowspan= ” 1 ” > Q < /td >
< td style=”text-align: center;” rowspan= ” 1 ” > R < /td >

< /tr >
< /thead >
< /table >

 

5.1【文字の配置(th)の書き方参照】

左 <th style=”text-align: left;” ></th>
中 <th style=”text-align: center;” > </th>
右 <th style=”text-align: right;” > </th>

上 <th style=”vertical-align: top;” > </th>
中 <th style=”vertical-align: middle;” > </th>
下 <th style=”vertical-align: botton;” > </th>

左上 <th style=”text-align: left; vertical-align: top;” > </th>
左中 <th style=”text-align: left; vertical-align: middle;” > </th>
左下 <th style=”text-align: left; vertical-align: bottom;” > </th>

中上 <th style=”text-align: center; vertical-align: top;” > </th>
中中 <th style=”text-align: center; vertical-align: middle;” > </th>
中下 <th style=”text-align: center; vertical-align: bottom;” > </th>

右上 <th style=”text-align: right; vertical-align: top;” > </th>
右中 <th style=”text-align: right; vertical-align: top;” > </th>
右下 <th style=”text-align: right; vertical-align: bottom;” > </th>

5.2【文字の配置(td)の書き方参照】

左<td style=”text-align: left;” > </td>
中<td style=”text-align: center;” > </td>
右<td style=”text-align: right;” > </td>
上<td style=”vertical-align: top;” > </td>
中<td style=”vertical-align: middle;” > </td>
下<td style=”vertical-align: bottom;” > </td>
左上<td style=”text-align: left; vertical-align: top;” > </td>
左中<td style=”text-align: left; vertical-align: middle;” > </td>
左上<td style=”text-align: left; vertical-align: bottom;” > </td>
中上<td style=”text-align: center; vertical-align: top;” > </td>
中中<td style=”text-align: center; vertical-align: middle;” > </td>
中下<td style=”text-align: center; vertical-align: bottom;” > </td>
右上<td style=”text-align: right; vertical-align: top;” > </td>
右中<td style=”text-align: right; vertical-align: top;” > </td>
右下<td style=”text-align: right; vertical-align: bottom;” > </td>

*****************************************************

6.背景に色を付ける

A B C D
1
2
3
4
5
6

【HTMLで書くと】

<table>
<thead>
<tr>
<th style=”text-align: center;” bgcolor=”#ccff99″></th>
<th style=”text-align: center;” bgcolor=”#ccff99″>A</th>
<th style=”text-align: center;” bgcolor=”#ccff99″>B</th>
<th style=”text-align: center;” bgcolor=”#ccff99″>C</th>
<th style=”text-align: center;” bgcolor=”#ccff99″>D</th>
</tr>
<tr>
<th style=”text-align: center;” bgcolor=”#ccff99″>1</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th style=”text-align: center;” bgcolor=”#cccc99″>2</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th style=”text-align: center;” bgcolor=”#cc9999″>3</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th style=”text-align: center;” bgcolor=”#cc6699″>4</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th style=”text-align: center;” bgcolor=”#33ff00″>5</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th style=”text-align: center;” bgcolor=”#33ffff”>6</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
</table>

MIYOO!から始まるMyアップデイト。ビジネスの背景となる教養(歴史・建物・祭り・書物・文化・IT知識・ゴルフ場・ドラマ)をストックしたサイトはマネージャーを目指す方や既に管理者の方も必見です。

%d人のブロガーが「いいね」をつけました。