table編④～横に連結したい

こんにちはー近牡と申します。


今日はtableタグ完結編、横に連結したい場合についてお話します。

見出しとなるthタグを横に広げたい

th要素にcolspan属性を加え、横に連結します。

イメージしやすいようにth要素を2つ追加して配置しています。

colspanを使用するときは、連結したいセルの数を指定します。

menu	ここは削除	ここも削除
料金一覧	本日のおすすめ	気まぐれバザー
	2,000円	500円

<table border="1px">
<th bgcolor="#3ec" colspan="3">menu</th>

<tr><td rowspan="2">料金一覧</td><td>本日のおすすめ</td><td>気まぐれバザー</td></tr>

<tr><td>2,000円</td><td>500円</td></tr>
</table>

実際の表示

menu
料金一覧	本日のおすすめ	気まぐれバザー
	2,000円	500円

一目で関連してる場所がわかるので、このようなちょっとした料金表や、目次一覧の作成等にtableを覚えておくと便利です。