初学者向けプログラミング学習環境 PEN 開発メモWiki

授業資料/2015年度/京都ノートルダム女子大学/情報処理G/第12回目/練習9

CSSによる装飾

  • 属性(テキスト P.133-154)

編集するファイル

  • ファイル名
    • table.html
    • 上記のファイルを開き編集

スタイル定義

このコードを<head>〜〜</head>の間に記述してください。

<style>
table {
  width: auto;
  border: 3px solid #B0C4DE;
  border-collapse: collapse;
  border-spacing: 0;
}
table caption{
  color: #4682B4;
  line-height: 200%;
}
th {
  color: #FFFFFF;
  padding: 5px;
  border: 1px solid #B0C4DE;
  background: #4682B4;
  font-weight: bold;
  line-height: 150%;
  text-align: center;
}
td {
  padding: 5px;
  border: 1px solid #B0C4DE;
}
tr:nth-child(2n+1) {
  background: #F0FFFF;
}
</style>

練習課題

テーブルタグを好きな色で装飾してください。

作成例

授業資料/2015年度/京都ノートルダム女子大学/情報処理G/第12回目/練習9/Cherry Trees.png

Menu

Wikiについて

最近の更新