近牡と申します。
今日は以前記事に書いた目次の見た目をまとめる方法を紹介いたします。
いくつか方法はあるのですが、今回はそのうちの一つ<table>タグを使う方法を紹介いたします。
<table>は、tableの見出しとなる<th>タグと、<tr>タグ、<td>タグを組み合わせて使用します。
ざっくりいうと、trが列要素でtdがエクセルでいうセル要素です。
tableはこれらの要素が複雑に組み合わさり、利用するものとなります。
例：
<table border="1px">
<th>見出し</th>
<tr><td>要素</td><td>要素</td></tr>
</table>
| 見出し | |
|---|---|
| 要素 | 要素 |
部分的に要素の色を変えたい場合や、見出しを変更する場合などにレイアウトの変更がしやすい利点がありますが、アメブロに限らずPCで表示した場合とスマートフォンで表示した場合のページの構造に揺れが発生する原因になる場合も多く、様々な端末や環境からWEBページを閲覧される最近ではあまり推奨できないタグとなります。
CSSでスタイルを調整しようとした場合に親要素、子要素の指定が難しい(trの中にtdタグがあってもそれぞれのタグが独立したものとなるためtr td{...}という指定はできない)、tdにクラス名でまとめて管理することが出来ず、各td要素にクラス属性を追加する必要があるなど、不便な点も多いのですが料金一覧表などどうしても表の要素が必要な場合、完全に切り離すことはできないため使い方を覚えておきましょう。
（個人的にはただの表であればExcelなどで作成した画像を貼った方が便利だと思いますが…)
tableの活用例
<table border="1px">
<th>蛸無したこ焼研究所 テーマ選択</th>
<tr><td>HTML</td></tr>
<tr><td>CSS</td></tr>
<tr><td>Java Script</td></tr>
</table>
| 蛸無したこ焼研究所 テーマ選択 |
|---|
| HTML |
| CSS |
| Java Script |
今回は割愛していますが、tdタグ内にハイパーリンクを設置したり、画像を入れることも可能です。
作り始めるときは使用するタグも多く、少し手間はかかりますが使い方次第でレイアウトの調整が可能なので、ある程度作ってしまうと後はコピー&ペーストなどを使って表のレイアウトを調整していきましょう。
次回はtableを活用したちょっとした小技をいくつか紹介いたします。