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

最新推荐文章于 2024-07-05 22:38:16 发布

孙文奇

最新推荐文章于 2024-07-05 22:38:16 发布

阅读量4.4w

点赞数 1

分类专栏： HTML&CSS 文章标签： html css border xhtml table

本文链接：https://blog.csdn.net/wenqisun/article/details/6661685

版权

HTML&CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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