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/