テーブルの基本-HTMLの基本をおさらい

TOP > HTML  > テーブルの基本

テーブル

使用するタグ

テーブル（表）を作成するには主に次のタグを用います。
  • <table> ... テーブル全体
  • <tr> ... テーブルの１行
  • <td> ... テーブルの１マス
  • <th> ... テーブルの１マス（主にタイトル部分）

基本的なテーブル

2行3列のテーブルは以下のように作成します。 
<table>
<tr><td>●</td><td>■</td><td>▲</td></tr>
<tr><td>○</td><td>□</td><td>△</td></tr>
</table>

表示結果

●■▲
○□△

枠線をつける

border="n" 属性でテーブルに枠線をつけることができます。 
<table border="1">
<tr><td>●</td><td>■</td><td>▲</td></tr>
<tr><td>○</td><td>□</td><td>△</td></tr>
</table>

表示結果

●■▲
○□△
<table border="5">
<tr><td>●</td><td>■</td><td>▲</td></tr>
<tr><td>○</td><td>□</td><td>△</td></tr>
</table>

表示結果

●■▲
○□△

■ セルを連結する

<td colspan="n"> を用いると、右方向に n 個のセルを連結します。 
<table border="1">
<tr><td colspan=2>●</td><td>▲</td></tr>
<tr><td>○</td><td>□</td><td>△</td></tr>
</table>

表示結果

●▲
○□△
<td rowspan="n"> で縦方向に n 個のセルを連結します。 
<table border="1">
<tr><td>●</td><td>■</td><td rowspan="2">▲</td></tr>
<tr><td>□</td><td>△</td></tr>
</table>

表示結果

●■▲
□△

■ 立体感の無いテーブルにする

cellspacing="0" を指定することで、テーブルの立体感を無くします。 
<table border="1" cellspacing="0">
<tr><td>●</td><td>■</td><td>▲</td></tr>
<tr><td>○</td><td>□</td><td>△</td></tr>
</table>

表示結果

●■▲
○□△
cellspacing="5" にすると以下のようになります。 
<table border="1" cellspacing="5">
<tr><td>●</td><td>■</td><td>▲</td></tr>
<tr><td>○</td><td>□</td><td>△</td></tr>
</table>

表示結果

●■▲
○□△

■ 色付きのテーブル

table, tr, td タグの属性で bordercolor="x" や bgcolor="x" を設定することでセルに着色ができます。 
<table border="3" bordercolor="red" bgcolor="skyblue">
<tr bgcolor="red"><td>●</td><td>■</td></tr>
<tr><td bgcolor="#f0f0f0">○</td><td>□</td>/tr>
</table>

表示結果

●■
○□

■ テーブルの中身を改行しない

th, td タグの属性に nowrap="nowrap" とすることでセルの中身を改行しないようにできます。 
<table border="1" cellspacing="0">
<tr>
<td nowrap="nowrap">○○○○○○○○○○</td>
<td>□□□□□□□□□□</td>
</tr>
</table>

表示結果

○○○○○○○○○○□□□□□□□□□□

■ 右寄せ・左寄せ

tr, th, td に align属性をつける事で右寄せ・左寄せができます。 
<table border="1" cellspacing="0">
<tr><td>これは指定なしのセルです。</td></tr>
<tr><td align="right">右寄せ。</td></tr>
<tr><td align="center">中寄せ。</td></tr>
<tr><td align="left">左寄せ。</td></tr>
<tr align="right"><td>右寄せ。</td></tr>
</table>

表示結果

指定なし。
右寄せ。
中寄せ。
左寄せ。
右寄せ(trに指定)。

■ 上寄せ・下寄せ

tr, th, td に valign属性をつける事で上寄せ・下寄せができます。 
<table border="1" cellspacing="0">
<tr><td>指定なし。</td><td>●<br />●<br />●</td></tr>
<tr><td valign="top">上寄せ。</td><td>●<br />●<br />●</td></tr>
<tr><td valign="middle">中寄せ。</td><td>●<br />●<br />●</td></tr>
<tr><td valign="bottom">下寄せ。</td><td>●<br />●<br />●</td></tr>
</table>

表示結果

指定なし。●
●
●
上寄せ。●
●
●
中寄せ。●
●
●
下寄せ。●
●
●
スタイルシートなどを使用するとより細かい設定ができるようになりますので、
CSS様々な表レイアウトを作成するツール  HTMLタグでTABLE作成ツール
等で試してみて下さい。