無料ホームページ作成!HTML
表の作成

無料ホームページ作成!HTML・表
表の作成(TABLE,TR,TD要素)

ホームページで表を作成

TABLE要素 (ブロック)

table要素は表の全体を宣言する要素です、<table>タグの中に<tr>タグ、<td>タグを入れて使います。

TR要素 (ブロック)

tr要素は表の行を作成する要素です、<tr>タグは<table>タグの中に入れて使います。
終了タグは省略できます。

TD要素 (ブロック)

td要素はセル(内容を書く部分)を作成する要素です、<td>タグは<table>タグの中に入れてさらに<tr>タグの中に入れて宣言します。
終了タグは省略できます。

<table>、<tr>、<td>タグの使い方

HTMLソース

<table border="1">
 <tr>
  <td>ココに内容を書きます<td>
  <td>trタグ内に二個のtdタグを宣言しているので一つの行にセルが二つです<td>
 </tr>
 <tr>
  <td>このtr、tdタグに終了タグが付けてません
  <td>このtr、tdタグに終了タグが付けてません
</table>
 
結果
ココに内容を書きます trタグ内に二個のtdタグを宣言しているので一つの行にセルが二つです
このtr、tdタグに終了タグが付けてません このtr、tdタグに終了タグが付けてません

TABLE、TR、TD要素で宣言できる属性

table用
属性名 概要
align center 表を中央揃えで表示
right 表を右揃えで表示
left 表を左揃えで表示
background 画像ファイル 絶対パスか相対パスで背景画像を指定
bgcolor #RRGGBB #000000等の16進数で2桁ずつ背景色を宣言し、細かく設定できる
red 色名で背景色を指定する、この場合は背景を赤色にする
border px pxで枠の太さを設定
bordercolor #RRGGBB #000000等の16進数で2桁ずつ枠の色を宣言し、細かく設定できる
red 色名で枠の色を指定する、この場合は枠を赤色にする
bordercolorlight
※1
#RRGGBB #000000等の16進数で2桁ずつ外線の光の色を宣言し、細かく設定できる
red 色名で外線の光の色を指定する、この場合は光を赤色にする
bordercolordark
※1
#RRGGBB #000000等の16進数で2桁ずつ外線の影の色を宣言し、細かく設定できる
red 色名で外線の影の色を指定する、この場合は影を赤色にする
frame※1 void 外線を表示しない
above 上の外線のみ表示
rhs 右の外線のみ表示
below 下の外線のみ表示
lhs 左の外線のみ表示
hsides 上下の外線のみ表示
vsides 左右の外線のみ表示
border 外線全て表示
rules※1 none 内線を表示しない
cols 縦の内線のみ表示
rows 横の内線のみ表示
all 内線全て表示
summary 文字 表の概要を記述
width px,% pxか%で表の幅を設定
height※2 px,% pxか%で表の高さを設定
hspace※3 px pxで表の上下の余白を設定
vspace※3 px pxで表の左右の余白を設定
cellpadding px px単位でセルの枠の余白の設定
cellspacing px px単位で表の外線とセルの余白の設定

※1:未対応ブラウザ:NN、Safari
※2:未対応ブラウザ:Safari
※3:未対応ブラウザ:IE、Safari、OPERA、Firefox

tr用
属性名 概要
align center 行のセル内を中央揃えで表示
right 行のセル内を右揃えで表示
left 行のセル内を左揃えで表示
valign baseline 行のセル内をベースラインに揃える
top 行のセル内を上に揃える
middle 行のセル内を中央に揃える
bottom 行のセル内を下に揃える
bgcolor #RRGGBB #000000等の16進数で2桁ずつ背景色を宣言し、細かく設定できる
red 色名で背景色を指定する、この場合は背景を赤色にする
td用
属性名 概要
align center 行のセル内を中央揃えで表示
right 行のセル内を右揃えで表示
left 行のセル内を左揃えで表示
valign baseline 行のセル内をベースラインに揃える
top 行のセル内を上に揃える
middle 行のセル内を中央に揃える
bottom 行のセル内を下に揃える
bgcolor #RRGGBB #000000等の16進数で2桁ずつ背景色を宣言し、細かく設定できる
red 色名で背景色を指定する、この場合は背景を赤色にする
width px,% pxか%でセルの幅を設定
height px,% pxか%でセルの高さを設定
colspan 数字 入れられた値分、横のセルと連結する
rowspan 数字 入れられた値分、縦のセルと連結する
nowrap nowrap 自動改行の禁止
<td nowrap>と宣言する

表はCSS・スタイルシートも少し使い辛く分かり難いと思いますが中々便利です。
少々面倒ですがdiv要素で表を作ることもできます。

無料ホームページ作成!メニュー

HTML

基本

HEAD要素内

文章

画像

リンク

リスト

フォーム

グループ

フレーム

その他

リンクについてお問い合わせ
無料ホームページ作成!HTML&CSS