【 Table 】

Table

markdown で書いた表を多少アレンジする方法を考えます。多少ですけどね。実際セル単位で何かいじるのはムリです。セルを縦横つなぐとかムリです。kramdown 自体を拡張しないと。 markdown 自体で文字揃えを変えたりできるので表現力は増すと思います。

基本形

まずは markdown の表(table)の書き方をおさらい。とりあえずヘッダー付きで。

[markdown]

| Column 1      | Column 2      | Column 3      |
| :-----------: | :-----------: | :-----------: |
| Cell Contents | Cell Contents | Cell Contents |
| You Can Also  | You Can Also  | You Can Also  |
| Cell Contents | Cell Contents | Cell Contents |
| You Can Also  | You Can Also  | You Can Also  |

フッターも付けるとこういう書き方。めんどくさいです。Vscodeだと専用のプラグインあるみたいなので、そういうの使うと多少は楽でしょう。

[markdown]

| Column 1      | Column 2      | Column 3      |
| :------------ | :-----------: | ------------: |
| Cell Contents | Cell Contents | Cell Contents |
| You Can Also  | You Can Also  | You Can Also  |
| Cell Contents | Cell Contents | Cell Contents |
| You Can Also  | You Can Also  | You Can Also  |
| ============= | ============= | ============= |
| Footer        | Footer        | Footer        |

列の中の文字寄せは２行目の書き方

• | :------------ | 左寄せ
• | :-----------: | 中央揃え
• | ------------: | 右寄せ

デフォルトのCSSと変数

で、例によって_sass/framework-modules/に_table-styles.scssを作り、素のテーブル(デフォルト)のSCSSを決めます。

[_table-styles.scss]

// table initial value
table {
  margin: 1.5em 0;
  border-spacing: 0;
  border-collapse: collapse;
  table-layout: auto;
  font-size: .875rem;
  color: $default-table-font-color;
  background: $default-table-background-color;
  th, td {
    @extend %table-border-base;
    padding: $default-table-padding; 
  }
  thead th {
    @extend %table-header-border-base;
    border-width: $default-table-header-border-width;
    color: $default-table-header-font-color;
    font-weight: bold;
  }
  tbody {
    td {
      border-width: $default-table-cell-border-width;
    }
    tr:last-child td, tr:last-child th {
      border-bottom-width: 0;
    }
  }
  tfoot {
    td {
      border-width: $default-table-foot-border-width;
      border-color: $default-table-foot-border-color;
    }
  }
}

この中で使っている変数のリストが以下。これでも一部です。色の変数名は前に作った_color-palette.scssで定義されているもの。デフォルト値の色はほとんどモノクロ系です。後で表の部分部分の色変更をしますが、$light-gray3とかの独自定義のグレー以外は基本WEB140色の名前なので、色名知ってればわかります。

// Table default value
// font color
$default-table-font-color: $dark-gray1;
$default-table-header-font-color: $dark-gray3;
// border
$default-table-border-width: 1px;
$default-table-border-style: solid;
$default-table-border-color: $light-gray3;
$default-table-header-border-width: 0 0 2px;
$default-table-header-border-color: $light-gray4;
$default-table-cell-border-width: 0 0 1px;
$default-table-foot-border-width: 2px 0 0;
$default-table-foot-border-color: $light-gray4;
$default-table-outside-border-color: $light-gray4;
// background
$default-table-background-color: $white;
$default-table-hover-background-color: $azure;
// padding
$default-table-padding: 0.5em 0.75em;

$default-table-border: 1px solid $default-table-border-color;
$default-table-outside-border: 1.0px solid $default-table-outside-border-color;

// Border settings Inheritance source
%table-border-base {
  border-width: $default-table-border-width;
  border-style: $default-table-border-style;
  border-color: $default-table-border-color;
}

%table-header-border-base {
  border-width: $default-table-header-border-width;
  border-style: $default-table-border-style;
  border-color: $default-table-header-border-color;
}

無駄といっていいくらい変数など多用してます。これでとりあえず表の見た目デフォルトがこんな感じになります。

[一番シンプルな形]

[フッター付き]

縦の罫はないタイプ。地味です。

さて Bulma のテーブルのアレンジ方法を真似しつつ、また markdown でCSSクラス名を渡す方法で、この基本形の上に６種類のバリエーションを考えます。

bordered

まずはAdd borders to all the cells. 全て罫入りのオーソドックスな表。Bulma のクラス名はtable is-borderedですが、ルール単純化して.borderedにします。

[markdown]

| Column 1       | Column 2      | Column 3      |
| :------------: | :-----------: | :-----------: |
| Cell Contents  | Cell Contents | Cell Contents |
| You Can Also   | You Can Also  | You Can Also  |
| Cell Contents  | Cell Contents | Cell Contents |
| You Can Also   | You Can Also  | You Can Also  |
{: .bordered}

最後にくっついている{: .bordered}がテーブルの種類をアレンジするクラス名を kramdown に渡している部分。

SCSS はベースになるCSSとの差分だけ記述していくので単純です。

[scss]

// full bordered table
table.bordered {
  border: $default-table-outside-border;
  th {
    @extend %table-header-border-base;
    border-width: $default-table-border-width;
  }
  td {
    @extend %table-border-base;
    border: $default-table-border;
  }
}

striped

偶数番目の行のバックに薄く色がついているやつ。クラス名渡しの部分だけ載せていきます。

{: .striped}

[scss]

table.striped {
  tbody tr:nth-child(even) { background-color:  $light-gray1; }
}

striped-odd

奇数番目の行のバックに薄く色がついているやつ。.stripedの標準は偶数行、クラス名を.striped-oddとすると奇数行に色を付ける。

{: .striped-odd}

[scss]

table.striped-odd {
  tbody tr:nth-child(odd) { background-color:  $light-gray1; }
}

narrow

行の高さが狭いやつ。

{: .narrow}

[scss]

table.narrow {
  th, td { padding: 0.3em 0.5em; }
}

hoverable

マウスを行に重ねるとバックに色がつく。

{: .hoverable}

[scss]

table.hoverable {
  th { background: transparent; }
  tbody tr:hover { background-color: $default-table-hover-background-color; }
}

fullwidth

width: 100%で横幅いっぱいになるやつ。

{: .fullwidth}

[scss]

table.fullwidth { width: 100%; }

Markdown上でテーブルのカスタマイズ

CSSカスタムプロパティ (CSS custom properties for cascading variables)。CSS変数とも呼ばれてるあれで、表を若干ですがカスタマイズできるようにしてみます。変数名とバリエーションは、まんま Bulma を参考にしました。

font の色変更

表全体の文字色を変える

--fcolor:色指定で表全体の文字色を変えます。クラス名渡しの部分だけ載せていきます。

{: .fcolor style="--fcolor:#008000"}

{: style="color:#008000;"}と書いてもヘッダーの文字色以外は変わるのですが、もっと複雑なこともやりたいとなると生のスタイル指定を末尾に書くのは困難でしょう。

このあと出てくるのは全て.class-nameというクラス名が指定されているtableを検知して、--class-nameという名前のCSS変数からその変数値をCSSに適用するやり方です。

最初CSSの属性セレクターを使って作っていったのですが、それだと複数の設定（文字色とバックの色を組み合わせるとか）が反映されない。属性セレクターでは複数の設定値は、最後に書いたもので上書きされてしまう（つまり最後の設定以外は検知されていない）

これ、よく考えてみれば当たり前ですね。私の知恵が足りませんでした（笑）。

で、結局クラス名で検知させる方法にしました。.fcolorと書いて、そのクラス名の前に”--“ハイフン２つ付けたCSSカスタム変数と値を書く(style="--fcolor:xxxxxx")のでめんどうですが妥協です。

[scss]

table.fcolor { 
  color: var(--fcolor, var(--tbl-color));
  thead th { color: var(--fcolor, var(--tbl-color)) }
}

2番目の引数に代替値としてデフォルトの設定--tbl-colorの値が割り当てられます。デフォルトの文字色の濃いグレーになります。

{: style="--fcolor:"}として単に値を指定しないとデフォルトが選ばれるだけですが、デフォルト値を変えれば他の色にもなります。ここでは16進数2桁のカラーコードで指定しましたが、色名が公式に決まっているものなら{: style="--fcolor:lightblue"}などとも書けます。

テーブル・ヘッダーの文字色はデフォルトの設定が勝つのでthead thも指定しないと変わりません。ここらあたりはtbodyだけでいいよという好みもありますが、仕様ということで。

他にもいくつかCSS変数を定義しましたが、細かい説明は省略します。カスタムプロパティの名前と変更された外観で分かると思います。

表ヘッダーの文字色を変える

--thead-fcolorで表のヘッダーの文字だけ変えます。

{: .thead-fcolor style="--thead-fcolor:maroon"}

表フッターの文字色を変える

--tfoot-fcolor

{: .tfoot-fcolor style="--tfoot-fcolor:lime"}

backgroundの色変更

表の背景色を変える

--tbl-bgd

{: .tbl-bgd style="--tbl-bgd:azure"}

ヘッダーの背景色を変える

--thead-bgd

{: .thead-bgd style="--thead-bgd:aquamarine"}

表のボディーの背景色を変える

--tbody-bgd

{: .tbody-bgd style="--tbody-bgd:palegoldenrod"}

表のフッターの背景色を変える

--tfoot-bgd

{: .tfoot-bgd style="--tfoot-bgd:wheat"}

偶数番目の行のバックの色を変える

これはstripedクラスを指定した表に有効です。

--row-even-bgd

{: .striped .row-even-bgd style="--row-even-bgd:lavender"}

奇数番目の行のバックの色を変える

これはstriped-oddクラスを指定した表に有効です。

--row-odd-bgd

{: .striped-odd .row-odd-bgd style="--row-odd-bgd:honeydew"}

表のボーダーの変更

全体のボーダーの太さ、スタイル、色を一括変更する

CSSのボーダー属性の一括指定と同じくborder: width style colorの形で値を渡すタイプの変数

--tbl-bdr

{: .tbl-bdr style="--tbl-bdr: 3px dotted chocolate"}

表のボーダーの太さ変更

表のボーダーの太さを変える

border-width: 1px 1px 1pxなどの形で値を与えるタイプ。

--bdr-width

{: .bdr-width style="--bdr-width: 0 4px"}

表ヘッダーのボーダーの太さを変える

--thead-bdr-width

{: .thead-bdr-width style="--thead-bdr-width: 8px 0 6px"}

表フッターのボーダーの太さを変える

--tfoot-bdr-width

{: .tfoot-bdr-width style="--tfoot-bdr-width: 4px 0 6px"}

ボーダーの色を変える

ボーダーの色を変える設定を３種。 わかりやすいように.borderedクラスも渡しています。

表全体のボーダーの色を変える

--tbl-bdr-color

{: .bordered .tbl-bdr-color}
{: style="--tbl-bdr-color: deepskyblue"}

クラスを渡す設定の文字数が、あとでだんだんと長くなってくるので、こんな２行以上に分けて書くやりかたも試します。

表ヘッダーのボーダーの色を変える

ヘッダー行のボーダーの太さを変える--thead-bdr-widthと併用してみました。

--thead-bdr-color

{: .bordered .thead-bdr-width .thead-bdr-color}
{: style="--thead-bdr-width: 3px 1px 2px; --thead-bdr-color: magenta;"}

フッターのボーダー色を変える場合も同じですが、外枠がある場合はヘッダーの縦ボーダーの太さを外枠の太さ以上にしないと、色を付けた行の左右枠が埋もれてしまいます。.borderedなどでのデフォルト設定では1pxなので、外枠の太さを1pxより太くしていなければ、表示するには1px以上でOKです。

表フッターのボーダーの色を変える

--tfoot-bdr-color

{: .bordered .tfoot-bdr-width .tfoot-bdr-color}
{: style="--tfoot-bdr-width: 2px 2px 4px; --tfoot-bdr-color: orangered;"}

ボーダーのスタイルを変える

ボーダーのスタイルを変える設定も３種。 わかりやすいように適宜.borderedクラス、ボーダーの色や太さを変える設定など併用します。

表全体のボーダーのスタイルを変える

--tbl-bdr-style

{: .bordered .bdr-width .tbl-bdr-color .tbl-bdr-style}
{: style="--bdr-width:6px 2px; --tbl-bdr-color:blue; --tbl-bdr-style: double dashed;"}

表ヘッダーのボーダーのスタイルを変える

ヘッダー行のボーダーの太さを変える--thead-bdr-widthなどと併用してみました。

--thead-bdr-style

{: .bordered .thead-bdr-width .thead-bdr-color .thead-bdr-style}
{: style="--thead-bdr-width: 12px 0 6px; --thead-bdr-color:lime; --thead-bdr-style: double;"}

表フッターのボーダーのスタイルを変える

--tfoot-bdr-style

{: .bordered .tfoot-bdr-width .tfoot-bdr-color .tfoot-bdr-style}
{: style="--tfoot-bdr-width: 8px 0 15px; --tfoot-bdr-color:lightsteelblue; --tfoot-bdr-style: groove;"}

active, hover

基本的にヘッダーとフッターは除いて tbody の要素に作用します。

アクティブな行の文字色を変える

クリックしてからマウスを離すまで、その行の文字色が変わります。

--row-active-fcolor

{: .row-active-fcolor style="--row-active-fcolor: red"}

アクティブな行の文字を太くする

クリックしてからマウスを離すまで、その行の文字がボールドに変わります。

.active-bold

これは文字を太くするだけなのでクラス名だけの指定です。--row-active-fcolorと併用してみます。

{: .active-bold .row-active-fcolor style="--row-active-fcolor: red"}

マウスを行に重ねた時の文字の色を変える

マウスを重ねた時の行の文字を変えます。--row-hover-bgdと併用してみます。

--row-hover-fcolor

{: .row-hover-fcolor .row-hover-bgd}
{: style="--row-hover-fcolor: firebrick; --row-hover-bgd: gold;"}

マウスを行に重ねた時の文字を太くする

マウスを重ねた時の行の文字をボールドにします

.hover-bold

これもクラス名だけの指定です。.row-hover-fcolor,--row-hover-bgdと併用してみます。

{: .hover-bold .row-hover-fcolor .row-hover-bgd}
{: style="--row-hover-fcolor: firebrick; --row-hover-bgd: gold;"}

アクティブな行の背景色を変える

クリックしてからマウスを離すまで、その行の背景色が変わります。

--row-active-bgd

{: .row-active-bgd style="--row-active-bgd: mistyrose"}

マウスを行に重ねた時の背景色を変える

マウスを重ねた時の行の色を、指示した色に変更します

--row-hover-bgd

{: .row-hover-bgd style="--row-hover-bgd: palegreen"}

偶数番目の行にマウスを重ねた時の背景色を変える

stripedクラスで偶数番目の行にだけ色を付けた表で、その行にマウスを重ねた時のバックの色を変えます。

--row-even-hover-bgd

{: .striped .row-even-hover-bgd style="--row-even-hover-bgd: pink"}

奇数番目の行にマウスを重ねた時の背景色を変える

striped-oddクラスで奇数番目の行にだけ色を付けた表で、その行にマウスを重ねた時のバックの色を変えます。

--row-odd-hover-bgd

{: .striped-odd .row-odd-hover-bgd style="--row-odd-hover-bgd: gold"}

padding を変更する

表全体の padding を変える

行のpaddingの数値を変えることで、行の幅と高さを変更します。$default-table-paddingの値は 上下 +0.5em、左右 +0.75em なので、渡す値がそれより大きいか小さいかで変化します。

--tbl-padding

padding: 0.8rem 1.2remの例

{: .tbl-padding style="--tbl-padding: 0.8rem 1.2rem"}

なおスマートフォンで見た場合、特に縦長で見るときは横サイズが調整されるので、変化がわかりにくいかもしれません。横長で見ると違いが分かるはずです。

表ヘッダーの padding を変える

表ヘッダーの幅と高さを変更します。デフォルトは$default-table-paddingの値。変化が分かりにくいので.borderedクラスも渡しています。

--thead-padding

padding-top: 1.0rem, padding-bottom: 0.8remの例

{: .bordered .thead-padding}
{: style="--thead-padding: 1.0rem 0 0.8rem"}

当然ですが、左右は他の行の padding があるので０に設定しても０にはなりません。

表ボディの padding を変える

表ボディの幅と高さを変更します。

--tbody-padding

padding: 0.2rem 2.0remで細く横長に。thead,tbody,tfootどこかの幅を変えれば当然他の行の幅も追随します。

{: .bordered .tbody-padding}
{: style="--tbody-padding: 0.2rem 2.0rem"}

padding を強制的に変えてしまうので、スマートフォンでは横にはみ出ているはずです。

表フッターの padding を変える

表フッターの幅と高さを変更します。

--tfoot-padding

padding: 0.2px 1.8remで細いフッターに。

{: .bordered .tfoot-padding style="--tfoot-padding: 0.2px 1.8rem"}

いろいろ組み合わせた例

いろんな設定を組み合わせたサンプル。何を使ったかは下の markdown を見て下さい。 かなりやり過ぎ感満載ですが、markdown から表の中のパーツを装飾できるのは面白いです。

[markdown]

| Column 1       | Column 2      | Column 3      |
| :------------: | :-----------: | :-----------: |
| Cell Contents  | Cell Contents | Cell Contents |
| You Can Also   | You Can Also  | You Can Also  |
| Cell Contents  | Cell Contents | Cell Contents |
| You Can Also   | You Can Also  | You Can Also  |
| ============== | ============= | ============= |
| Footer         | Footer        | Footer        |
{: .fullwidth .striped .bordered 
 .tbody-bgd .bdr-width .tbl-bdr-color .tbl-bdr-style
 .thead-fcolor .thead-bgd .thead-padding .thead-bdr-width .thead-bdr-color
 .tfoot-fcolor .tfoot-bgd .tfoot-padding .tfoot-bdr-width .tfoot-bdr-color
 .row-even-bgd .hover-bold .row-hover-fcolor .row-hover-bgd}
{: style="--tbody-bgd: lightcyan; --bdr-width: 1px;
          --tbl-bdr-color: silver; --tbl-bdr-style: solid dashed;
          --thead-fcolor: white; --thead-bgd: darkcyan; 
          --thead-padding: 1.5rem 0; --thead-bdr-width: 10px 0 5px;
          --thead-bdr-color: darkblue;
          --tfoot-fcolor: lightyellow; --tfoot-bgd: seagreen;
          --tfoot-padding: 2.5px 0; --tfoot-bdr-width: 5px 0;
          --tfoot-bdr-color: darkblue;
          --row-even-bgd: lavender;
          --row-hover-fcolor: deeppink; --row-hover-bgd: lavenderblush; "}