如何Html表结构

Question

我要创建一个非常复杂的表。我不知道该怎么办。我创建了一个简单的但需要建议如何继续。

必需的表格结构

当前表格结构

<table class="ccTbl" border="0" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <th>Group</th>
            <th class="tblServHdr">
                <span>Type1</span>
            </th>
            <th class="tblServHdr">
                <span>Type2</span>
            </th>
            <th class="tblServHdr">
                <span>Type3</span>
            </th>
        </tr>
        <tr>
            <td>Group-A</td>
            <td>$0.0</td>
            <td>$0.0</td>
            <td>$0.0</td>
        </tr>
        <tr>
            <td>Group-B</td>
            <td>$0.0</td>
            <td>$0.0</td>
            <td>$0.0</td>
        </tr>
        <tr>
            <td>Group-C</td>
            <td>$0.0</td>
            <td>$0.0</td>
            <td>$0.0</td>
        </tr>
        <tr>
            <td>Total</td>
            <td>$0.0</td>
            <td>$0.0</td>
            <td>$0.0</td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="button" value="Save"></input>
            </td>
            <td>
                <input type="button" value="Create "></input>
            </td>
            <td>
                <input type="button" value="Delete"></input>
            </td>
        </tr>
    </tbody>        
</table>

小提琴 - http://jsfiddle.net/6qJeP/

Answer 1

您需要rowspan。

使用此：

<table class="ccTbl" border="0" cellpadding="0" cellspacing="0">
            <tbody>
                <tr>
                    <th>Group</th>
                    <th class="tblServHdr">
                        <span>Type1</span>
                    </th>
                    <th class="tblServHdr">
                        <span>Type2</span>
                    </th>
                    <th class="tblServHdr">
                        <span>Type3</span>
                    </th>
                </tr>
                <tr>
                    <td rowspan=3>Group-A</td>
                    <td>$1.0</td>
                    <td>$0.0</td>
                    <td>$0.0</td>
                </tr>
                <tr>
                    <td>$2.0</td>
                    <td>$0.0</td>
                    <td>$0.0</td>
                </tr>
                <tr>
                    <td>$3.0</td>
                    <td>$0.0</td>
                    <td>$0.0</td>
                </tr>
                <tr>
                    <td rowspan=2>Group-B</td>
                    <td>$1.0</td>
                    <td>$0.0</td>
                    <td>$0.0</td>
                </tr>
                <tr>
                    <td>$2.0</td>
                    <td>$0.0</td>
                    <td>$0.0</td>
                </tr>
                <tr>
                    <td>Group-C</td>
                    <td>$0.0</td>
                    <td>$0.0</td>
                    <td>$0.0</td>
                </tr>
                <tr>
                    <td>Total</td>
                    <td>$0.0</td>
                    <td>$0.0</td>
                    <td>$0.0</td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="Save"></input>
                    </td>
                    <td>
                        <input type="button" value="Create "></input>
                    </td>
                    <td>
                        <input type="button" value="Delete"></input>
                    </td>
                </tr>
            </tbody>

        </table>

Demo