情報処理 I - 第６回　補足

１．ホームページ制作（CSS に頼らないテーブル編）

１．１　CSS を使わずに枠線を表示する

セルに枠線を引くには，<table border="1"> ～ </table> とします．border は枠線の有無を指定する属性で，数字は外枠の太さです．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

<head>
  <title>TABLE</title>
</head>

<body>

  <table border="1">

    <tr>
      <th></th>
      <th>第１列</th>
      <th>第２列</th>
      <th>第３列</th>
    </tr>

    <tr>
      <th>第１行</th>
      <td>第１行第１列</td>
      <td>第１行第２列</td>
      <td>第１行第３列</td>
    </tr>

    <tr>
      <th>第２行</th>
      <td>第２行第１列</td>
      <td>第２行第２列</td>
      <td>第２行第３列</td>
    </tr>

  </table>

</body>

</html>

１．２　外枠の太さを変更する

外枠を太くすると，出っ張ったような陰影を付けます．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

<head>
  <title>TABLE</title>
</head>

<body>

  <table border="10">

    <tr>
      <th></th>
      <th>第１列</th>
      <th>第２列</th>
      <th>第３列</th>
    </tr>

    <tr>
      <th>第１行</th>
      <td>第１行第１列</td>
      <td>第１行第２列</td>
      <td>第１行第３列</td>
    </tr>

    <tr>
      <th>第２行</th>
      <td>第２行第１列</td>
      <td>第２行第２列</td>
      <td>第２行第３列</td>
    </tr>

  </table>

</body>

</html>

１．３　セルの間隔を変更する

セルの間隔は cellspacing="数値" という属性で指定します．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

<head>
  <title>TABLE</title>
</head>

<body>

  <table border="10" cellspacing="7">

    <tr>
      <th></th>
      <th>第１列</th>
      <th>第２列</th>
      <th>第３列</th>
    </tr>

    <tr>
      <th>第１行</th>
      <td>第１行第１列</td>
      <td>第１行第２列</td>
      <td>第１行第３列</td>
    </tr>

    <tr>
      <th>第２行</th>
      <td>第２行第１列</td>
      <td>第２行第２列</td>
      <td>第２行第３列</td>
    </tr>

  </table>

</body>

</html>

１．４　セルの枠と中身の間隔を調整する

セルの枠と中身との間隔は cellpadding="数値" という属性で指定します．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

<head>
  <title>TABLE</title>
</head>

<body>

  <table border="10" cellspacing="7" cellpadding="5">

    <tr>
      <th></th>
      <th>第１列</th>
      <th>第２列</th>
      <th>第３列</th>
    </tr>

    <tr>
      <th>第１行</th>
      <td>第１行第１列</td>
      <td>第１行第２列</td>
      <td>第１行第３列</td>
    </tr>

    <tr>
      <th>第２行</th>
      <td>第２行第１列</td>
      <td>第２行第２列</td>
      <td>第２行第３列</td>
    </tr>

  </table>

</body>

</html>

１．５　周囲に罫線を引く

border と cellspacing の代わりに frame="線を引く場所" という属性を使うと，外枠を線（罫線）にできます．線を引く場所には void（外枠なし），abobe（上端のみ），below（下端のみ），hsides（上端と下端），lhs（左端のみ），rhs（右端のみ），vsides（左端と右端），box（全周囲），border（全周囲）が指定できます．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

<head>
  <title>TABLE</title>
</head>

<body>

  <table frame="hsides" cellpadding="5">

    <tr>
      <th></th>
      <th colspan="2">第１列と第２列</th>
      <th>第３列</th>
    </tr>

    <tr>
      <th>第１行</th>
      <td>第１行第１列</td>
      <td rowspan="2">第１行と第２行の第２列</td>
      <td>第１行第３列</td>
    </tr>

    <tr>
      <th>第２行</th>
      <td>第２行第１列</td>
      <td>第２行第３列</td>
    </tr>

  </table>

</body>

</html>

１．６　セルの間に罫線を引く

rules="線を引く場所" という属性を使うと，セルの間に罫線を引くことができます．線を引く場所には none（罫線なし），rows（行間のみ），cols（列間のみ），all（全部）が指定できます．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

<head>
  <title>TABLE</title>
</head>

<body>

  <table frame="hsides" rules="all" cellpadding="5">

    <tr>
      <th></th>
      <th colspan="2">第１列と第２列</th>
      <th>第３列</th>
    </tr>

    <tr>
      <th>第１行</th>
      <td>第１行第１列</td>
      <td rowspan="2">第１行と第２行の第２列</td>
      <td>第１行第３列</td>
    </tr>

    <tr>
      <th>第２行</th>
      <td>第２行第１列</td>
      <td>第２行第３列</td>
    </tr>

  </table>

</body>

</html>

<thead>～</thead>，<tbody>～</tbody>，<tfoot>～</tfoot>および<colgroup>を用いてセルをグループ化しておけば，線を引く場所に groups を指定してグループ単位に罫線を引くことができますが，ここでは説明を割愛します．

１．７　表にキャプションを付ける

表の見出し（キャプション）は<caption>～</caption>でマークアップします．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

<head>
  <title>TABLE</title>
</head>

<body>

  <table frame="hsides" rules="all" cellpadding="5">

    <caption>表の例</caption>

    <tr>
      <th></th>
      <th colspan="2">第１列と第２列</th>
      <th>第３列</th>
    </tr>

    <tr>
      <th>第１行</th>
      <td>第１行第１列</td>
      <td rowspan="2">第１行と第２行の第２列</td>
      <td>第１行第３列</td>
    </tr>

    <tr>
      <th>第２行</th>
      <td>第２行第１列</td>
      <td>第２行第３列</td>
    </tr>

  </table>

</body>

</html>

情報処理 I - 第６回 補足

１．ホームページ制作（CSS に頼らないテーブル編）

１．１ CSS を使わずに枠線を表示する

１．２ 外枠の太さを変更する

１．３ セルの間隔を変更する

１．４ セルの枠と中身の間隔を調整する

１．５ 周囲に罫線を引く

１．６ セルの間に罫線を引く

１．７ 表にキャプションを付ける