Create table with many td

I would like to make this table layout:

I have:

<table border="1">
<tr>  <td colspan="3">aaa</td> <td colspan="3">aa</td> </tr>
<tr>  <td>a</td> <td> a开发者_Go百科a </td> <td> aaa </td> <td>aa</td><td>aa</td><td>aa</td> </tr>
</table>

but how can I make rest?

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

Here it is:

Code: http://jsfiddle.net/jsTvA/14/

You could create a new table in a cell.

The way to approach the problem if you want a single table is:

1. Work out the maximum number of rows and columns you require. In your case it looks like 8 columns, 6 rows.
2. Make a simple table grid of this size.
3. Start setting colspan and rowspan on tds and removing the tds next to them.
4. Repeat this until you have the format you like.

The best i can:

<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/

<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>

To make that structure you'll need to utilise the attribute colspan and rowspan.

Example.

To Make the following structure:

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

use the code:

<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>

An alternative is as a previous post suggested, to add a nested table as follows:

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

Personally I'd opt for the colspan route, but its really up to you.

Another route would be to ignore tables entirely and use CSS, but you are likely to find this much more painful unless you are already competenent at using CSS.

You can try merging cells in excel and then convert it into html. http://tableizer.journalistopia.com