質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.36%

  • HTML

    10340questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • HTML5

    4647questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Bootstrap

    1121questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

html表の書き方について

解決済

回答 5

投稿

  • 評価
  • クリップ 0
  • VIEW 1,136

ykdy

score 12

前提・実現したいこと

htmlで表を表示する場合の書き方について教えてください。

発生している問題・エラーメッセージ

htmlで表を記載する際に同一カラム内で
以下のような要件がある場合にどのように記載(タグ・cssを使う)するのが適切なのか教えてください。

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

該当のソースコード

<html>
<head>
<style type="text/css">
table{
width: 100%;
border-collapse: collapse;
}
table th{
width: 25%;
padding: 6px;
text-align: left;
vertical-align: top;
color: #333;
background-color: #eee;
border: 1px solid #b9b9b9;
}
table td{
padding: 6px;
background-color: #fff;
border: 1px solid #b9b9b9;
}
</style>

</head>
<body>
<table class="table">
<thead>
<tr>
<th>商品</th>
<th>価格</th>
<th>備考</th>
</thead>
<tbody>
<tr>
<td></td>
<td>5,000円</td>
<td>消費期限:2015/1/1<br>産地:中国</td>
</tr>
</body>

</html>

試したこと

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 5

checkベストアンサー

0

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

<html>

<head>
<style type="text/css">
table{
    width: 100%;
    border-collapse: collapse;
}
table th{
    width: 25%;
    padding: 6px;
    text-align: left;
    vertical-align: top;
    color: #333;
    background-color: #eee;
    border: 1px solid #b9b9b9;
}
table td{
    padding: 6px;
    background-color: #fff;
    border: 1px solid #b9b9b9;
}
.price {
    text-align: right;
}
.priceDigit {
    font-size: 200%;
}
.remark {
    color: red;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(function(){
    $(".price").each(function(i, elm){
        $(elm).html($(elm).text().replace(/([^円]+)(円)/, "<span class=\"priceDigit\">$1</span><span>$2</span>")); // 数字+円の時、数字のみに priceDigit を適用
    });
});
</script>
</head>

<body>
<table class="table">
    <thead>
        <tr>
            <th>商品</th>
            <th>価格</th>
            <th>備考</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td class="price">5,000円</td>
            <td>消費期限:2015/1/1<br><span class="remark">産地:中国</span></td>
        </tr>
        <tr>
            <td>ニンジン</td>
            <td class="price">100円</td>
            <td>消費期限:2015/1/1<br><span class="remark">産地:中国</span></td>
        </tr>
    </tbody>
</table>
</body>

</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/22 23:51

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

    キャンセル

0

こんなかんじですかね。

<td class="price"><span class="price_num">5,000</span><span class="price_unit"></span></td>
<td>消費期限:2015/1/1<br><span class="ch">産地:中国</span></td>
.price {
    text-align: right;
}
.price_num {
    font-size: 1.5em;
}
.price_unit {
    font-size: 0.75em;
    margin-left: 0.2em;
}
.ch {
    color: red;
}

動くサンプル:https://jsfiddle.net/nwb5jrvd/

あと、<table> <tbody> の閉じタグを忘れています。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

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

<html>

<head>
<style type="text/css">
table{
    width: 100%;
    border-collapse: collapse;
}
table th{
    width: 25%;
    padding: 6px;
    text-align: left;
    vertical-align: top;
    color: #333;
    background-color: #eee;
    border: 1px solid #b9b9b9;
}
table td{
    padding: 6px;
    background-color: #fff;
    border: 1px solid #b9b9b9;
}
.price {
    text-align: right;
}
.priceDigit {
    font-size: 200%;
}
.remark {
    color: red;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(function(){
    // tbody の中の最初のセル
    $td = $(".table tbody tr td:first-child");
    // 2番目のセル
    $td.next().each(function(i, elm){
        $(elm).html($(elm).text().replace(/([^円]+)(円)/, "<span class=\"priceDigit\">$1</span><span>$2</span>")); // 数字+円の時、数字のみに priceDigit を適用
        $(elm).addClass("price"); // セルに price を適用
    });
});
</script>
</head>

<body>
<table class="table">
    <thead>
        <tr>
            <th>商品</th>
            <th>価格</th>
            <th>備考</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>5,000円</td>
            <td>消費期限:2015/1/1<br><span class="remark">産地:中国</span></td>
        </tr>
        <tr>
            <td>ニンジン</td>
            <td>100円</td>
            <td>消費期限:2015/1/1<br><span class="remark">産地:中国</span></td>
        </tr>
    </tbody>
</table>
</body>

</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

<html>

<head>
<style type="text/css">
table{
    width: 100%;
    border-collapse: collapse;
}
table th{
    width: 25%;
    padding: 6px;
    text-align: left;
    vertical-align: top;
    color: #333;
    background-color: #eee;
    border: 1px solid #b9b9b9;
}
table td{
    padding: 6px;
    background-color: #fff;
    border: 1px solid #b9b9b9;
}
.price {
    text-align: right;
}
.priceDigit {
    font-size: 200%;
}
.remark {
    color: red;
}
</style>
</head>

<body>
<table class="table">
    <thead>
        <tr>
            <th>商品</th>
            <th>価格</th>
            <th>備考</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td class="price"><span class="priceDigit">5,000</span></td>
            <td>消費期限:2015/1/1<br><span class="remark">産地:中国</span></td>
        </tr>
        <tr>
            <td>ニンジン</td>
            <td class="price"><span class="priceDigit">100</span></td>
            <td>消費期限:2015/1/1<br><span class="remark">産地:中国</span></td>
        </tr>
    </tbody>
</table>
</body>

</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

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

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

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

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

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


などとしておき、

li::before {
  content: attr(data-xxx) ":";
}


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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/16 02:52

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

    キャンセル

  • 2016/06/22 23:58

    ご回答ありがとうございます。

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

    キャンセル

  • 2016/06/23 10:54

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

    キャンセル

同じタグがついた質問を見る

  • HTML

    10340questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • HTML5

    4647questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Bootstrap

    1121questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。