tableの作成とデザイン
今回は初めてtableの作成とデザインを行いました。はじめはややこしいなと思っていましたが、理屈を理解できれば、そこまで難しい内容ではないと感じましたね。
tableの作成方法
今回の記述です。
HTML
<table>
<caption>工房の概要・沿革</caption>
<tr>
<th>工房名</th>
<td>FOREST STUDIO</td>
</tr>
<tr>
<th>所在地</th>
<td>〒000－0000 東京都山間部の山の町1－3－5</td>
</tr>
<tr>
<th>設立</th>
<td><time datetime="1990-08">1990年8月</time></td>
</tr>
<tr>
<th>主な活動</th>
<td>
<ul>
<li>工房の運営</li>
<li>ひまわり畑の管理</li>
<li>散策コースの整備</li>
</ul>
</td>
</tr>
</table>
/*アバウトページ*/
table,th,td {
border: solid 1px #aaa;
}
table {
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
}
th,td {
padding: 10px 20px
}
th {
width: 150px;
background-color: #ffcb63;
text-align: left;
}
td {
width: 450px;
background-color: #ffedce;
}
caption {
font-weight: bold;
background-color: #d9d8a7;
border-radius: 10px;
padding: 5px;
margin-bottom: 10px;
}
まず、今回はaboutのページを新たに作成しました。そこに上記の記述をしています。
ヘッダーとフッター以外の部分は削除し、新たに記事を作成しています。
tableタグは、必ず<table>から始まります。あとは以下のタグで構成されています。
<tr> table row 行を構成
<th> table header 行の見出しを構成
<td> table deta 行のデータセルを構成
tableの次に来るのは、行を構成しなくてはならないので、<tr>ということになります。
<tr>の構成は、どういったtableを作りたいかによって変わりますが、今回作成したようなシンプルなtableであれば、
<table>
<tr>
<th>見出し</th>
<td>内容</td>
</tr>
</table>
と言った感じで作れます。tableは1行ずつ完成させていくので、<tr>～</tr>までのくだりを連続させていくだけで、行の数が増えていきます。すべての行の記述が終わったら、必ず</table>で終わります。
セルの結合方法
tableの形によってはエクセルのようにセルを結合させたいと思うときがあります。そういったときは、
rowspan 縦方向の結合
colspan 横方向の結合
上記のタグを使用します。
実際にタグでは、
<tr>
<th rowspan="2">縦方向に2セル結合</th>
<td>内容</td>
</tr>
<tr>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td colspan="2">横方向に2セル結合
</tr>
border-collapse: collapse
border-collapse: collapseの記述は、隣接するボーダーを重ねて表示する記述です。同じborder-collapseプロパティにsparateがあります。sparateは間隔を開けて表示させる記述です。
まとめ
以前独学でtableを勉強したことがあったんですが、あのときはもうツールに頼ろう！と決め込むほど理解できませんでしたが、今回改めて勉強してみると、思っていたより難しくありませんでした。ただ、人に説明するほどは理解していないので、これからさらに理解を深めていきたいと思います。
今回は新たにページを作成したので、BeforeAfterがありません。実績だけ残しておきます。
