その１

まずはwebページ作成ソフトで表作り

ご自分のソフトでいいから、ここをクリックしたもののようなページを作成し、test13.htmlと名前を付けて保存してくだされ。
一応そこに表があることが分かるように、罫線１、線の色なしで作ってあるぞい。
書いてある内容は適当でいいぞ。
作成ソフトがない人は、メモ帳（テキストエディタ）に、下のhtmlをコピーペーストしてページを作ってくだされ。
表の一番上の行は、見出しセル設定にしてくだされ。
見出しセル設定が分からんお人は、htmlで見て<td></td>のところを<th></th>にしてくだされ。といっても分からんお人は、メモ帳（テキストエディタ）に、下のhtmlをコピーペーストしてページを作ってくだされ。

見出し用セルとはぢゃな、特に指定しなくても、見出しようセルに指定するだけで、中の表示する文字を太字に、表示位置を中央寄せにしてくれるというものぢゃ。
今までの大見出しと小見出しとは違うからの。切り離して考えてくだされ。

<html>

<head>
<title>cssで表のデザイン・テストページ</title>
<link rel="stylesheet" type="text/css" href="style13.css">
</head>

<body>

<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th colspan="2">お話その１</th>
</tr>
<tr>
<td>プロローグ</td>
<td>ある日のことです。あとは読んでのお楽しみ（おい！</td>
</tr>
<tr>
<td>その１</td>
<td>野原でうさぎを見つけたアンは・・・</td>
</tr>
<tr>
<td>その２</td>
<td>穴へおっこちた？</td>
</tr>
</table>
<p>　</p>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th colspan="2">お話その２</th>
</tr>
<tr>
<td>プロローグ</td>
<td>一作はカシキとして漁船に</td>
</tr>
<tr>
<td>その１</td>
<td>いきなり大嵐？</td>
</tr>
<tr>
<td>その２</td>
<td>嵐は去ったものの？</td>
</tr>
</table>

</body>

</html>

cssは先回のを、style13.cssの名前をつけて保存してリンクさせておるぞい。
下のやつぢゃな。

html, body{
scrollbar-3dlight-color: yellow;
scrollbar-hightlight-color: blue;
scrollbar-arrow-color: red;
scrollbar-face-color: white;
scrollbar-shadow-color: gray;
scrollbar-darkshadow-color: black;
scrollbar-track-color: lightblue;
}

body {
background-color: white;
color: black;
margin-left: 5em;
margin-right: 5em;
}

h1 {
text-align: center;
color: white;
background-color: green;
font-size: x-large;
font-family: "HG明朝E";

}

h2 {
color: green;
font-size: large;
clear: both;
}

h2.s-title {
border-color: green;
border-style: solid;
border-width: 1px;
padding-left: 2em;
}

h2.link {
background-color: orange;
font-size: normal;
clear: both;
}

p {
line-height: 1.5em;
}

img {
float: left;
margin-right: 1em;
margin-bottom: 1em;
}

a:link {
color: green;
text-decoration: none;
}

a:visited {
color: red;
}

a:hover {
color: blue;
background-color: yellow;
text-decoration:UNDERLINE OVERLINE;
}

さて、これからちゃ。
表など、というか今までのもそうぢゃが、わざわざスタイルシートで指定せんでも、htmlでやれるぢゃないか！という意見もあるとは思うが、そこは、何度も言っておるように、統一された複数のページをスタイルシートという司令塔によって、いつでも、変更可能になるということぢゃ。
最初の１ページの作成が、スタイルシートと連携をさせないとならんから、面倒に感じるかもしれんが、一旦マスターページを作っておくと便利ぢゃから、がんばるんぢゃぞ！（と、自分にも言い聞かせ・・（笑）

その２

枠線のデザイン

線の色を指定しないと、グレーのなんとも色気のない色になる。
まー、この色も時と場合によってはいいんぢゃが、まずは、線の色を変えてみようかいのぉ。

下の赤い部分をスタイルシートに追加ぢゃ！
追加する場所はどこでもいいが、広い範囲を指定するんで、わしは、bodyの次に入れておくことにしたわい。

html, body{
scrollbar-3dlight-color: yellow;
scrollbar-hightlight-color: blue;
scrollbar-arrow-color: red;
scrollbar-face-color: white;
scrollbar-shadow-color: gray;
scrollbar-darkshadow-color: black;
scrollbar-track-color: lightblue;
}

body {
background-color: white;
color: black;
margin-left: 5em;
margin-right: 5em;
}

table, th, td {
border-style: solid;
border-color: orange;
border-width: 2px;
}

h1 {
text-align: center;
color: white;
background-color: green;
font-size: x-large;
font-family: "HG明朝E";

}

h2 {
color: green;
font-size: large;
clear: both;
}

h2.s-title {
border-color: green;
border-style: solid;
border-width: 1px;
padding-left: 2em;
}

h2.link {
background-color: orange;
font-size: normal;
clear: both;
}

p {
line-height: 1.5em;
}

img {
float: left;
margin-right: 1em;
margin-bottom: 1em;
}

a:link {
color: green;
text-decoration: none;
}

a:visited {
color: red;
}

a:hover {
color: blue;
background-color: yellow;
text-decoration:UNDERLINE OVERLINE;
}

まー、いちいちborderなんたらかんたらと記述せずとも１行で書く方法もある。
●table, th, td { border: 2px solid orange; }
指定内容と指定内容の間は半角スペース、そして、いつものはとですは忘れないようにの。

さて、個々の解説ぢゃ。

table, th, td	←ここで、table、th、tdのタグ３つへの指定ぢゃと宣言しておる。参考までに、表については、html基礎講座第５回を参考にしてくだされ。
border-style	線種
solid	線の種類の一つぢゃな。
border-color	線の色
border-width:	線の太さ

で、ページはこうなっとるかいの？
例のごとくいろいろ変更してどうなるかテストしてみてくだされ。

にこにこ顔の助手
線種の確認はこちらでどうぞ

その３

表全体の指定…背景色と囲み線

さてさてお次ぢゃ！

tableとth, tdのセットを切り離して指定してみたぞい。色と線の太さもよく分かるように変更したぞい。（ｗ

html, body{
scrollbar-3dlight-color: yellow;
scrollbar-hightlight-color: blue;
scrollbar-arrow-color: red;
scrollbar-face-color: white;
scrollbar-shadow-color: gray;
scrollbar-darkshadow-color: black;
scrollbar-track-color: lightblue;
}

body {
background-color: white;
color: black;
margin-left: 5em;
margin-right: 5em;
}

table {
border-color: blue;
border-width: 10px;
background-color: lightyellow;
}

th, td {
border-style: solid;
border-color: orange;
border-width: 2px;
}

h1 {
text-align: center;
color: white;
background-color: green;
font-size: x-large;
font-family: "HG明朝E";

}

h2 {
color: green;
font-size: large;
clear: both;
}

h2.s-title {
border-color: green;
border-style: solid;
border-width: 1px;
padding-left: 2em;
}

h2.link {
background-color: orange;
font-size: normal;
clear: both;
}

p {
line-height: 1.5em;
}

img {
float: left;
margin-right: 1em;
margin-bottom: 1em;
}

a:link {
color: green;
text-decoration: none;
}

a:visited {
color: red;
}

a:hover {
color: blue;
background-color: yellow;
text-decoration:UNDERLINE OVERLINE;
}

こうなるわけぢゃ。
例のごとくいろいろ変更してどうなるかテストしてみてくだされ。

その４

セルに色をつける（背景色）

さてさて、今までもやってきたからもうお分かりぢゃと思うが、背景色を変更するプロパティは、background　ぢゃから、それで指定すればいいだけとはお分かりぢゃろうの。
ぢゃが、せっかく指定したから、表の背景色を有効に使うことにして、見出しセルを強調といくかのぉ。

ということで、th　と　td　タグを分離させて指定してみたぞ。
おお！分離させたんで、線種の指定がなくなってしもうたから、th　の中で指定してみた。
どこをどう変えたかもうお分かりぢゃな？

html, body{
scrollbar-3dlight-color: yellow;
scrollbar-hightlight-color: blue;
scrollbar-arrow-color: red;
scrollbar-face-color: white;
scrollbar-shadow-color: gray;
scrollbar-darkshadow-color: black;
scrollbar-track-color: lightblue;
}

body {
background-color: white;
color: black;
margin-left: 5em;
margin-right: 5em;
}

table {
border-color: blue;
border-width: 10px;
background-color: lightyellow;
}

th {
background-color: yellow;
border-color: green;
border-width: 5px;
}

td {
border-style: solid;
border-color: orange;
border-width: 2px;
}

h1 {
text-align: center;
color: white;
background-color: green;
font-size: x-large;
font-family: "HG明朝E";

}

h2 {
color: green;
font-size: large;
clear: both;
}

h2.s-title {
border-color: green;
border-style: solid;
border-width: 1px;
padding-left: 2em;
}

h2.link {
background-color: orange;
font-size: normal;
clear: both;
}

p {
line-height: 1.5em;
}

img {
float: left;
margin-right: 1em;
margin-bottom: 1em;
}

a:link {
color: green;
text-decoration: none;
}

a:visited {
color: red;
}

a:hover {
color: blue;
background-color: yellow;
text-decoration:UNDERLINE OVERLINE;
}

こうなるわけぢゃ。
例のごとくいろいろ変更してどうなるかテストしてみてくだされ。

しっかしこれもブラウザが違うと表示されない場合があるんでの。
そこのところは承知しておいてくだされ。

テストは、いつものごとく、ＩＥ（インターネットエクスプローラー）でよろしくのぉ。

さて、今回はここまでぢゃ。もう少し表の装飾というか表示方法をやっていきたいと思うのでの。次回も表ぢゃ。
表を自由に使いこなすことができると、ページデザインも変化に富んだものになるぞい。
ブログの仕組みも分かるようになるから頑張って学習してくだされ。