はじめに
久々にブログ勉強シリーズです。
今回は表を作りたいと思います。
表があるとなにかと便利ですよね。
文章を箇条書きにして書くよりも表でさっとまとめたほうが見やすいしなによりブログが映えるのかなと思います。
基本的にはこのブログ勉強シリーズは私の忘備録もかねて書いています。
さて、それでは早速始めてみましょう。
表を作ろう
1.htmlの記述
表を作るには下記のタグを使用します。
・＜table＞～＜/table＞ ～の部分が表であることを示します。
・＜th＞～＜/th＞ 見出し用のセルを指定する。
・＜tr＞～＜/tr＞ 表の中に１つの行を指定する。
・＜td＞～＜/td＞ 行の中に1つのセルを指定する。
さて、小難しくなってきました。
一回作ってみましょう。
〇コード
<table>
<tr>
<th>種類</th>
<th>味</th>
<th>色</th>
</tr>
<tr>
<td>りんご</td>
<td>甘酸っぱい</td>
<td>おおむね赤</td>
</tr>
<tr>
<td>なつみかん</td>
<td>かなり酸っぱいと思う</td>
<td>たいてい黄色</td>
</tr>
</table>
| 種類 | 味 | 色 |
|---|---|---|
|
りんご |
甘酸っぱい | おおむね赤 |
| なつみかん | かなり酸っぱいと思う | たいてい黄色 |
おーできましたね。
枠線もつけたいところですね。
枠線は
＜table border=”幅”＞~＜table＞
を付け加えましょう。幅のところは数字を入れます。
例えば
＜table border=”３”＞~＜table＞とさっきのコードに付け加えましょう。
| 種類 | 味 | 色 |
|---|---|---|
| りんご | 甘酸っぱい | おおむね赤 |
| なつみかん | かなり酸っぱいと思う | たいてい黄色 |
できましたね。
だいぶ分かってきました。
さて、次はこの表にCSSコードで装飾していきましょう。
2.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;
}
このコードを先ほどのhtmlの記述に充てていくとこうなります。
| 種類 | 味 | 色 |
|---|---|---|
| りんご | 甘酸っぱい | おおむね赤 |
| なつみかん | かなり酸っぱいと思う | たいてい黄色 |
すごい！！
公開してくれている方々に常に感謝です。
興味のあるかたは調べてみてください。色々あって楽しいですよ。
まとめ
さて今回は表を作ることが出来ました。
なんかますます記事を書くのが楽しくなってきますね。
今後もブログを勉強しながらいい記事をかければと思います。
頑張っていきましょう！！
それでは、この辺で失礼します。
