SE学院

Tableの使い方

Table

Pure.cssはNormalize.cssを基として構築されている。tableタグに何もクラスを指定しない場合は、Normalize.cssによってノーマライズされたテーブルとなる。

<table>
クラス説明
なし ノーマライズされたテーブル
pure-table テーブルの基本クラス(縦の枠線のみ)
クラス説明

pure-table

pure-tableはPure.cssにおけるテーブルの基本クラスである。

<table class="pure-table">
クラス説明
pure-table テーブルの基本クラス(縦の枠線のみ)
pure-table-bordered 横の枠線もあるテーブル
クラス説明

Pure.cssでは、tfoot要素に対して装飾を行わない。

pure-table-bordered

pure-table-borderedは縦と横の罫線を持つテーブルの装飾クラスである。pure-tableクラスと共に指定する。

<table class="pure-table pure-table-bordered">
クラス説明
pure-table テーブルの基本クラス(縦の枠線のみ)
pure-table-bordered 横の枠線もあるテーブル
クラス説明

pure-table-horizontal

pure-table-horizontalは横の罫線のみを持つテーブルの装飾クラスである。pure-tableクラスと共に指定する。

<table class="pure-table pure-table-horizontal">
クラス説明
pure-table テーブルの基本クラス(縦の枠線のみ)
pure-table-horizontal 横の枠線のみのテーブル
クラス説明

pure-table-odd

trタグにpure-table-oddクラスを指定すると、その行の色がグレーに変わる。

<table class="pure-table">
  <tbody>
    <tr class="pure-table-odd">
クラス説明
なし ノーマライズされたテーブル
pure-table テーブルの基本クラス(縦の枠線のみ)
pure-table-bordered 横の枠線もあるテーブル
pure-table-horizontal 横の枠線のみのテーブル
pure-table-odd 行に色をつける
クラス説明

Bulmaではtableタグにクラスを指定するだけで1行おきに色を変えられるのに対して、Pure.cssは色を変えたい各行のtrタグにそれぞれクラスを指定する必要がある。