TA的每日心情 | 开心 2021-12-13 21:45 |
---|
签到天数: 15 天 [LV.4]偶尔看看III
|
有时,需要合并单元格,即有的元素占用两行,有的元素占用两列。这时,用到了以下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;
- }
复制代码
|
|