テーブルレイアウト

簡単にリストなどが作れる
主に表組みを作るときに使用する

テーブルのデザイン要素

4-2

テーブルの挿入

新規ファイルを開く
→ テーブルを挿入したい箇所にカーソルを合わせる
→ メニューバーの挿入、 テーブル
→ 行と列を確認してok

専門用語 キャプション…テーブルのタイトル
専門用語 サマリー…テーブルの説明文、グラフ内容をなるべく詳しく記入

 行、列の追加

挿入したい箇所後ろのセルにカーソルを置き、右クリック
→ テーブル
→ 列の追加もしくは行の追加をクリック
→ 挿入されました

文字の入力

文字を入力したいセルを選び入力

イメージの挿入

挿入したいセルにカーソルを置く
→ イメージフォルダから画像をドラッグする

テーブルをcssでデザインする

タグ同様、テーブルもスタイルシートを使ってデザインしていきます。

cssでテーブルをデザイン

新規ファイルに以下のソースを張り付ける

前回までと同様、タグを選択して新規CSSルール、ルールを定義していく

<table> 幅…530PX
ボーダー…全て同一、実線、1PX、#E3E3E3
<th> ウェイト…太字
背景色…#F5F5F5
テキストの行揃え…中央
余白5PX
ボーダー…下、左、各実線、1PX、#E3E3E3
<td> テキストの行揃え…中央
余白…5PX
ボーダー…下、左、各実線、1PX、#E3E3E3

 cssでテーブルをおしゃれにデザイン

ボーダーを片側にだけ入れたりなどしてデザイン性を高めることが出来ます

新規ファイルソースコードに以下を張り付ける

<table> 幅…80%
ボーダー…全て同一、ドット、1PX、#999999
<th> 文字色…#666666
背景色…#EEEEEE
テキストの行揃え…左
余白…全て同一、4PX
ボーダー…下、ドット、1PX、#999999。左、実線、5PX、#FF9900
<td> 余白…全て同一、4PX
ボーダー…下、ドット、1PX、#999999。左、二重線、3PX、#CCCCCC
テーブルを使ってeggのグラフィックコース料金表ryoukin.htmlをつくろう!
見ていただいてありがとうございます。↓ポチしてくださいませ。
  • 見た (0)
  • もう少し詳しく書いて! (0)
  • 見たけど役立たず (0)