HTML：テーブル行を作成する

Question

各行に異なる数の列を持つテーブルを作成しようとしていますが、苦労しています。

私はこれまでのところ、これをしようとしていますが、これは不均一な行とタイトルをもたらし、テーブルには、すべての奇妙なフォーマット。

http://jsfiddle.net/q3M4R/8/

<th colspan="2">TITLE </th> 
    <tr> 
    <td>INFO 1</td> 
    <td>INFO 2</td> 
    </tr> 
    <tr> 
    <td>INFO 3</td> 
    <td>INFO 4 </td> 
    </tr> 
    <tr> 
    <td>INFO 5</td> 
    <td>INFO 6 </td> 
    </tr> 
    <tr> 
    <td>INFO 7</td> 
    <td>INFO 8 </td> 
    </tr> 
    <tr> 
    <td>INFO 9</td> 
    <td>INFO 10 </td> 
    </tr> 

Answer 1

これらの線に沿って何か？何が起こっているのは、あなたのテーブルのセルがコンテンツのサイズに合わせて縮小していることです。幅を加えてテキストの中央に配置することで、より見た目を向上させることができます。

td{width:250px; border: 1px solid black;} 
 
table, th{text-align: center; border: 1px solid black;}

<table> 
 

 
    <th colspan="2">TITLE </th> 
 
    <tr> 
 
    <td>INFO 1</td> 
 
    <td>INFO 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>INFO 3</td> 
 
    <td>INFO 4 </td> 
 
    </tr> 
 
    <tr> 
 
    <td>INFO 5</td> 
 
    <td>INFO 6 </td> 
 
    </tr> 
 
    <tr> 
 
    <td>INFO 7</td> 
 
    <td>INFO 8 </td> 
 
    </tr> 
 
    <tr> 
 
    <td>INFO 9</td> 
 
    <td>INFO 10 </td> 
 
    </tr> 
 

 
    <th colspan="2">TITLE</th> 
 
    <tr> 
 
    <td>INFO 1</td> 
 
    <td>INFO 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>INFO 3</td> 
 
    <td>INFO 4 </td> 
 
    </tr> 
 
    <tr> 
 
    <td>INFO 5</td> 
 
    <td>INFO 6 </td> 
 
    </tr> 
 
    <tr> 
 
    <td>INFO 7</td> 
 
    <td>INFO 8 </td> 
 
    </tr> 
 
    <tr> 
 
    <td>INFO 9</td> 
 
    <td>INFO 10 </td> 
 
    </tr> 
 
    <table> 
 

 
    </table>

http://jsfiddle.net/vnx8prek/