Table でよくある表記の縦軸に〇〇横軸に△△という表記の実装方法

Question

お世話になっております。

 品物 ＼　ランク　　並　　　　　上　　　　特上
　おはぎ　　　　　 100        200       300
　ところてん       50         100      1500

との表で
左上の” 品物 ＼　ランク”は

<th><img src="./img/sinamonoRank.png" width="42" alt=""/></th>

と画像でやっていたのですが画像では見た目が悪いのでテキストでデータを持ちたいと思っております。

どのように実装するのが一般的なのか伺ってよろしいでしょうか？

お忙しい所大変申し訳無いのですが上記お問い合わせいたします。

Answer 1

あまり頭のいい方法ではないですがsvg

<style>
table{border-collapse:collapse}
th.topleft{padding:0px;}
th,td{border:1px solid #000000;}
td.r{text-align:right;}
</style>
<table>
<tr>
<th class="topleft">
<svg width="100" height="30">
<polyline points="0 0 100 30" stroke="black" fill="none"/>
<text x="0" y="27">品目</text>
<text x="50" y="14">ランク</text>
</svg>
</th>
<th>並</th>
<th>上</th>
<th>特上</th>
</tr>
<tr>
<td>おはぎ</td>
<td class="r">100</td>
<td class="r">200</td>
<td class="r">300</td>
</tr>
<tr>
<td>ところてん</td>
<td class="r">50</td>
<td class="r">100</td>
<td class="r">1500</td>
</tr>
</table>

※ぎりぎり微調整しました

Comments

[yambejp]

なんか思ったよりきれいに出て、むしろどうしたもんかな・・・という感じ

[moitaro]

ですよねっ
こちらがきれいに出ているのと思っていましたっ

もうちょっとこちらで使用されているタグ調べてみますっ
ありがとうございました。

[moitaro]

http://www.tohoho-web.com/ex/svg.html
svgというタグがあるのですねっ

Answer 2

どのように実装するのが一般的なのか

• 空欄にする
• 品物＼ランクのように文字で書く
• ＼だけ書いておく

斜線を引くだけでも悪戦苦闘しますし、HTMLでそこまでこだわること自体がそうそうありません。

Answer 3

https://qiita.com/sk_3122/items/76117d676686b587d980

・画像で書く
・gradient-lineで書く(IE9以下非対応)
・SVGで書く

いずれにしろ斜線だけなんで、文字入れるとしたら小さくして上下に振ってやる必要も出ますね。
どれも一長一短といったとこでしょうか?
画像でやってる現状の運用になにか問題が出たとしたら、その問題点不満点を解決するための方法論として募集したら具体的な解決案出そうですけども、何かご不満で?

Answer 4

軸の名称が分かれば良いので、軸の交点では無くて
軸の上や左に軸名称を付ければ良いのでは？

htmlとしては単純になりますよ。