html表の書き方について

###前提・実現したいこと
htmlで表を表示する場合の書き方について教えてください。

###発生している問題・エラーメッセージ
htmlで表を記載する際に同一カラム内で
以下のような要件がある場合にどのように記載（タグ・cssを使う）するのが適切なのか教えてください。

１、金額等数字のみ文字を大きく表示、単位（円）は小さく表示し、カラムの右寄せ表示にしたい
２、カラム内で列挙している一部情報の文字色を変更したい備考の「産地：中国」の箇所

###該当のソースコード

html
1<html>
2<head>
3<style type="text/css">
4table{
5width: 100%;
6border-collapse: collapse;
7}
8table th{
9width: 25%;
10padding: 6px;
11text-align: left;
12vertical-align: top;
13color: #333;
14background-color: #eee;
15border: 1px solid #b9b9b9;
16}
17table td{
18padding: 6px;
19background-color: #fff;
20border: 1px solid #b9b9b9;
21}
22</style>
23
24</head>
25<body>
26<table class="table">
27<thead>
28<tr>
29<th>商品</th>
30<th>価格</th>
31<th>備考</th>
32</thead>
33<tbody>
34<tr>
35<td>卵</td>
36<td>5,000円</td>
37<td>消費期限：2015/1/1<br>産地：中国</td>
38</tr>
39</body>
40
41</html>
42

###試したこと

tdの中をdivやspan等のタグで分割してみましたが、
数字の右寄せまでするとうまくいかなかったりで
適切にタグを選択できていないのかなと感じています。

ネットではあまり表の中の文字列の表示を加工するケースでタグの選択を説明されているサイトが見つからず、
質問させていただきました

行動規範の内容に同意します

回答5件

今どきのテーブルは、こんな感じにやります。

テーブルは、PCサイズやタブレット辺りまでなら特に問題なくtableタグで良いわけですが、スマホサイズになると困ることが多々あります。

方法的には他にも色々ありますが、簡単なのは、はじめからtableタグで書かずにdivとul等を利用してデータを作っておき、cssでdisplay: tableやtable-cellをしていておいて、スマホサイズになった場合はこれらをlist-itemに変更することで、リスト表示にするというものです。
つまりはレスポンシブテーブルですね。テーブルではないですけど、テーブルもどきです。

borderが入ると色々と手を加えないと元のテーブルのようにはできなかったりもしますが、簡単な通常のテーブルであれば問題なくこれらで解決できます。

tableタグの場合は、th等で見出しを作れますが、リストになるとそうはいきませんので、ここらは別のアイデアで、

html
1<li data-xxx="商品">アイテム1</li>

などとしておき、

css
1li::before {
2  content: attr(data-xxx) ":";
3}

などとして、スタイルします。data-xxxのxxxは好きなものを入れて下さい。

やりたいと言われることの内容を反映できてなかったのでサンプルに追加しました。

投稿2016/06/15 17:51

編集2016/06/15 18:10

hidekichi

総合スコア366

hidekichi

2016/06/15 17:52

result部分とjavascript部分の境界は左右に動くので、サイズを320px以下の状態にした時にどうなるかを確認できます。

ykdy

2016/06/22 14:58

ご回答ありがとうございます。 display: tableやtable-cell、content等活用してみるのがより今風かなとは思って試すのですが、どうしてもレイアウトや配置、業務上の完成度を高めると苦しくなってくるんですよね。。。スマホの場合の要素の並び順、データが複数行の結合が必要だったり、単位がドルだったりユーロだったり

hidekichi

2016/06/23 01:54

擬似要素の表示はdata属性で読み込んでいるので、data属性を書き換えればよいですし、tableだから結合ですが、同じような表現はテーブルでなくても可能ですよ。アイデアと応用だけです。もちろんhtmlだけでは書き換えを動的にはできませんから、別途javascriptやjQuery等は必要になりますけれども。

行動規範の内容に同意します

一応、スクリプトを使わないバージョンです。

HTML
1<html>
2
3<head>
4<style type="text/css">
5table{
6	width: 100%;
7	border-collapse: collapse;
8}
9table th{
10	width: 25%;
11	padding: 6px;
12	text-align: left;
13	vertical-align: top;
14	color: #333;
15	background-color: #eee;
16	border: 1px solid #b9b9b9;
17}
18table td{
19	padding: 6px;
20	background-color: #fff;
21	border: 1px solid #b9b9b9;
22}
23.price {
24	text-align: right;
25}
26.priceDigit {
27	font-size: 200%;
28}
29.remark {
30	color: red;
31}
32</style>
33</head>
34
35<body>
36<table class="table">
37	<thead>
38		<tr>
39			<th>商品</th>
40			<th>価格</th>
41			<th>備考</th>
42		</tr>
43	</thead>
44	<tbody>
45		<tr>
46			<td>卵</td>
47			<td class="price"><span class="priceDigit">5,000</span>円</td>
48			<td>消費期限：2015/1/1<br><span class="remark">産地：中国</span></td>
49		</tr>
50		<tr>
51			<td>ニンジン</td>
52			<td class="price"><span class="priceDigit">100</span>円</td>
53			<td>消費期限：2015/1/1<br><span class="remark">産地：中国</span></td>
54		</tr>
55	</tbody>
56</table>
57</body>
58
59</html>

投稿2016/06/15 17:21

Zuishin

総合スコア28660

ベストアンサー

セルの位置決め打ちでないバージョンです。
price クラスをつけたセルの金額が加工されます。

HTML
1<html>
2
3<head>
4<style type="text/css">
5table{
6	width: 100%;
7	border-collapse: collapse;
8}
9table th{
10	width: 25%;
11	padding: 6px;
12	text-align: left;
13	vertical-align: top;
14	color: #333;
15	background-color: #eee;
16	border: 1px solid #b9b9b9;
17}
18table td{
19	padding: 6px;
20	background-color: #fff;
21	border: 1px solid #b9b9b9;
22}
23.price {
24	text-align: right;
25}
26.priceDigit {
27	font-size: 200%;
28}
29.remark {
30	color: red;
31}
32</style>
33<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
34<script>
35$(function(){
36	$(".price").each(function(i, elm){
37		$(elm).html($(elm).text().replace(/([^円]+)(円)/, "<span class=\"priceDigit\">$1</span><span>$2</span>")); // 数字+円の時、数字のみに priceDigit を適用
38	});
39});
40</script>
41</head>
42
43<body>
44<table class="table">
45	<thead>
46		<tr>
47			<th>商品</th>
48			<th>価格</th>
49			<th>備考</th>
50		</tr>
51	</thead>
52	<tbody>
53		<tr>
54			<td>卵</td>
55			<td class="price">5,000円</td>
56			<td>消費期限：2015/1/1<br><span class="remark">産地：中国</span></td>
57		</tr>
58		<tr>
59			<td>ニンジン</td>
60			<td class="price">100円</td>
61			<td>消費期限：2015/1/1<br><span class="remark">産地：中国</span></td>
62		</tr>
63	</tbody>
64</table>
65</body>
66
67</html>

投稿2016/06/15 17:17

Zuishin

総合スコア28660

ykdy

2016/06/22 14:51

ありがとうございました。記載いただいたタグの使い方を参考にさせていただきました。スクリプト有無等複数パターン記載いただきありがとうございます。

行動規範の内容に同意します

お題が文字列の加工ということだったので、一応スクリプトで加工してみました。
赤字にするところは柔軟性を持たせるために自動化しない方がいいと思ったので、手作業で <span class="remark"> で囲ってください。
price が金額セルのスタイルで、右揃えだけ指定してあります。
priceDigit が金額の文字のスタイルで、倍の大きさにしました。
remark は赤字です。

金額を入れるセルは左から二番目にあることを前提にしています。
テーブルを手作業で書くとすれば、いちいちクラス名を入れるのが面倒だからです。
このセルの位置が変わる時は、「2番目のセル」とコメントしてあるところの「$td.next()」をいじってください。これを「$td」にすると最初のセルになり、「$td.next().next()」とすると三番目のセルになります。

HTML
1<html>
2
3<head>
4<style type="text/css">
5table{
6	width: 100%;
7	border-collapse: collapse;
8}
9table th{
10	width: 25%;
11	padding: 6px;
12	text-align: left;
13	vertical-align: top;
14	color: #333;
15	background-color: #eee;
16	border: 1px solid #b9b9b9;
17}
18table td{
19	padding: 6px;
20	background-color: #fff;
21	border: 1px solid #b9b9b9;
22}
23.price {
24	text-align: right;
25}
26.priceDigit {
27	font-size: 200%;
28}
29.remark {
30	color: red;
31}
32</style>
33<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
34<script>
35$(function(){
36	// tbody の中の最初のセル
37	$td = $(".table tbody tr td:first-child");
38	// 2番目のセル
39	$td.next().each(function(i, elm){
40		$(elm).html($(elm).text().replace(/([^円]+)(円)/, "<span class=\"priceDigit\">$1</span><span>$2</span>")); // 数字+円の時、数字のみに priceDigit を適用
41		$(elm).addClass("price"); // セルに price を適用
42	});
43});
44</script>
45</head>
46
47<body>
48<table class="table">
49	<thead>
50		<tr>
51			<th>商品</th>
52			<th>価格</th>
53			<th>備考</th>
54		</tr>
55	</thead>
56	<tbody>
57		<tr>
58			<td>卵</td>
59			<td>5,000円</td>
60			<td>消費期限：2015/1/1<br><span class="remark">産地：中国</span></td>
61		</tr>
62		<tr>
63			<td>ニンジン</td>
64			<td>100円</td>
65			<td>消費期限：2015/1/1<br><span class="remark">産地：中国</span></td>
66		</tr>
67	</tbody>
68</table>
69</body>
70
71</html>

投稿2016/06/15 16:59

Zuishin

総合スコア28660

こんなかんじですかね。

HTML
1<td class="price"><span class="price_num">5,000</span><span class="price_unit">円</span></td>
2<td>消費期限：2015/1/1<br><span class="ch">産地：中国</span></td>

CSS
1.price {
2    text-align: right;
3}
4.price_num {
5    font-size: 1.5em;
6}
7.price_unit {
8    font-size: 0.75em;
9    margin-left: 0.2em;
10}
11.ch {
12    color: red;
13}