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

Question

<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タグの幅の設定が機能しません。どこに問題があるのかおわかりの方がいらっしゃいましたら、是非教えてください。どこに問題があるかわからなかったので一応表全体のコードを書いておきました。見にくくて大変申し訳ありませんが是非ご教授ください。

Answer 1

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

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

Comments

[m.ts10806]

笑っちゃいけないですけどこのbrの存在感がすごい

</tr><br>

Answer 2

以前の質問で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

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

<table style="table-layout:fixed; width:80%;">
  <tr>
    <td>
      <p style="font-size:1em; color:#000; display:inline-block; padding-top:100px; padding-bottom: 50px;"><b>文章<br>文章</b></p>
    </td>
  </tr>
  <tr>
    <td>
      <div style="width:100%;margin:auto; padding-bottom:30px;"><img src="http://placehold.jp/c4c4c4/ffffff/50x50.png" style="width:70%;"></div>
    </td>
  </tr>
  <tr style="margin:auto; width:70%;">
    <td>文章</td>
  </tr>
  <tr>
    <td>
      <p style="font-size:1em; color:#000; display:inline-block; padding-top:100px; padding-bottom: 50px;"><b>文章<br>文章</b></p>
    </td>
  </tr>
  <tr>
    <td>
      <div style="width:100%;margin:auto; padding-bottom:30px;"><img src="http://placehold.jp/c4c4c4/ffffff/50x50.png" style="width:70%;"></div>
    </td>
  </tr>
  <tr style="margin:auto; width:70%;">
    <td>文章</td>
  </tr>
  <tr>
    <td>
      <p style="font-size:1em; color:#000; display:inline-block; padding-top:100px; padding-bottom: 50px;"><b>文章<br>文章</b></p>
    </td>
  </tr>
  <tr>
    <td>
      <div style="width:100%;margin:auto; padding-bottom:30px;"><img src="http://placehold.jp/c4c4c4/ffffff/50x50.png" style="width:70%;"></div>
    </td>
  </tr>
  <tr style="margin:auto; width:70%;">
    <td>文章</td>
  </tr>
  <tr>
    <td>
      <p style="font-size:1em; color:#000; display:inline-block; padding-top:100px; padding-bottom: 50px;"><b>文章<br>文章</b></p>
    </td>
  </tr>
  <tr>
    <td>
      <div style="width:100%;margin:auto; padding-bottom:30px;"><img src="http://placehold.jp/c4c4c4/ffffff/50x50.png" style="width:70%;"></div>
    </td>
  </tr>
  <tr>
    <td>文章</td>
  </tr>
  <tr>
    <td>文章</td>
  </tr>
  <tr>
    <td>文章</td>
  </tr>
</table>

Comments

[python_]

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

[dit.]

どこをどのように修正したかわかりませんし、最終的にどのような状態が希望なのかもわかりません。

pやdivなどを中央に配置することと、その中身のテキストや画像をセンタリングすることは別で考えなければいけません。

divを画面や親要素の中央に持っていきたいなら
```css
div{
width:100px;
margin:auto;
}
```

divの中身をdivの中でセンタリングしたいなら
```css
div{
text-align:center;
}
```
です。

https://saruwakakun.com/html-css/basic/centering

そもそもtableで組むことがふさわしい内容なのか質問に提示されたコードだけでは不明なのでこの程度のアドバイスしかできないです。

Answer 3

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

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

Comments

[python_]

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

[python_]

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

[m.ts10806]

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

[python_]

頑張ります。

Answer 4

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/

Comments

[FrontEnd_Japan]

trタグにstyle属性でwidthは指定できますよ？？？
https://codepen.io/FrontEnd_Japan/pen/YzwoXdZ

[kaz.Suenaga]

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

[python_]

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

Answer 5

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

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

Comments

[python_]

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

Answer 6

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

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

Comments

[python_]

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