tableを使用して表を作成し、同じ行内に複数の情報を入れて表示したい。

Question

tableを使用して表を作成しているのですが、
同じ行内に複数の情報を入れたいと思っています。
文章だとちょっと伝わりづらいので、
下記の添付スクショが完成系イメージです。

それぞれの名前に複数のメールアドレスや業務を入れて表示したいと思い、
下記のようなコードを作成しました。
tdの中にtrを入れてしまえば、複数を表示できるのではないかと思いましたが、
下記のイメージの通り画面が崩れてしまいました。
どうすれば、きれいに表が作成できるのか、
どなたかご教示いただけませんでしょうか？

<table border="1">
<caption>test</caption>

<thead >
<tr><th></th><th>名前</th><th class="">メールアドレス</th><th>業務</th></tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>ほげ太朗</td>
<td>
  <tr>
    <td>[e-mail]</td>
    <td>[e-mail]</td>
    <td>[e-mail]</td> 
  </tr>
</td>
<td>
  <tr>
    <td>hoge</td>
    <td>hoge2</td>
    <td>hoge3</td> 
</tr>
</td>
</tr>

<tr>
<th>2</th>
<td>ふが次郎</td>
<td>
  <tr>
    <td>[e-mail]</td>
    <td>[e-mail]</td>
    <td>[e-mail]</td> 
  </tr>
</td>
<td>
  <tr>
    <td>fuga</td>
    <td>fuga2</td>
    <td>fuga3</td> 
  </tr>
</td>
</tr>

</tbody>
</table>

Answer 1

rowspanを使うことで縦に、
colspanを使うことで横にセルを結合することができます。

<table border="1">
  <tbody>
    <tr>
      <td></td>
      <td>名前</td>
      <td>メール</td>
      <td>業務</td>
    </tr>
    <tr>
      <td rowspan="3">1</td>
      <td rowspan="3">hoge</td>
      <td>hogemail1</td>
      <td>hoge1</td>
    </tr>
    <tr>
      <td>hogemail2</td>
      <td>hoge3</td>
    </tr>
    <tr>
      <td>hogemail3</td>
      <td>hoge3</td>
    </tr>
    <tr>
      <td rowspan="3">2</td>
      <td rowspan="3">fuga</td>
      <td>fugamail1</td>
      <td>fuga1</td>
    </tr>
    <tr>
      <td>fugamail2</td>
      <td>fuga</td>
    </tr>
    <tr>
      <td>fugamail3</td>
      <td>fuga3</td>
    </tr>
  </tbody>
</table>

tableタグを生成してくれるサービスもありますので複雑なテーブルを作成する場合は試してみてもいいかもしれません。
Table Tag Generator
もちろんrowspan・colspanの仕組みは知っていた方が良いでしょうが。

Comments

[takochan1192]

ご回答いただきまして、ありがとうございます。
Table Tag Generatorなんて便利なものが存在するとは、、、、目からうろこでした。
早速、ブックマークに登録して、参考にさせていただきたいと思います。
ありがとうございました。

Answer 2

tdの中にさらにtrを入れたい場合はtdの中に新たにtableを作成してください。
ただ、今回の場合はセルの結合をすると希望の通りのテーブルが作成できます。

参考　セルを結合する

Comments

[takochan1192]

なるほど、tableを新たに入れれば、作ることができるのですか！
試してみます！！ありがとうございました。

[gogoweb_ikeda]

いや、tableの中にtableを組み込みたいケースの場合はその方法でいいですが、今回の場合は素直にrospanでセルを結合するべきです。

[takochan1192]

コメントありがとうございます。
なるほですね。
素直にrowspanを使わせていただきます。

[yambejp]

HTMLはあくまでも構造を定義するものですので
テーブルの中のテーブルは構造的にあまり推奨されません

[takochan1192]

yambejp様
コメントありがとうございます。
そうだったのですね。
ご指摘ありがとうございます。

Answer 3

普通のtableの話ですよね？普通に書いてください

Comments

[yambejp]

<table border="1">
<caption>test</caption>
<thead >
<tr>
<th></th>
<th>名前</th>
<th class="">メールアドレス</th>
<th>業務</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="3">1</th>
<td rowspan="3">ほげ太朗</td>
<td>[e-mail]</td>
<td>hoge</td>
</tr>
<tr>
<td>[e-mail]</td>
<td>hoge2</td>
</tr>
<tr>
<td>[e-mail]</td>
<td>hoge3</td>
</tr>
<tr>
<th rowspan="3">2</th>
<td rowspan="3">ふが次郎</td>
<td>[e-mail]</td>
<td>fuga</td>
</tr>
<tr>
<td>[e-mail]</td>
<td>fuga2</td>
</tr>
<tr>
<td>[e-mail]</td>
<td>fuga3</td>
</tr>
</tbody>
</table>

[takochan1192]

ありがとうございます。rowspanを使用すればよいのですね。勉強になりました。