機能テスト マークダウン風な書き方で簡単なテーブルを書く

Hidekichi

テーブルを書くのって面倒ですよね？

そういうわけで、例えばこういった文章を書いてる途中に

ヘッダ 1ヘッダ 2ヘッダ 3
データ 1-1データ 1-2データ 1-3
データ 2-1データ 2-2データ 2-3
データ 3-1データ 3-2データ 3-3
こんな感じにできます。

<p>そういうわけで、例えばこういった文章を書いてる途中に<tb>
  | ヘッダ 1 | ヘッダ 2 | ヘッダ 3 |
  |---------:|:--------:|:---------|
  |データ 1-1|データ 1-2|データ 1-3|
  |データ 2-1|データ 2-2|データ 2-3|
  |データ 3-1|データ 3-2|データ 3-3|</tb>こんな感じにできます。</p>

これは上記のように書いてあります。wikiであったりmarkdownであるような書き方です。ただしセルを合成するcolspan、rowspanを使うような複雑なテーブルはできません。
文章を書いてる時にいちいち<table>等を書くのは面倒だろうと言うことで実装しました。ただhtmlで書く感じになるのでいうほど面倒臭さは変わりません。

文字寄せ

subject1Data 1-1Data 1-2
subject2Data 2-1Data 2-2
subject1Data 3-1Data 3-2
 
<tb>
  |----:|:--------:|---------|
  |subject1| Data 1-1 | Data 1-2 |
  |;subject2| Data 2-1 | Data 2-2 |
  |subject1| Data 3-1 | Data 3-2 |</tb>
  1. :--- 左寄せ
  2. :---: 中央寄せ
  3. ---: 右寄せ

このような感じに、:と、3つ以上の-の組み合わせで設定できます。これら文字寄せ設定行は一応どこでもできるように書いてありますが0行目か1行目かで表示が異なります。
そもそも0行目とか言い方がややこしいですが、左右寄せの設定行などがあるので本来の行の外になることもあるため、敢えて0から数え始めてます。
0行目に文字寄せ設定を入れた場合はそれ以降の行は全てtdで表示されます。
1行目に文字寄せ設定を入れた場合は0行目のセルがth、それ以外がtdになります。上記見出し下の例は0行目に文字寄せ設定を入れた例です。
1行目に文字寄せ設定を入れた場合は以下のようになります。

header1header2
subject1Data 1-1Data 1-2
subject2Data 2-1;Data 2-2
subject3Data 3-1Data 3-2
 
<tb>
	||header1|header2|
	||--------:|---------:|
	|subject1| Data 1-1 | Data 1-2 |
	|subject2| Data 2-1 | ;Data 2-2 |
	|subject3| Data 3-1 | Data 3-2 |</tb>

こういった仕様から以下のように横向きのデータのテーブルも途中の行に文字寄せ設定を入れる事もできますが、これら文字寄せは、

#mb00n tr td:nth-of-type(1) {
	text-align: right;
}

このような感じに、trのtdに対してスタイルしているので、列ごとでの設定に書き出されます。1列目は右寄せ、2列めは中央寄せのような感じです。なので必ず設定行は複数行ではなくどこかに1行だけ記述するようにして下さい。

subject1Data 1-1Data 1-2data 1-3data 1-4data 1-5
subject2Data 2-1Data 2-2data 2-3data 2-4data 2-5
subject3Data 3-1Data 3-2data 3-3data 3-4data 3-5
 
<tb>
	|subject1| Data 1-1 | Data 1-2 | data 1-3 | data 1-4 | data 1-5 |
	|subject2| Data 2-1 | Data 2-2 | data 2-3 | data 2-4 | data 2-5 |
	||:---:|:---:|---:|:---|---:|
	|subject3| Data 3-1 | Data 3-2 | data 3-3 | data 3-4 | data 3-5 ||</tb>

また最初の列だけ、テキストの先頭に;を入れるとthになります。最初の列以外の;は文字として扱われるのでボールド等の変換は行われません。

subject1Data 1-1Data 1-2data 1-3data 1-4data 1-5
subject2Data 2-1Data 2-2data 2-3data 2-4data 2-5
subject3Data 3-1Data 3-2data 3-3data 3-4data 3-5
 
<tb>
	|;subject1| Data 1-1 | Data 1-2 | data 1-3 | data 1-4 | data 1-5 |
	|;subject2| Data 2-1 | Data 2-2 | data 2-3 | data 2-4 | data 2-5 |
	||:---:|:---:|---:|:---|---:|
	|;subject3| Data 3-1 | Data 3-2 | data 3-3 | data 3-4 | data 3-5 ||</tb>

たまたまですがテーブルの外に要素があるので狭い画面ではスクロールバーが出ます

見出しのまんまですが、テーブルに変換されるのは<tb>の中のテキストなので、この仕組みではテーブルタグの親タグが<tb>となってcssでオーバーフローした部分((はみ出た部分))があった場合はスクロールするようになっています。

0 コメント

コメント