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

TOP > HTML > テーブルの基本

テーブル

使用するタグ

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

基本的なテーブル

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作成ツール
等で試してみて下さい。