Создать таблицу со многими тд

Question

Я хотел бы сделать это макет таблицы:

У меня есть:

<table border="1">
<tr>  <td colspan="3">aaa</td> <td colspan="3">aa</td> </tr>
<tr>  <td>a</td> <td> aa </td> <td> aaa </td> <td>aa</td><td>aa</td><td>aa</td> </tr>
</table>

но как я могу отдохнуть?

LIVE: http://jsfiddle.net/jsTvA/1/

Answer 1

Вот оно:

Код: http://jsfiddle.net/jsTvA/14/

Answer 2

Вы можете попробовать объединить ячейки в Excel, а затем преобразовать его в HTML. http://tableizer.journalistopia.com

Answer 3

<table border="1">
    <tr>
        <td colspan="3">aaa</td>
        <td colspan="5">aa</td>
    </tr>
    <tr>
        <td rowspan="3">a</td>
        <td rowspan="3">aa</td>
        <td rowspan="3">aa</td>
        <td rowspan="3">aa</td>
        <td colspan="3">aa</td>
        <td rowspan="3">aa</td>
    </tr>
    <tr>
        <td>bb</td>
        <td>bb</td>
        <td>bb</td>
    </tr>
    <tr>
        <td>bb</td>
        <td>bb</td>
        <td>bb</td>
    </tr>
    <tr>
        <td>aa</td>
        <td>aa</td>
        <td>aa</td>
        <td>aa</td>
        <td>aa</td>
        <td>aa</td>
        <td>aa</td>
        <td>aa</td>
     </tr>
    <tr>
        <td colspan="8">aa</td>
    </tr>
</table>

Answer 4

Лучшее, что я могу:

<table border="1">
<tr>  
    <td colspan="3">aaa</td> 
    <td colspan="3">aa</td> 
</tr>
<tr>  
    <td>a</td> 
    <td> aa </td> 
    <td> aaa </td> 
    <td>lol</td>
    <td>
        <table border="1">
            <tr>
                <td colspan="3">
                    lol
                </td>
            </tr>
        <tr>
            <td>
                ok
            </td>
            <td>
                ok
            </td>
            <td>
                ok
            </td>
        </tr>
        <tr>
            <td>
                ok
            </td>
            <td>
                ok
            </td>
            <td>
                ok
            </td>
        </tr>
        </table>
    </td>
    <td>

    </td> 
</tr>
    <tr>
        <td colspan="2">
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
   </tr>
    <tr>
        <td colspan="10">
        </td>
    </tr>

</table>

http://jsfiddle.net/jsTvA/15/

Answer 5

Чтобы создать эту структуру, вам нужно использовать атрибуты colspan и rowspan.

Пример.

Сделать следующую структуру:

-------
|A    |
-------
|X|Y|Z|
  -----
| |1|2|
-------

используйте код:

<tr>
    <td colspan="3">A</td>
</tr>
<tr>
    <td rowspan="2">X</td>
    <td>Y</td>
    <td>Z</td>
</tr>
<tr>
    <td>1</td>
    <td>2</td>
</tr>

Альтернативой, как и в предыдущем посте, является добавление вложенной таблицы следующим образом:

<tr>
    <td>A</td>
</tr>
<tr>
    <table>
        <tr>
            <td>X</td>
            <td>Y</td>
            <td>|</td>
        </tr>
    </table>
</tr>

Лично я бы выбрал маршрут colspan, но это действительно ваше дело.

Другим способом было бы полностью игнорировать таблицы и использовать CSS, но вы, вероятно, найдете это гораздо более болезненным, если вы уже не обладаете достаточными знаниями в использовании CSS.

Answer 6

Способ решения проблемы, если вам нужна одна таблица:

1. Определите максимальное количество нужных вам строк и столбцов. В вашем случае это выглядит как 8 столбцов, 6 строк.
2. Создайте простую таблицу такого размера.
3. Начните настройку colspan и rowspan на td с и убрав td с рядом с ними.
4. Повторяйте это, пока не получите нужный формат.

Answer 7

Вы можете создать новую таблицу в ячейке.