htmledit_views">
原文地址为:
HTML&CSS 高级html" title=表格>表格 html" title=合并>合并单元格
转载请注明本文地址: HTML&CSS 高级html" title=表格>表格 html" title=合并>合并单元格
htmledit_views">
有时,需要html" title=合并>合并单元格,即有的元素占用两行,有的元素占用两列。这时,用到了以下XHTML属性:
rowspan
colspan
一个简单的例子:
HTML代码如下:
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代码如下:
html" title=css>css">table {
html" title=border>border-collapse: collapse;
html" title=border>border: 1px solid black;
}
th {
text-align: left;
html" title=border>border: 1px solid black;
padding: 0.2em;
}
td {
html" title=border>border: 1px solid black;
padding: 0.2em;
}
转载请注明本文地址: HTML&CSS 高级html" title=表格>表格 html" title=合并>合并单元格