[解決済み] HTMLで行列のような表を作るには

質問

いくつかの列を持つテーブルを作成しようとしていますが、いくつかの列はネストされた列を持っています。試してみましたが、うまくいきません。

ご覧のように4列目には3つのネストしたテーブル（4.1,4.2,4.3）がありますが、もう1行作成して値を追加すると、ぐちゃぐちゃになってしまいます。

http://jsfiddle.net/G9w5d/

私のHTMLはこのような感じです。

<table border="1">
        <thead>
            <tr>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
                <th>Col 4</th>
                <th>Col 5</th>
            </tr>

            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th><table border="1"><thead><tr><th>Col 4.1</th><th>Col 4.2</th><th>Col 4.3</th></tr></thead></table></th>
                <th><table border="1"><thead><tr><th>Col 5.1</th><th>Col 5.2</th><th>Col 5.3</th></tr></thead></table></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    Val 1
                </td>
                <td>
                    Val 2
                </td>
                <td>
                    Val 3
                </td>
                <td>
                    <table border="1"><tbody><tr><td>This is Val 4.1</td><td>This is Val 4.2</td><td>This is Val 4.3</td></tr></tbody></table>
                </td>

            </tr>
        </tbody>
    </table>

解決方法は？

ヘッダーを複数のカラムにまたがるようにしたいようですね。

を使用することができます。 [colspan] と [rowspan] 属性を使用すると、セルが通常の境界を越えて広がることができます。

<table border="1">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th colspan="3">Col 4</th>
    </tr>
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th>Col 4.1</th>
      <th>Col 4.2</th>
      <th>Col 4.3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Val 1
      </td>
      <td>
        Val 2
      </td>
      <td>
        Val 3
      </td>
      <td>This is Val 4.1</td>
      <td>This is Val 4.2</td>
      <td>This is Val 4.3</td>
    </tr>
  </tbody>
</table>