石田修二研究室　＞　ホームページ作り　＞    （サイト内検索）

テーブルタグ

教科書159ページの内容です。

表の基本

学生食堂のメニュー（写真）を例に，これを表で表してみましょう。

<table>
  <tbody>
    <tr><td>メニュー</td><td>価格（円）</td></tr>
    <tr><td>エビマカロニグラタン</td><td>350</td></tr>
    <tr><td>ミートマカロニグラタン</td><td>350</td></tr>
    <tr><td>ミートソースパスタ</td><td>320</td></tr>
    <tr><td>明太子クリームパスタ</td><td>320</td></tr>
    <tr><td>鶏マヨ丼</td><td>350</td></tr>
    <tr><td>特盛 鶏マヨ丼</td><td>450</td></tr>
    <tr><td>ハヤシライス</td><td>300</td></tr>
  </tbody>
</table>

罫線を入れるには，<table> タグに border="1"を追加してみます。つまり，<table border="1"> とするのです。

セルとセルの間に空白が入っています。これを防ぐには，さらに，border-collapse: collapse; というおまじないを入れます。つまり，<table border="1" style="border-collapse: collapse;"> とします。

キャプションもつけてみましょう。<caption>...</caption> を <table>の次に配置します。

セルの中身を右揃え，中央揃え，左揃えにする場合，text-align: rightという要素をtdタグの中に入れます。

しかし，これをすべてのセルに行うのは大変なので，共通要素は CSSファイルに書き込んでおき，例外だけ HTMLページに入れることにしましょう。

履歴書を作ってみよう

こちらにサンプルを置いておきました。課題のサンプルにどうぞ。

リンクはご自由にどうぞ。

【石田修二研究室】　　【ホームページ入門】

Last modified: 2015-12-16 21:43:40