文字を細くするタグの編集がうまくできません

Question

「式場名」となっている場所を隣にある「料金」と同じくらいの太さにしようと試みようとしました。
フォントタグなどを使ったり色々な方法を試しましたが解決には至りませんでした。
下記のhtml、cssを参考にどこにどのようなhtmlを挿入すれば良いかご指摘をしていただけないでしょうか？
よろしくお願い致します。

<table style="width:400px">
	<tr>
		<th scope="row" style="width: 147px;padding: 10px;font-weight: bold;vertical-align: top;color: black;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;background-color: #FFFACD !important">式場名</th>
		<td style="width: 200px !important;padding: 10px;vertical-align: top;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;background-color: #FFFACD !important">料金</td>
	</tr>
     <tr>
		<th scope="row" style="width: 147px;padding: 10px;font-weight: bold;vertical-align: top;color: white;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;background-color: #25c4db !important">雪</th>
		<td style="width: 200px !important;padding: 10px;vertical-align: top;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc">243,540円</td>
	</tr>
        <tr>
		<th scope="row" style="width: 147px;padding: 10px;font-weight: bold;vertical-align: top;color: white;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;background-color: #25c4db !important">竹</th>
		<td style="width: 200px !important;padding: 10px;vertical-align: top;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc">108,000円</td>
	</tr>
</table>
コード

Answer 1

<th>タグはテーブルヘッダのことなので、テーブルの先頭に置きます。デフォルトではboldになる（ブラウザに依存するかも知れません）ので、それをnormalと記述してあげれば大丈夫です。そして、2行目からは<th>を使わずに<td>タグを使います。

<table style="width:400px">
    <tr>
        <th scope="row" style="width: 147px; padding: 10px;font-weight: normal; vertical-align: top;color: black;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;background-color: #FFFACD !important">式場名</th>
        <th style="width: 200px !important;padding: 10px;font-weight: normal; vertical-align: top;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;background-color: #FFFACD !important">料金</th>
    </tr>
     <tr>
        <td scope="row" style="width: 147px;padding: 10px;font-weight: bold;vertical-align: top;color: white;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;background-color: #25c4db !important">雪</td>
        <td style="width: 200px !important;padding: 10px;vertical-align: top;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc">243,540円</td>
    </tr>
        <tr>
        <td scope="row" style="width: 147px;padding: 10px;font-weight: bold;vertical-align: top;color: white;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;background-color: #25c4db !important">竹</td>
        <td style="width: 200px !important;padding: 10px;vertical-align: top;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc">108,000円</td>
    </tr>
</table>

これで、自分の環境からはうまく行きましたがどうでしょうか？

Answer 2

thは デフォルトではまず太字ですから スタイルシートで th の font-weightを normalにしないと太字のままですね。
いろいろと思ってもみない書式が設定されていますから、途中で導入するのはどうかとおもいますが、
最初からやる際には、リセットCSSなんてものも検討してみてください。。

Comments

[rina0366]

すみません。うまく反映できませんでした。
投稿者さまならこのコードからどのように編集するか具体的に示して頂けないでしょうか？
大きく変更しても構いません。
もし可能でしたらよろしくお願い致

Answer 3

<th> の style に指定されている、` font-weight: bold; ` というのは「太字にする」という指定です。

これを削除すれば良い・・・と言いたいところですが、

<th> は標準で太字となっていることが多いのでそれだけでは不十分です。

---

【結論】

細くしたい部分の <th> の font-weight: bold; を font-weight: normal; に書き換えるのが良いと思います。

＃ 本当は style="" で指定するのじゃなく class で指定した方が良いとか色々あるのですが・・・
＃ そこまでは求めていなさそうな気がしたので取り急ぎの修正案のみ。

Comments

[rina0366]

すみません。うまく反映できませんでした。
投稿者さまならこのコードからどのように編集するか具体的に示して頂けないでしょうか？
大きく変更しても構いません。
もし可能でしたらよろしくお願い致

[sk_3122]

！？　これで駄目でしたか？　直すところを間違えているとかですかね…

ちなみにこのサイトは「全然わからないから丸コピできるソースをください」みたいな質問には回答が付きにくいです。

「自分で考えてみたけど分からない部分がある、こう書いてみたけどうまくいかない」
みたいに質問をするのが良いと思いますよ。

修正してみたなら、一度その修正したソースを載せて
こうしてみたけど反映されない… みたいにするのが良いと思います。

Answer 4

<td style="width: 200px !important;padding: 10px;vertical-align: top;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;background-color: #FFFACD !important">料金</td>

上記のStyleで、font-wieght:bold; を追加してみてはいかがでしょうか？

Comments

[rina0366]

すみません。うまく反映できませんでした。
投稿者さまならこのコードからどのように編集するか具体的に示して頂けないでしょうか？
大きく変更しても構いません。
もし可能でしたらよろしくお願い致します。

Answer 5

<th>ではなく<td>ではダメでしょうか？ ```html <td scope="row" style="width: 147px;padding: 10px;font-weight: bold;vertical-align: top;color: black;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;background-color: #FFFACD !important">式場名</td> ```

Comments

[sk_3122]

壁|ω・`) 「式場名」は見出しなので、やはり td ではなく th が良いと思います…

…と思ったけど「料金」は td なんですね…　うーん…？ じゃあもう何でも良いですかね ←

[rina0366]

では投稿者さまならこのコードからどのように編集するか具体的に示して頂けないでしょうか？
大きく変更しても構いません。
もし可能でしたらよろしくお願い致します。