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

原文地址为： 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;
      }

转载请注明本文地址： HTML&CSS 高级表格 合并单元格