html。複数行あるテーブルの幅

htmlのテーブルの幅が上手くできません。

2行目の1列目を
1行目の1列目の3分の2の長さに設定したいのです。

※ソース

<table> <tr> <td width＝“ 500px”>りんご</td> <td width＝“ 500px”>甘酸っぱい</td> <td width＝“ 500px”>おおむね赤</td> </tr> <tr> <td width＝“ 300px”>なつみかん</td> <td width＝“ 200px”>かなり酸っぱいと思う</td> <td width＝“ 100px”>たいてい黄色</td> <td width＝“ 400px”>たいてい黄色</td> </tr> </table>

1行目は綺麗にできるのですが、2行目のなつみかんが1行目のりんごに合わせてしまい、500pxになってしまいます。

どうにかして300pxにはできませんか？

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

回答1件

まずtableタグがどういうものか理解してください。
表なので、Excelと同じだと思えば良いです。
Excelで、行ごとに列の幅をバラバラには設定できませんよね？
列の幅を変えたいならセルの結合を使う必要があります。

列結合はcolspan属性です。
結合する列の数を設定します。

ついでに言っておきますがtdタグのwidth属性はHTML5で廃止されました。
styleでwidthを設定してください。

で、tableではすべての行で列の数を一致させなければ表として成り立ちません。
まあ、足りなくてもよしなに表示してくれるので欠けた表も描けるっちゃ描けるんですが。

以下のように書くことで、上下の行で幅を変えた表示ができると思います。

html
1<table>
2  <tbody>
3    <tr>
4      <td colspan="2" style="width: 500px;">りんご</td>
5      <td colspan="2" style="width: 500px;">甘酸っぱい</td>
6      <td style="width: 500px;">おおむね赤</td> 
7    </tr>
8    <tr>
9      <td style="width: 300px;">なつみかん</td> 
10      <td style="width: 200px;">かなり酸っぱいと思う</td>
11      <td style="width: 100px;">たいてい黄色</td>
12      <td style="width: 400px;">たいてい黄色</td>
13      <td></td>
14    </tr>
15  </tbody>
16</table>