還暦過ぎたエンジニアの挑戦

いくつになっても好奇心だけは忘れないエンジニア Hikaruのブログ

MENU

【シリーズテーブル】3:簡単にスタイルをつける

(この記事は2020-4-26にリメイクしました)

<< 2. テーブル一覧を表示する

前回の記事で、テーブルの一覧を表示するようにしました。

内容は「テーブル名: table name」と「テーブルコメント: table comment」だけにしてあります。
それ以外の情報はここでは不要で、シンプルに見られるようにしておきました。

サンプルの題材にはWordpressのテーブルを使いました。


Wordpressのテーブル一覧


見ていただくとわかるように、テーブル名だけ見て用途のわかりそうなものもありますが、なんだかよくわからないものもあります。
こういう時にテーブルの名前の付け方って重要だなぁ、と思います。

ここで注目したいのは、それぞれのテーブルに「コメントが書かれていない」というところです。
そのテーブルの用途や、使用上注意することなどがちょっと書いてあるだけで、エンジニアとしてはすごく助かると思うんですけどね。

そこで、それならということで、わかりやすくする為に、テーブルコメントを簡単に編集できるようにしておこうと思います。

もちろん、テーブルコメントの修正は、わざわざこんなことをしなくてもちょっとSQL文を書けば出来る*1 ことなのですが、たくさんあると手間も大変ですし、その先の「横着」のためにもここは手をかけて機能を付けておきます。

表にスタイルをつける

まず、次に進む前にこんな感じで簡単にスタイルをつけておきます。

  1. セルの幅を調節する
  2. 見出し行を固定する
  3. アクションのトリガーにするアイコンを追加する
  4. その他の飾りは適当に
2の見出し行は固定表示するようにしておきます。

表が大きくなると、スクロールした時にその列が何の列かわからりずらい事があるからですが、こういうスタイルは習慣付けておきたいものです。
ポイントは<thead><tbody>をちゃんと使うこと。(これを省略してしまうエンジニアは多い) スタイルシートは、それぞれ"display"を"block"にして、tbodyの高さだけ決めてあげれば良いです。。。簡単です。

<table>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

のような構造にしておいて、スタイルシートはこんな感じにしておきました。

thead,tbody {
    display:block;
}
tbody {
    height:(好きな高さ);
    overflow-y:scroll;
}

3のアイコンはマテリアルアイコンを使うことにしておきました。

仕上がりはこんな感じです。


f:id:hikaru217:20200417062410j:plain
簡単にスタイルを付けたところ


なかなかいい感じになってきたかも。。。


4.テーブルコメントを編集する >>