HTML 入門トップページ

---

目次

1. ホームページ作成はじめの一歩
2. HTMLの基礎
3. 基礎的なタグをマスターしよう
   1. 段落を作る
   2. 改行する
   3. 見出しの設定
   4. 文字スタイルの変更（太字 | 斜体 | 文字サイズ | 文字の色 | フォント | 複数のスタイル）
   5. 箇条書き
   6. 表を配置する
   7. 画像を配置する
   8. リンクを設定する
   9. 特殊文字を表示する
4. HTML 文書を検証してみよう
5. スタイルシート
6. フォームを使ってみよう
7. 参考サイト

---

基礎的なタグをマスターしよう

表を配置する

表を配置するには，表全体を <table> ... </table> で囲います．表の行を <tr> ... </tr> で配置します．各行に複数の列を <td> ... </td> で，（ただし，見出し行については <th> ... </th> で）配置します．もちろんすべての行で列の数が一致するように注意してください．

index.html（抜粋）コピー
<table border=1>
  <tr><th>abc</th><th>def</th><th>ghi</th></tr>
  <tr><td>12</td><td>123</td><td>12345678</td></tr>
  <tr><td>123</td><td>123456</td><td>12345678</td></tr>
</table>

セルを連結（結合）するには colspan を指定します．

index.html（抜粋）コピー
<table border=1>
  <tr><th>abc</th><th>def</th><th>ghi</th></tr>
  <tr><td>12</td><td>123</td><td>12345678</td></tr>
  <tr><td colspan="2">セルの連結</td><td>12345678</td></tr>
</table>

表をヘッダー，ボディ，フッターの3つに分けて定義することもできます．このとき，ボディはヘッダーの直後に記述することに注意しよう．また，<tbody> 要素を利用する場合，ヘッダー行でもなく，フッター行でもない行（<tr> 要素）は必ず <tbody> 要素の中に置かなければなりません．つまり，<tbody> 要素を利用する場合，<table> 要素の直接の子として <tr> 要素を置くことができないことに注意してください．

index.html（抜粋）コピー
<table border=1>
  <thead>
    <tr><th>abc</th><th>def</th><th>ghi</th></tr>
  </thead>
  <tbody>
    <tr><td>12</td><td>123</td><td>12345678</td></tr>
    <tr><td>123</td><td>123456</td><td>12345678</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="3">フッター</td></tr>
  </tfoot>
</table>

セルに色をつけるには，<td style="background-color:lime;"> のように指定します．また，<tr style="background-color:skyblue;"> のように記述すれば，行全体に色を付けることもできます．

index.html（抜粋）コピー
<table border=1>
  <tr style="background-color:skyblue;">
    <th>abc</th>
    <th>def</th>
    <th>ghi</th>
  </tr>
  <tr>
    <td>12</td>
    <td>123</td>
    <td style="background-color:lime;">12345678</td>
  </tr>
  <tr>
    <td>123</td>
    <td>123456</td>
    <td>12345678</td>
  </tr>
</table>

表の罫線の太さは border で指定します．ただし，これまでような border を使った罫線の指定方法は現在では非推奨となっており，後で説明する HTML Validation によってエラーとなります．この border を省略すれば，罫線は表示されなくなります．現在は border を省略し，後で説明する スタイルシートを使って罫線の太さや色つけなどをすることが推奨されています．

index.html（抜粋）コピー
<table border=3>
  <tr><th>abc</th><th>def</th><th>ghi</th></tr>
  <tr><td>12</td><td>123</td><td>12345678</td></tr>
  <tr><td>123</td><td>123456</td><td>12345678</td></tr>
</table>

<hr>

<table>
  <tr><th>abc</th><th>def</th><th>ghi</th></tr>
  <tr><td>12</td><td>123</td><td>12345678</td></tr>
  <tr><td>123</td><td>123456</td><td>12345678</td></tr>
</table>

---