HTML中 table 中的跨行跨列怎么拼写?

html-css013

HTML中 table 中的跨行跨列怎么拼写?,第1张

Html中的table元素中,colspan 属性规定单元格可横跨的列数即跨列,rowspan 属性规定单元格可横跨的行数跨行。

两个属性的代码实例如下:

1、表格单元横跨两列的表格:

<table border="1">

  <tr>

    <th>Month</th>

    <th>Savings</th>

  </tr>

  <tr>

    <td colspan="2">January</td><!--设置横跨两列-->

  </tr>

  <tr>

    <td colspan="2">February</td><!--设置横跨两列-->

  </tr>

</table>

结果:

2、表格单元横跨两行的表格:

<table border="1">

  <tr>

    <th>Month</th>

    <th>Savings</th>

  </tr>

  <tr>

    <td>January</td>

    <td>$100.00</td>

    <td rowspan="2">$50</td><!--设置横跨两行-->

  </tr>

  <tr>

    <td>February</td>

    <td>$10.00</td>

  </tr>

</table>

表格单元横跨两列的表格:

<table border="1">

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td colspan="2">January</td>

</tr>

<tr>

<td colspan="2">February</td>

</tr>

</table>

表格单元横跨两行的表格:

<table border="1">

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

<td>$100.00</td>

<td rowspan="2">$50</td>

</tr>

<tr>

<td>February</td>

<td>$10.00</td>

</tr>

</table>

不设定格子的宽和高会是什么样的?

Chome 上的效果观察出来你不觉得 1 和 5 的宽度超过了 2 的 2 倍么?IE11 上看到的宽度反而是正常的,只是 IE 11 的高度不正常。你尝试一下把浏览器的窗口放大点看尺寸是否会自动调节。

因此这看上去是总尺寸被自动调节了的效果,需要明确的设定 table 的尺寸,或者先不设定任何尺寸看浏览器怎么自动调节,找到规律后再来设置。