まりふのひと

table タグを使う

基本型

入力
<table>
<tr>
<td>101</td><td>102</td><td>103</td>
</tr>
<tr>
<td>201</td><td>202</td><Td>203</td>
</tr>
</table>
表示

101102103
201202203
注)デザイン(テーマ)により、罫線が表示される場合とされない場合があります。

  • table は、「ここから表を使う」という宣言文です。
  • tr は、「ここから行を定義します」という宣言文です。
  • td は、「ここから、(その行の)セル(列、データ要素)の内容です」という宣言文です。
  • td 〜 /td 間の入力は、任意(全角も使える)です。

罫線を消す

罫線を表示しないようにするには、table タグに“border=0”を追加します。

入力
<table border=0>
<tr>
<td>101</td><td>102</td><td>103</td>
</tr>
<tr>
<td>201</td><td>202</td><td>203</td>
</tr>
</table>
表示

101102103
201202203

罫線を表示する

罫線を表示するには“border=1”とします。

入力
<table border=1>
<tr>
<td>101</td><td>102</td><td>103</td>
</tr>
<tr>
<td>201</td><td>202</td><td>203</td>
</tr>
</table>
表示

101102103
201202203

基本型の変形

上記は、次にように記述することができます。

入力
<table border=1>
<tr>
  <td>101</td>
  <td>102</td>
  <td>103</td>
</tr>
<tr>
  <td>201</td>
  <td>202</td>
  <td>203</td>
</tr>
</table>
表示

101 102 103
201 202 203


はてな」の場合はデザインにより異なりますが、一般的には次のことが言えます。

  • タグ間の半角スペースと[Enter]は同一視される。
  • タグ間の半角スペース、[Enter]は無視される。
  • 上記の記述方法は、行数は増えるが解りやすい。(特に、修正する時)

罫線に立体感を持たせる(三次元的効果)

“border”の値を、2以上の値にします。

入力
<table border=10>
<tr>
<td>101</td><td>102</td><td>103</td>
</tr>
<tr>
<td>201</td><td>202</td><td>203</td>
</tr>
</table>
表示

101102103
201202203

表の表示位置……ここからは、“border=1”で行ないます

table タグに“align”を追加します。

  • 左寄せ:“align="left"”
  • 中央揃い:“align="center"”
  • 右寄せ:“align="right"”
入力
<table border=1 align="center">
<tr>
<td>101</td><td>102</td><td>103</td>
</tr>
<tr>
<td>201</td><td>202</td><td>203</td>
</tr>
</table>
表示

101102103
201202203

right または left では、周囲に文章を回り込ませる

入力
君釣りに行きませんかと赤シャツがおれに聞いた。赤シャツは気味の悪いように優しい声を出す男である。まるで男だか女だかわかりゃしない。男なら男らしい声を出すもんだ。事に大学卒業生じゃないか。物理学校でさえおれぐらいな声が出るのに、文学士がこれじゃみっともない。
<table border=1 align="right">
<tr>
<td>101</td><td>102</td><td>103</td>
</tr>
<tr>
<td>201</td><td>202</td><td>203</td>
</tr>
</table>
おれはそうですなあと少し進まない返事をしたら、君釣りをした事がありますかと失敬な事を聞く。あんまりないが、子供の時、小梅の釣堀で鮒を三匹釣った事がある。それから神楽坂の毘沙門の縁日で八寸ばかりの鯉を針で引っかけて、しめたと思ったら、ぽちゃりと落としてしまったがこれは今考えても惜しいと言ったら、赤シャツは顋(アゴ)を前のほうへ突き出して、ホホホホと笑った。なにもそう気取って笑わなくっても、よさそうなものだ

表示

君釣りに行きませんかと赤シャツがおれに聞いた。赤シャツは気味の悪いように優しい声を出す男である。まるで男だか女だかわかりゃしない。男なら男らしい声を出すもんだ。事に大学卒業生じゃないか。物理学校でさえおれぐらいな声が出るのに、文学士がこれじゃみっともない。

101102103
201202203
おれはそうですなあと少し進まない返事をしたら、君釣りをした事がありますかと失敬な事を聞く。あんまりないが、子供の時、小梅の釣堀で鮒を三匹釣った事がある。それから神楽坂の毘沙門の縁日で八寸ばかりの鯉を針で引っかけて、しめたと思ったら、ぽちゃりと落としてしまったがこれは今考えても惜しいと言ったら、赤シャツは顋(アゴ)を前のほうへ突き出して、ホホホホと笑った。なにもそう気取って笑わなくっても、よさそうなものだ

文の途中から回り込ませるには

入力
君釣りに行きませんかと赤シャツがおれに聞いた。赤シャツは気味の悪いように優しい声を出す男である。<table border=1 align="right">
<tr>
<td>101</td><td>102</td><td>103</td>
</tr>
<tr>
<td>201</td><td>202</td><td>203</td>
</tr>
</table>まるで男だか女だかわかりゃしない。男なら男らしい声を出すもんだ。事に大学卒業生じゃないか。物理学校でさえおれぐらいな声が出るのに、文学士がこれじゃみっともない。
おれはそうですなあと少し進まない返事をしたら、君釣りをした事がありますかと失敬な事を聞く。あんまりないが、子供の時、小梅の釣堀で鮒を三匹釣った事がある。それから神楽坂の毘沙門の縁日で八寸ばかりの鯉を針で引っかけて、しめたと思ったら、ぽちゃりと落としてしまったがこれは今考えても惜しいと言ったら、赤シャツは顋(アゴ)を前のほうへ突き出して、ホホホホと笑った。なにもそう気取って笑わなくっても、よさそうなものだ

表示

君釣りに行きませんかと赤シャツがおれに聞いた。赤シャツは気味の悪いように優しい声を出す男である。

101102103
201202203
まるで男だか女だかわかりゃしない。男なら男らしい声を出すもんだ。事に大学卒業生じゃないか。物理学校でさえおれぐらいな声が出るのに、文学士がこれじゃみっともない。
おれはそうですなあと少し進まない返事をしたら、君釣りをした事がありますかと失敬な事を聞く。あんまりないが、子供の時、小梅の釣堀で鮒を三匹釣った事がある。それから神楽坂の毘沙門の縁日で八寸ばかりの鯉を針で引っかけて、しめたと思ったら、ぽちゃりと落としてしまったがこれは今考えても惜しいと言ったら、赤シャツは顋(アゴ)を前のほうへ突き出して、ホホホホと笑った。なにもそう気取って笑わなくっても、よさそうなものだ