猫と遊ぶ　見習いプログラマーの備忘録

日々の学んだ事を随時更新。主にプログラム。その他いろいろ

tableタグであそんでみる

CSS HTML

昨日、tableタグを使った時の表枠は二本線（ボーダー）での表記だった。
今回は、その表枠の表示を変えてみる。

その一、　ドットにしてみる。

f:id:msm20-chocolateee:20180731140015p:plain

　枠線をドットにするCSSの書き方

table,
    td,
    th {
      border: 2px dotted silver;
    }

　－－＞色指定の直前に、dottedを入れる

その二、　点線にしてみる。

f:id:msm20-chocolateee:20180731140657p:plain

　枠線を点線にするCSSの書き方

table,
    td,
    th {
      border: 2px dashed silver;
    }

　－－＞色指定の直前に、dashedを入れる

その三、　枠線を繋げてみる。

f:id:msm20-chocolateee:20180731144730p:plain

　枠線を繋げるCSSの書き方

table,
    td,
    th {
      border: 2px solid silver;
      border-collapse: collapse;
    }

　－－＞色指定の直前に、solidを入れ、
　　　　border-collapse: collapse;を入れる（これは決まったかたち）


あと、こういう書き方もあるお💡
（個人的にドットが一番キラキラ感がある気がする。目の錯覚かな笑）
f:id:msm20-chocolateee:20180731152740p:plain

表の一番上に、大きなくくり（見出し）を書くバージョン。
表の6人の所属グループは、King&Princeなので、そのくくりに入れる。
tableタグの直下に、以下のコードを書く。

    <tr>
      <th colspan="3">King&Prince</th>
    </tr>

で、colspanというのがよくわからないけれど、
値に数字を指定してあげれば、その数字分のスペースに見出しを書くよ、って指定できるみたい。
　……あとで調べたところ、colspanというのは、水平方向のセル　（行）を結合する属性であった。
　逆に、縦方向のセルを結合する属性は、rowspanであった。

ということなので、縦方向もやってみた。
f:id:msm20-chocolateee:20180731160648p:plain

おお、できてる～♪
こういう書き方もできるのね。
以下、rowspanの書き方（一部抜粋）　↓

    <tr>
      <th rowspan="8">King&Prince</th>
    </tr>

スパンの数字、7だと思った人ー　（はーい✋笑）
行が7行あるから、7に合わせるのかなと思ったら、ちゃうねん。
7にしたら、髙橋海人くんがズレて大変なことになったんや。
んで、8を指定したら、できたんよ。
思うてるのより+1にするのね。
そして書き方は、colspanと同様に、tableタグの直下に書けばOK！


プラスアルファ

最上部に新たに追加　↓

f:id:msm20-chocolateee:20180731155346p:plain
＜summary属性＞
　…表の目的、構造について記述する。tableタグ内で使用。
　　ブラウザには表示されない。
＜caption属性＞
　…表組みの説明。tableタグ内で使用。ブラウザに表示される。
　【使用例（一部抜粋）】

　<body>
  <table summary="tableタグの練習">
    <caption>King&Prince メンバーカラー</caption>
    <tr>
      <th colspan="3">King&Prince</th>
    </tr>
    <tr>

さすがにKing&Princeの文字２回も表記されると重複していやね(笑)
なので、実用する時は言葉を考えましょー。
まあこちら必須ではないので、summary属性とcaption属性は覚えておく程度でOK