Tableタグを学ぶ

僕は基本的に、HTMLやCSSはあらかた理解しているのですが、Tableタグ関係とFormタグ関係は苦手です。

というのも、今の時代、サイトのレイアウトテーブルなんて使いませんし、プログラムもほとんど触ったことがないのでフォームタグなんて使いません。

そんな状況で受けた本日の研修では、テーブルタグを使ったデータ表示をやりましたので、復習も兼ねて情報を載せておきます。

テーブルタグの基礎

<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

<table>
<tr>
<td colspan=”3”></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

<table>
<tr>
<td rowspan=”2”></td>
<tr>
<td></td>
<tr>
<td></tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

基本は、このcolspanとrowspanを覚えておけば大丈夫かと。以下はプラスアルファ。

テーブルタグ＋α

<table width="500" border="1" cellspacing="0" cellpadding="2">
<caption></caption>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

出てきたのはcaptionタグ。これは表題をつけることができます。

テーブルタグ応用編

今回僕が使用したのが、テーブルタグ内にテーブルを配置し、中にあるテーブルをスクロール表示させるというもの。

やることは、テーブル内にテーブルを配置して、中のテーブルをdivなどで囲い、それをCSSのoverflowで処理するというものです。

HTMLタグ

<table width="500" border="1" cellspacing="0" cellpadding="2">
<tr>
<th scope="col">&nbsp;</th>
<th scope="col">&nbsp;</th>
<th scope="col">&nbsp;</th>
</tr>
<tr>
<td colspan="3">
<div class="hoge">
<table width="500" border="1" cellspacing="0" cellpadding="2">
<tr>
<th scope="col">&nbsp;</th>
<th scope="col">&nbsp;</th>
<th scope="col">&nbsp;</th>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</div>
</td>
</tr>
</table>

コツとしては、divタグで囲うところです。tableタグはoverflow処理が効かないので、divタグで囲う必要があります。

CSS

.hoge {
height: 100px;
overflow: scroll;
}

CSSは特にこれといった特徴はないかと。

スポンサード・リンク