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