https://hmaster.net/


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

テーブルを作る

テーブルタグは表を作ることができます。 テーブルの中の1つ1つのマス目 である「セル」という部分に文字や画像などを入れていきます。 テーブルは横方向にセルを増やしていったり縦方向に段組していく ことができます。 テーブルに border属性を指定しないと枠線は表示されません。 border="0"と指定しても枠線は非表示になります。

■ 基本的なテーブルを作る

まずは1マスだけの基本的なテーブル(表)を作ります。 テーブルを作るには<table>タグの中に<tr>タグ と<td>タグを記述します。

テーブルの枠線を太くしたい場合はborder="数字"の値を 大きくします。

【ブラウザ表示】

セル

ソース

<table border="1"> ………テーブルの枠線の太さ
<tr> ………trはテーブル の行を表します。
<td>セル</td> ………tdはテーブル の列を表し ます。
</tr>
</table>

■ 横方向にセルを増やしていく

<td>~</td><td>~</td>のように <td>タグを横につなげていくことで横方向にセルを増やしていく ことができます。

【ブラウザ表示】

セル1セル2

ソース

<table border="1">
<tr>
<td>セル1</td><td>セル2</td> …横方向にセルが 増えます(1列、2列…)
</tr>
</table>

■ 縦方向にセルを段組していく

縦方向にセルを段組していくこともできます。 HTMLソースではテーブルの1行目の終わりと2行目の始めの 区切りをわかりやすくするため
</tr>

<tr>

のように1行以上のスペースを空けます。

【ブラウザ表示】

セル1
セル2

ソース

<table border="1">
<tr>
<td>セル1</td>
</tr>
ここで1行目が終了しセル2は次の行へ段組されます。
<tr>
<td>セル2</td>
</tr>
</table>

■ セルに見出しを表示する

<th>~</th>で見出しを表示することができます。 tdとの違いはセル内の 文字がセンタリングされ太字で表示されます。

【ブラウザ表示】

見出し 見出し
セル3セル4

ソース

<table border="1">
<tr>
<th>見出し</th><th>見出し</th>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>

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

■ その他の項目

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

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