如何在html中使用colspan,rowspan或css创建表?

时间:2017-06-15 07:11:35

标签: html css

enter image description here

如何使用HTML和CSS创建类似上面示例的表格。我尝试过以下方法:

<table>
    <tr>
    <th>XXX</th>
    <th>XXX</th>
    </tr>
    <tr>
    <td>XXX</td>
    <td>XXX</td>
    </tr>
    <tr>
    <td>XXX</td>
    <td>XXX</td>
    </tr>
    <tr>
    <td>XXX</td>
    <td>XXX</td>
    </tr>
</table>

但它不起作用。有人可以帮忙吗?

2 个答案:

答案 0 :(得分:2)

像这样的东西

<table border="1" cellpadding="10" cellspacing="0" style="width:100%">
  <tr>
    <td style="width:50%">&nbsp;</td>
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td rowspan="2">&nbsp;</td>
    <td>&nbsp;</td>
    <td rowspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td rowspan="2">&nbsp;</td>
    <td>&nbsp;</td>
    <td rowspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td colspan="2">&nbsp;</td>
  </tr>
</table>

答案 1 :(得分:0)

<table>
<tr>
<th colspan="2">XXX</th>
<th colspan="2">XXX</th>
</tr>
<tr>
<td colspan="2">XXX</td>
<td colspan="2">XXX</td>
</tr>
<tr>
<td colspan="2">XXX</td>
<td rowspan="2">XXX</td>
</tr>
<tr>
<td colspan="2">XXX</td>
<td>XXX</td>
</tr>
<tr>
<td colspan="2">XXX</td>
<td rowspan="2">XXX</td>
</tr>
<tr>
<td>XXX</td>
<td>XXX</td>
</tr>
<tr>
<td colspan="2">XXX</td>
<td rowspan="2">XXX</td>
</tr>