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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

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

Q&A

解決済

6回答

582閲覧

trタグの幅が機能しません

python_

総合スコア19

HTML5

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

0グッド

0クリップ

投稿2020/07/29 13:57

<table style="table-layout:fixed;" width="80%"> <tr><font size="10" color="black" style="display:inline-block; padding-top:100; padding-bottom: 50;"><b>文章<br>文章</b></font></tr> <tr><div width:100%; style="margin:auto; padding-bottom:30;"><img src=" リンク " width="70%"></div></tr> <tr style="margin:auto; width:70%;>文章</tr><br>←ここです! <tr><font size="10" color="black" style="display:inline-block; padding-top:100; padding-bottom:50;"><b>文章<br>文章</b></font></tr><br> <tr><div width:100%; style="margin:auto; padding-bottom:30;"><img src=" リンク " width="70%"></div></tr> <tr>文章</tr><br> <tr><font size="10" color="black" style="display:inline-block; padding-top:100; padding-bottom: 50;"><b>文章<br>文章</b></font></tr><br> <tr><div width:100%; style="margin:auto; padding-bottom:30;"><img src=" リンク " width="70%"></div></tr> <tr>文章</tr><br> <tr><font size="10" color="black" style="display:inline-block; padding-top:100; padding-bottom: 50;"><b>文章<br>文章</b></font></tr><br> <tr><div width:100%; style="margin:auto; padding-bottom:30;"><img src=" リンク " width="70%"></div></tr> <tr>文章</tr> <tr>文章</tr> <tr>文章</tr> </table>

このコードの六行目の(ここです!と記載しました)trタグの幅の設定が機能しません。どこに問題があるのかおわかりの方がいらっしゃいましたら、是非教えてください。どこに問題があるかわからなかったので一応表全体のコードを書いておきました。見にくくて大変申し訳ありませんが是非ご教授ください。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答6

0

そもそも論ですが、なぜ<tr>の中に直接<font><div>を置いているのでしょうか?

<tr>の中に書けるのは<td>あるいは<th>だけです。それ以外のものを置くと、表の外に追い出されるなど、想定外の結果に組まれます。

投稿2020/07/29 14:03

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/07/30 01:30

笑っちゃいけないですけどこのbrの存在感がすごい </tr><br>
guest

0

ベストアンサー

以前の質問trの直下にはthまたはtdしか書けないと指摘をされ、修正(解決)されていたはずなのに、なぜまた悪化してしまったんでしょうか。
この質問の回答でmaisumakunさんが指摘していることですが、解決したという以前の質問での回答もmaisumakunさんでしたね…。

tableタグの書き方を再度確認してください。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/table
https://developer.mozilla.org/ja/docs/Web/HTML/Element/tr

tr,th,tdの説明はおそらくこちらの図説がわかりやすいです。
https://saruwakakun.com/html-css/basic/table

書き方が全体的におかしいので、元の形を残しつつ頑張って修正してみました↓
見落としがあるかもしれませんが。

html

1<table style="table-layout:fixed; width:80%;"> 2 <tr> 3 <td> 4 <p style="font-size:1em; color:#000; display:inline-block; padding-top:100px; padding-bottom: 50px;"><b>文章<br>文章</b></p> 5 </td> 6 </tr> 7 <tr> 8 <td> 9 <div style="width:100%;margin:auto; padding-bottom:30px;"><img src="http://placehold.jp/c4c4c4/ffffff/50x50.png" style="width:70%;"></div> 10 </td> 11 </tr> 12 <tr style="margin:auto; width:70%;"> 13 <td>文章</td> 14 </tr> 15 <tr> 16 <td> 17 <p style="font-size:1em; color:#000; display:inline-block; padding-top:100px; padding-bottom: 50px;"><b>文章<br>文章</b></p> 18 </td> 19 </tr> 20 <tr> 21 <td> 22 <div style="width:100%;margin:auto; padding-bottom:30px;"><img src="http://placehold.jp/c4c4c4/ffffff/50x50.png" style="width:70%;"></div> 23 </td> 24 </tr> 25 <tr style="margin:auto; width:70%;"> 26 <td>文章</td> 27 </tr> 28 <tr> 29 <td> 30 <p style="font-size:1em; color:#000; display:inline-block; padding-top:100px; padding-bottom: 50px;"><b>文章<br>文章</b></p> 31 </td> 32 </tr> 33 <tr> 34 <td> 35 <div style="width:100%;margin:auto; padding-bottom:30px;"><img src="http://placehold.jp/c4c4c4/ffffff/50x50.png" style="width:70%;"></div> 36 </td> 37 </tr> 38 <tr style="margin:auto; width:70%;"> 39 <td>文章</td> 40 </tr> 41 <tr> 42 <td> 43 <p style="font-size:1em; color:#000; display:inline-block; padding-top:100px; padding-bottom: 50px;"><b>文章<br>文章</b></p> 44 </td> 45 </tr> 46 <tr> 47 <td> 48 <div style="width:100%;margin:auto; padding-bottom:30px;"><img src="http://placehold.jp/c4c4c4/ffffff/50x50.png" style="width:70%;"></div> 49 </td> 50 </tr> 51 <tr> 52 <td>文章</td> 53 </tr> 54 <tr> 55 <td>文章</td> 56 </tr> 57 <tr> 58 <td>文章</td> 59 </tr> 60</table>

投稿2020/07/30 02:15

dit.

総合スコア3235

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

python_

2020/07/30 09:54

ご回答ありがとうございます。修正は完了したのですが、文章・写真ともにページ中央に表示したいと思っています。pタグにmargin:auto;が設定されているのにページ中央に表示されないのですがどのような改善が必要なのでしょうか?
dit.

2020/07/30 10:22

どこをどのように修正したかわかりませんし、最終的にどのような状態が希望なのかもわかりません。 pやdivなどを中央に配置することと、その中身のテキストや画像をセンタリングすることは別で考えなければいけません。 divを画面や親要素の中央に持っていきたいなら ```css div{ width:100px; margin:auto; } ``` divの中身をdivの中でセンタリングしたいなら ```css div{ text-align:center; } ``` です。 https://saruwakakun.com/html-css/basic/centering そもそもtableで組むことがふさわしい内容なのか質問に提示されたコードだけでは不明なのでこの程度のアドバイスしかできないです。
guest

0

「HTML5」のタグをつけておきながら廃止されたタグを利用していたり、
既に指摘があるようにtr内に直で書けない要素を書いていたり、
属性の指定の仕方だったり、
かなり滅茶苦茶です。

「trの幅が機能しない」以前の問題が大きいので、HTMLの基本からしっかりおさえて、組み直しましょう。

投稿2020/07/30 00:21

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

python_

2020/07/30 08:03

ご回答ありがとうございます。勉強不足で申し訳ありません。リンクを貼っていただいたサイトをみて勉強いたします。現在作っているものがcssファイルを添付できないようになっているのですが<font>以外に文字の大きさを変えれるものはありますか?
python_

2020/07/30 08:06

<p>で対応できました。野暮な質問で申し訳ありません
m.ts10806

2020/07/30 08:59

なんでもできますよ。 pだけじゃなくても。 styleの多くは配下の要素まで影響します。 ただそれ以前に正しいHTMLを組んでください
python_

2020/07/30 09:07

頑張ります。
guest

0

https://html-coding.co.jp/annex/dictionary/html/tr/

trタグに「幅」を示す属性はないからです。
trは「行」を示すタグであり、その幅は常にテーブル幅に依存します。

幅が存在するのはセルであり、そのタグは td や th です。

(追記)
↑上記についてはHTML5のタグとしてのwidth属性はありませんが、CSSのwidthプロパティという形では存在するので不正確でしたので取り消します。
ただし、trタグのHTML5の仕様自体は目を通すといいと思います。

また、全体的にテーブルのHTMLがおかしいです。
テーブルは table -> tr -> th または td という階層で示されるもので、文章などは th や td タグ内にかかれるものです。
参照) https://html-coding.co.jp/annex/dictionary/html/table/

投稿2020/07/29 14:04

編集2020/07/29 14:41
kaz.Suenaga

総合スコア2037

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kaz.Suenaga

2020/07/29 14:37

確かにCSSのwidthプロパティは全要素が適応対象なので、指定できない、は間違いですね。 (HTML5のポリシーから言ってそういう利用方法が適切なのかは疑問がありますが。。。) ご指摘ありがとうございます。
python_

2020/07/30 09:49

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

0

ダブルクォートが足りていませんよ。
あと全角スペースが含まれているところがあるので、半角スペースに置換してください。

html

1<tr style="margin:auto; width:70%;">文章</tr><br> 2

投稿2020/07/29 14:02

FrontEnd_Japan

総合スコア271

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

python_

2020/07/30 09:50

ご回答ありがとうございます。修正しました。
guest

0

trの直後が全角空白なので、style属性が有効になっていません。

Diff

1- <tr style="margin:auto; width:70%;>文章</tr><br> 2+ <tr style="margin:auto; width:70%;">文章</tr><br>

投稿2020/07/29 14:02

編集2020/07/29 14:03
Daregada

総合スコア11990

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

python_

2020/07/30 09:50

ご回答ありがとうございます。修正しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問