テーブルタグのｃｓｓサンプルが沢山あるから使いたいが使い方がわからない

　
本日もお越し頂きありがとうございます
最近の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をどんなやり方でやっているのか

全くわかりませんでした

techacademy.jp

上の記事をよく読んでみるとなんとHTMLの文章内に

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 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で装飾できるようになっておきたいものです

ものくろシティの住人

ものくろに関することと個人的な雑記を書いてます

テーブルタグのｃｓｓサンプルが沢山あるから使いたいが使い方がわからない