html - 複雑なレイアウトの HTML テーブルを作成するには?

Question

このテーブルを HTML で作成するにはどうすればよいですか?

試してみましたが、正しく行う方法がわかりません。

私のコード:

<table border=1 cellpadding=0 cellspacing=0>
  <tr>
    <td>&nbsp;&nbsp;&nbsp;</td>
    <td>&nbsp;&nbsp;&nbsp;</td>
    <td colspan="2">&nbsp;&nbsp;&nbsp;</td>
  </tr>
  <tr>
    <td colspan=2>&nbsp;&nbsp;&nbsp;</td>
    <td>&nbsp;&nbsp;&nbsp;</td>
    <td>&nbsp;&nbsp;&nbsp;</td>
  </tr>
</table>

Answer 1

使用rowspanとcolspan属性。

テーブルには3つの列（セル）と3つの行があります。

<table>
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td colspan="2" rowspan="2">&nbsp;</td>
    <td>&nbsp;</td>
</tr>
<tr>
   <!-- <td> from prev <tr> here with colspan="2" and rowspan="2" -->
   <td>&nbsp;</td>
</tr>
</table>​

<tr>すべての行（ ）のセル/列の数が常に同じであることを確認してください（ <td>）。<td>としてcolspan="2"カウントされます2。

• したがって、最初の<tr>セルには3つのセル（1 + 1 + 1）があります。
• 2番目も3（2 + 1）...
• ...そして最後は<td>前から1つ<tr>ありcolspan="2"、rowspan="2"最後の<td>要素があるので、3つのセル（2 + 1）

Answer 2

これを試してみてください。テーブルには 3 つの行と 3 つの列が含まれています。

• 最初の行には 3 つのセルが必要なので<td>、最初の に 3 つの を入れ<tr>ます。
• 2番目の行<td>には 2 つのセルが必要です。rowspan="2"colspan="2"<td>
• <td>3 番目の行には、スパンなしで 1 つのみが必要です。

<table border="1" cellpadding="0" cellspacing="0" width="150">
   <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   </tr>
   <tr>
      <td colspan="2" rowspan="2">&nbsp;</td>
      <td>&nbsp;</td>
   </tr>
   <tr>
      <td>&nbsp;</td>
   </tr>
</table>