HTML&CSS 高级表格 合并单元格

有时，需要合并单元格，即有的元素占用两行，有的元素占用两列。这时，用到了以下XHTML属性：

rowspan

colspan

一个简单的例子：

HTML代码如下：

<table>      <tr>        <th rowspan="2">Date</th>        <th colspan="2">Event Details</th>        <th rowspan="2">Contact</th>      </tr>      <tr>        <th>Event Description</th>        <th>Approximate Cost</th>      </tr>      <tr>        <td>12 July</td>        <td>Committee meeting, deciding on next year's trips</td>        <td>N/A</td>        <td>Bob Dobalina</td>      </tr>      <tr>        <td>19 July</td>        <td>7-day trip to Hurghada (package deal) - limited spaces</td>        <td>£260 pp (all inclusive), departing Luton</td>        <td>Bob Dobalina</td>      </tr>      <tr>        <td>5 August</td>        <td>Ocean & Sports Diver Theory Course</td>        <td>Call for details</td>        <td>Jeff Edgely</td>      </tr>      <tr>        <td>12 August</td>        <td>Murder Mystery Weekend, Cotswolds (no diving!)</td>        <td>£65 pp (accommodation included)</td>        <td>Jill Smith</td>      </tr>    </table>

CSS代码如下：

table {        border-collapse: collapse;           border: 1px solid black;       }        th {        text-align: left;        border: 1px solid black;        padding: 0.2em;      }      td {        border: 1px solid black;        padding: 0.2em;      }