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

最新推荐文章于 2023-09-25 15:24:06 发布

原创最新推荐文章于 2023-09-25 15:24:06 发布 · 4.4w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #border #xhtml #table

HTML&CSS 专栏收录该内容

10 篇文章

订阅专栏

本文展示了如何在 HTML 中使用 rowspan 和 colspan 属性来合并单元格，通过一个具体的例子来说明其应用。

有时，需要合并单元格，即有的元素占用两行，有的元素占用两列。这时，用到了以下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;
      }