HTMLテーブルは、スプレッドシートに似た 行と列からなる標準的な構造になっています HTMLテーブルの使用目的は、ここにある例のように 売上高、気象統計情報、スポーツの結果などの データを表示することです 何年もの間 設計者は、テーブルをページレイアウト用に流用してきました これをすると、視覚障害者や身体に障害を持つユーザーにとって重大な アクセシビリティの問題が発生します このため、テーブルはデータ用にのみ使用する必要があります では、Dreamweaver CCでテーブルを挿入する方法を説明しましょう 最初に、空白の新しいHTMLページを作成します 「ファイル」から 「新規作成…」を選択し 「HTML」と、レイアウトの「なし」を選択して このページを DW2014フォルダー内のexercisesフォルダーに 「table_insert.html」という名前で保存します テーブルの挿入方法はいくつかあります まず、「デザイン」ビューで作業していることを確認してください 「ライブ」ビューではテーブルを挿入できません いや、「ライブ」ビューでも挿入できないことはないのですが、きわめて難しい処理になります 次に、「挿入」メニューから 「Table」を選択します キーボードショートカットも使用できます。
Windowsの場合はCtrl+Alt+T Macの場合はCommand+Option+Tです 「挿入」パネルを使用することもできます 「挿入」パネルを使う場合は パネルの左上のメニューから 「一般」が選択されていることを確認してください これで、「挿入」パネルからテーブルを挿入できます 「Table」をクリックすると、 「Table」ダイアログボックスが開きます 行数と列数を設定します 行数と列数は後で変更できます 行数を6 列数を3に設定することにしましょう 「テーブルの幅:」の設定値は削除したほうがいいでしょう 内容全体がテーブルに収まるように テーブルが自動的に拡大されるようにするためです 次に「ボーダー:」ですが、HTML5では 枠の太さには1ピクセルしか指定できません テーブルの枠をもっと太くしたい場合は CSSを使用する必要があります ほとんどのテーブルは、枠がないほうが見栄えが良いため 枠の値は削除することにします 「セル内余白:」は、各テーブルセル内に 上下左右の余白を追加します この設定を使用すると、すべてのセルに同じ幅の余白が追加されます HTML5では、cellpadding属性は廃止されました そのため、セル内の余白は使用しません。
CSSを使用する方がよいです セル間隔(cellspacing属性)についても同じことが言えます この設定により、各セルの周囲に同じ大きさの余白が追加されます これもCSSを使用して行うほうがよいです 次のセクションでは、ヘッダーセルの配置場所を 決定します ヘッダーセルは設定しなくてもかまいません ヘッダーセルは、左側、 上部、または上部と左側の両方に設定できます ここでは、「両方」を選択します 次の「アクセシビリティ」セクションには、 キャプションを追加するオプションがあります テーブルにキャプションを指定する場合は ここで何らかのプレースホルダーテキストを指定しておくことをお勧めします テーブルを作成した後に「テーブル」ダイアログボックスを再び開くことは できないためです そのため、キャプションを作成する場合は、ここで作成します ここで作成しないと、後で基礎となるHTMLコードを表示して 手動で挿入しなければならなくなります ここでは、「Placeholder caption」とだけ指定しておきます summaryは使用されなくなったため、HTML5では廃止されました テーブルのsummary属性が Webページに実際に表示されたことはありません summary属性はアクセシビリティを提供する目的でのみ設計されました 現在は、キャプションを使用するか 他の方法でテーブルの内容を示すことが推奨されます 選択を行った後、「OK」をクリックします これで、「Placeholder caption」とテーブルの両方が挿入されます テーブルには何も含まれていないと セル内で挿入を行うことは非常に困難です そこで、マウスをテーブル上に移動し 右クリックして、コンテキストメニューから 「テーブル」を選択し、一番下の 「拡張テーブルモード」を選択します この設定によりセルが拡大され、セル内への テキストの挿入がはるかに簡単になります これはあくまでDreamweaver CC内のビジュアルツールであり テーブルに何らかの処理が実際に行われているわけでも 基礎となるHTMLに何らかの要素が追加されているわけでもありませんが セル内のクリックがしやすくなります これで、入力を開始できます 見出しを追加した後、タブを押すと 次のセルに移動します 最初の行の内容を入力したら 「拡張テーブルモード」を終了できます 終了するには、上部のこの「終了」をクリックします これで、テーブルは通常のサイズに縮小されます 先ほど、上部と左側の両方にヘッダーを設定することを選択したため 一番上の行はすべて太字で表示されています このセル内をクリックして 数字を入力すると これも太字で表示され、中央揃えで表示されます これは、「th」要素を使用しているためです しかし、次のセルで データを入力すると、左寄せになり 通常のテキストで表示されます これは、「td」（テーブルデータセル）を使用しているためです 入力すると テーブルセルが自動的に拡大し 入力内容がセルに収まるようになっていましたね 「デザイン」ビューには、テーブルセルの区画を示す 点線が表示されますが 「ライブ」ビューに切り替えると 点線は消えるので、ブラウザーでどう見えるかを確認できます 「デザイン」ビューに戻ると 再びテーブルに内容を追加できます Dreamweaver CCでは、複数の方法でテーブルを挿入できます その 1 つは、「挿入」パネルから「テーブル」を選択する方法です その際は、パネルの左上で「一般」が選択されていることを確認してください もう1つの方法は、「挿入」メニューから「Table」を選択する方法です キーボードショートカットを使用することもできます。
Windowsでは Ctrl+Alt+T MacではCommand₊Option₊Tです テーブルは、「デザイン」ビュー内の どこであれ現時点の挿入ポイントに挿入されます 「Table」ダイアログボックス内で 必要な行数と列数をはじめに設定します また、幅の設定は削除するのがよいでしょう テーブルが自動的に拡大して 挿入する内容がテーブルに収まるようになるからです テーブルヘッダーを左側の列 上部の行、またはその両方のどれに設定するか、あるいは ヘッダーなしにするかを決める必要もあります テーブルキャプションも追加できます テーブルキャプションは通常、テーブルの上部に表示されますが CSSを使用して、テーブルの下に表示することもできます
