本日もお越し頂きありがとうございます
最近のHTML関係のサイトは親切で大変ありがたい事です
テーブルタグの使い方にCSSのサンプルその他
ブログに関するパーツがあらゆるところで簡単に手に入ります
しかも
「コピーしてご自由につかってください」
自分で試行錯誤しながらデザインしていたあのころと比べると
この一言は「私に全て任せなさい」と言われているのと同じくらい助かります
今日もカッコイイパーツを探してあっちこっちを見て回ってます
最近テーブルタグとCSSがセットになったサイトを見つけて使わせてもらってるのですが
どーしても上手くいかないことが１つありました
テーブルタグにCSSを組み込む方法です
htmlとCSSのコードが書いてあって両方コピーして使うことはわかってるんですがCSSをどこにどうやって入れるのかをわからなかったんですよね単純にコピペしても下のようになってしまうんですよね
table{
width: 100%;
border-collapse:separate;
border-spacing: 0;
}
table th:first-child{
border-radius: 5px 0 0 0;
}
table th:last-child{
border-radius: 0 5px 0 0;
border-right: 1px solid #3c6690;
}
table th{
text-align: center;
color:white;
background: linear-gradient(#829ebc,#225588);
border-left: 1px solid #3c6690;
border-top: 1px solid #3c6690;
border-bottom: 1px solid #3c6690;
box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
width: 25%;
padding: 10px 0;
}
table td{
text-align: center;
border-left: 1px solid #a8b7c5;
border-bottom: 1px solid #a8b7c5;
border-top:none;
box-shadow: 0px -3px 5px 1px #eee inset;
width: 25%;
padding: 10px 0;
}
table td:last-child{
border-right: 1px solid #a8b7c5;
}
table tr:last-child td:first-child {
border-radius: 0 0 0 5px;
}
table tr:last-child td:last-child {
border-radius: 0 0 5px 0;
}
サンプルその１
| 都道府県 | 面積 | 人口 | 人口密度 |
|---|---|---|---|
| 愛知県 | 5,172km2 | 7,526,911人 | 1,455人/km2 |
| 東京都 | 2,193km2 | 13,742,906人 | 6,263人/km2 |
| 大阪府 | 1,905km2 | 8,831,642人 | 4,635人/km2 |
CSSを使うやり方はCSS用ファイルを作ってHTML用のファイルと
別にアップするやり方しか知らなかったんですよ
外付けってやり方ですかね
もう２０数年前に覚えたやり方ですから今ではCSSをどんなやり方でやっているのか
全くわかりませんでした
上の記事をよく読んでみるとなんとHTMLの文章内に
CSSを組み込むやり方があったなんて知りませんでしたよー まさに驚きです
<style> ← たったこれだけです
table{
width: 100%;
border-collapse:separate;
border-spacing: 0;
}
table th:first-child{
border-radius: 5px 0 0 0;
}
table th:last-child{
border-radius: 0 5px 0 0;
border-right: 1px solid #3c6690;
}
table th{
text-align: center;
color:white;
background: linear-gradient(#829ebc,#225588);
border-left: 1px solid #3c6690;
border-top: 1px solid #3c6690;
border-bottom: 1px solid #3c6690;
box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
width: 25%;
padding: 10px 0;
}
table td{
text-align: center;
border-left: 1px solid #a8b7c5;
border-bottom: 1px solid #a8b7c5;
border-top:none;
box-shadow: 0px -3px 5px 1px #eee inset;
width: 25%;
padding: 10px 0;
}
table td:last-child{
border-right: 1px solid #a8b7c5;
}
table tr:last-child td:first-child {
border-radius: 0 0 0 5px;
}
table tr:last-child td:last-child {
border-radius: 0 0 5px 0;
}
</style>
ココで<style>で修正したCSSを使ったサンプルその１をアップしたいのですが
勉強不足でサンプルその１までCSSで装飾されたものになってしまうんですよね
今年中には複数のテーブルを別々のCSSで装飾できるようになっておきたいものです
