プラグインを使わずにHTMLとCSSでテーブル作成

<この記事は 3分くらい で読むことができます。>

この記事はこんな人に向けに書いています

  • HTMLとCSSで柔軟にテーブルを作成したい方
  • プラグインだと微妙な調整がしにくいと感じている方

読んだ後はこんな状態になっています

  • 柔軟に列・行幅や結合などの調整可能なテーブルが作れます。
  • プラグインだと微妙にやりにくい列・行の結合が簡単にできます。

なぜプラグインではなく直接書くか?

実は元々プラグインを使っていました・・・が、「微妙に使いにくいっ!」「説明読んでもも分かりにくいっ!」「じゃぁ自分で書いちゃおう!」ということで情報をあさって、ある程度個人的に応用が利くレベルまで習得できたと感じましたので、基本的な内容をまとめておこうと思います。

HTML

下記のようなテーブルがコードのコピペで簡単に作れます!

プラン
備考
ベーシック
プレミアム
機能A
対応外
機能B
カスタマイズ
※要相談
費用
1,000円/月
3,000円/月



HTMLのコードはこんな感じ。

CSS

で、重要なのはこっちのCSS。CSSのコードはこんな感じ。

何点か解説します。

  • grid-template-columns: 150px 150px 150px 150px;
  • これは各列の幅を指定します。指定した分の列が作成されるので、必要な列以上のサイズ指定はしないようにしてください。

  • grid-template-rows: px px;
  • 今回のサンプルでは指定していませんが、行の各行の幅を指定します。

  • grid-column: x / x;
  • 行を結合させる場合に指定します。
    例えば、2から4の間のセルを結合したい場合、「grid-column: 2 / 4;」と指定します。数字の指定の考え方は下記の図を参考にしてください。
    思ってる位置で結合されない場合、下記の「grid-row: x / x;」も一緒に指定します。必ずしも結合しなくても良いので、「grid-row: 1 / 2;」といったように明示的に位置を指定することで期待した位置で結合が可能となります。

  • grid-row: x / x;
  • 行を結合させる場合に指定します。
    例えば、3から5の間のセルを結合したい場合、「grid-row: 3 / 5;」と指定します。数字の指定の考え方は下記の図を参考にしてください。
    こちらも同様に思ってる位置で結合されない場合、下記の「grid-column: x / x;」も一緒に指定します。こちらも同じく必ずしも結合しなくても良いので、明示的に位置を指定します。

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    CAPTCHA