HTML個人講座10日目

こんにちはcairnです。

HTML個人講座10日目です。

本日は『表』の作り方です。

まず使用するタグは

<table></table>

<tr></tr>

<th></th>

<td></td>

以上の4つになります。

まずは

<table></table>を入力して

表全体の範囲指定をします。

次に

<tr></tr>を入力して

表の範囲内に枠を作成します。

次に

<th></th>を入力して

見出しになる枠を作成します。

最後に

<td></td>を入力して

見出し以下の枠を作成していきます。

入力例は下記のようになります。

<table>

<tr></tr>

<tr></tr>

<tr></tr>

</table>

続いて下記のように入力して

<table>

<tr>

<th></th>
<th></th>
<th></th>

</tr>

<tr></tr>

<tr></tr>

</table>

最後に、下記のように入力すると

<table>

<tr>

<th></th>
<th></th>
<th></th>

</tr>

<tr>

<td></td>
<td></td>
<td></td>

</tr>

<tr>

<td></td>
<td></td>
<td></td>

</tr>

</table>

基本構造の完成です。

以上が表の作り方の基本となりますが、最後に罫線を付けることを忘れないでください。

罫線を付けるには

<table></table>を

<table border="1"></table>

と表記しなければなりません。

この表記がなければ罫線が表示されません。

あと応用編になりますが表を連結させる方法があります。

縦に連結させる場合は

<th rowspan="3"></th>

横に連結させるには

<th colspan="3"></th>

と表記します。

ダブルクォーテーション内の数字は連結させる枠の数になるのでその時々の状況に応じて変更するものです。

下記のように表記すると縦に連結されます。

<table　border="1">

<tr>

<th rowspan="3">名前</th>
<th>①</th>
<th>②</th>
<th>③</th>

</tr>

<tr>

<td>A</td>
<td>B</td>
<td>C</td>

</tr>

<tr>

<td>D</td>
<td>E</td>
<td>F</td>

</tr>

</table>

次に、下記のように表記すると横に連結されます。

<table　border="1">

<tr>

<th colspan="4">順位</th>

</tr>

<tr>

<th rowspan="3">名前</th>
<th>①</th>
<th>②</th>
<th>③</th>

</tr>

<tr>

<td>A</td>
<td>B</td>
<td>C</td>

</tr>

<tr>

<td>D</td>
<td>E</td>
<td>F</td>

</tr>

</table>

本日はここまで( ´∀｀ )