https://hmaster.net/


HTMLタグとCSSを使いメモ帳だけで無料でホームページを作成する 方法を分かりやすく解説しているサイトです。 初心者向けに見やすい、読みやすい作りになっています。

横幅、高さを指定する

<table width="数字" height="数字">でテーブルの横幅と高さを 指定できます。<td>と<th>も同様の指定が出来ます。

■ テーブル全体、セルの横幅、高さを指定する

テーブル全体の横幅と高さを100ピクセルに、セルの横幅を 50ピクセルにすると以下のようなテーブルになります。

【ブラウザ表示】

横の長さ50横の長さ50

ソース

<table border="1" width="100" height="100">
<tr>
<td width="50">横の長さ50</td><td width="50">横の長さ50</td>
</tr>
</table>

■ 1段のみ横幅もしくは高さを指定する

下の表では左上のセルの横幅を指定してるので下の段は横幅を指定しなくても 上の段のセルと同じ横幅になります。従って横幅を指定してない方の セルの長さは(表全体の横幅400) - 150 = 250ピクセルになります。
また、上の段のセルは高さは指定 してませんが下の段のセルの高さを50ピクセルに指定しているので、 上の段のセルは高さは (表全体の高さ150) - 50 = 100ピクセルになります。

【ブラウザ表示】

横150×縦100横250×縦100
横150×縦50横250×縦50

ソース

<table border="1" width="400" height="150">
<tr>
<td width="150">横150×縦100</td><td>横250×縦100</td>
</tr>
<tr>
<td height="50">横150×縦50</td><td>横250×縦50</td>
</tr>
</table>

■ テーブル全体、セルの横幅、高さを%で指定

width="%"で指定した場合、テーブルの横幅は画面全体100%に対する割合 の長さになります。 テーブルの横幅が50%だと画面全体の2分の1、つまり半分の大きさということ になります。

テーブルの横幅と高さを指定してある時でセルの横幅、高さを%で指定した場合、 それらの大きさはテーブル全体に対する割合の大きさになります。

2列×2行のテーブル全体の横幅、高さが200ピクセルでセルの横幅、高さが50%の場合、 各セルの横幅、高さは、200×50%=100ピクセルということになります。 横幅や高さを 指定しない場合はセル内の文字の長さに応じて自動拡張します。

【ブラウザ表示】

横50%×縦50% 横50%×縦50%
横50%×縦50% 横50%×縦50%

ソース

<table border="1" width="200" height="200">
<tr>
<td width="50%" height="50%">横50%×縦50%</td>
<td width="50%" height="50%">横50%×縦50%</td>
</tr>
<tr>
<td width="50%" height="50%">横50%×縦50%</td>
<td width="50%" height="50%">横50%×縦50%</td>
</tr>
</table>

<table width="数字">や<td width="数字">を指定している場合、セル内の文字 や文章は指定された横幅の端までくると折り返し自動的に次の行に改行されます。 もし自動改行させたくない場合は<td nowrap> とするか<table width="数字">と<td width="数字">を両方とも 指定しない、のどちらかでOKです。

このエントリーをはてなブックマークに追加 Instagram

■ その他の項目

テーブルを作る
画像や背景色を指定する
表示位置を指定する
テーブルに表題をつける
間隔、余白を指定する
セルを結合する
枠線の色やスタイルを指定する
行と列をグループ化する
枠線の表示方法を指定する
細い枠線のテーブル
テーブルを横に並べる
テーブルで空白を作る

HTMLタグ一覧のページに戻る