今回、HTML学習日記Part3では、いつも通り、Codecademyで学習したことをアウトプットしていこうと思います。
では、今回学習したHTMLの内容を以下に書いていきます。
本日は、主に、表の作成の仕方について学習しました。
表を作成するには、まず、以下のような<table> elementを作成します。
<table>
</table>
次に、表の行の部分を作成します。表の行の部分作成には、以下のような<tr> elementを<table>と</table>の間に書き込みます。
<tr>
</tr>
同様にtr elementの数を増やせば、それに伴って、２行、3行、4行、、、と行の数も増えていきます。
次に、行の中にデータを入力したい場合は、以下のような<td> elementを同様に<tr>と</tr>の間に書き込みます。
<td>1</td>
これは、1行1列のデータで、１が出力されます。
同様に、<td> elementの数を増やせば、それに伴って、行の中のデータが増えていき、1行1列のデータが、1行2列、1行3列、、、と行の中のデータの数も増えていき、列の数が増加していきます 。
次に、表の見出しを作成したい場合、以下のようなtable heading elementと呼ばれる<th> elementを用います。
<th>月曜日</th>
これは、基本的には、前回の<td> elementと同じような、使い方をし、今回は、月曜日を出力します。
この表の見出しが、行の見出しなのか、列の見出しなのか区別する際に、用いられるのが、以下のようなscope attributeで、それがrowだと、行を意味し、colだと、列を意味します。
<th scope=”row”>月曜日</th>
<th scope=”col”>１限目</th>
これは、行の見出しが、月曜日、列の見出しが1限目を意味しています。これを使うと、時間割のような、表を作成する時に、どれが行の見出しで、どれが列の見出しなのかが、分かりやすくなります。
次に、2限目と3限目が数学だった場合や、イベントが２日に続いてある場合などで、使える。行方向と列方向への伸ばし方について学習しました。
まず、列方向（横方向）に伸ばしたい場合、以下のようにcolspan attributeを使います。
<td colspan=”2″>コンサート</td>
これは、コンサートが、2列に渡って表示されます。
次に、行方向（縦方向）に伸ばしたい場合、以下のようにrowspan attributeを使います。
<td rowspan=”2″>数学</td>
これは、数学が、2行に渡って表示されます。
次に、表のデータが多くなった場合、表の見出し以外には、以下のような、<tbody> elementで囲ってあげると見やすくなります。
<tbody>
</tbody>
一方で、見出しに対しては、以下のような<thead> elementで囲ってあげると見やすくなります。
<thead>
</thead>
次に、表の最下部の合計のデータなどを分離させて見やすくさせるため、以下のような<tfoot> elementで囲ってあげると見やすくなります。
<tfoot>
</tfoot>
最後に、表に色を付け加えたり、境界を付け加えたいなどの表に追加で情報を付け加えて、より良いものにしたい場合は、CSSを使うと良いそうです。（CSSをまだ、学んでない私には、そんなことは出来ませんが、、、）
以上が、今回、私がHTMLで学習した内容でした！
今回、HTMLの学習を進めていくにつれて、HTMLをより充実させて使うには、HTMLだけでなく、CSSも使えるようにならないと、いけないのかなと思いました。
Codecademy https://www.codecademy.com/
コメント