html - 要素内に要素を追加する

Question

ヘッダーの 1 つが 2 列にまたがる html テーブルがあります。2 つの列のそれぞれにサブヘッダーを追加するにはどうすればよいですか?

たとえば、添付の画像では、「連絡先」列に、それぞれの列のサブヘッダー「電話」と「住所」が必要です。

Answer 1

紙にテーブルを描く場合と同じように：

<table>
  <thead>
    <tr>
      <th rowspan="2">Name</th>
      <th rowspan="2">Email</th>
      <th colspan="2">Contact</th>
    </tr>
    <tr>
      <th>Phone</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody>
    <!-- your data goes here -->
  </tbody>
</table>

Answer 2

2 つの別個のヘッダー行が必要です。

<tr>
  <th rowspan="2">Name</th>
  <th rowspan="2">Email</th>
  <th colspan="2">Contact</th>
</tr>
<tr>
  <th>Number</th>
  <th>Address</th>
</tr>

Answer 3

別の行を追加し、サブヘッダーを<td />タグに配置します。たぶん、行にクラスを与えて、tdテキストのスタイルを設定しますか？そうすれば、実際のヘッダーと同じようには見えず、混乱を招く可能性があります。

Answer 4

<table>
<tr>
<th>Title 1</th><th>Title 2</th><th colspan="2">Title 3</th>
</tr>
<tr>
<td>content</td><td>content</td><th>subtitle 1</th><th>subtitle 2</th>
</tr>
<tr>
<td>content</td><td>content</td><td>content</td><td>content</td>
</tr>
</table>