css中怎样让表格合并单元格

html-css016

css中怎样让表格合并单元格,第1张

比如<td rowspan="2">microsoft</td>，rowspan是向下合并一个，加上自身就是两个

比如<td colspan="2">stephen elop</td>，colspan是向右合并

希望可以帮到你

colspan的作用是指定单元格横向跨越的行数。

rowspan的作用是指定单元格纵向跨越的行数。

都是要直接加在tr th td上面的

<table border= "1 " width= "200 " >

<tr>

<td colspan="4" >ss

</td>

</tr>

<tr>

<td width= "25% ">　 </td>

<td width= "25% ">　 </td>

<td width= "25% ">　 </td>

<td width= "25% ">　 </td>

</tr>

<tr>

<td width= "25% "rowspan="2">　 </td>

<td width= "25% ">　 </td>

<td width= "25% ">　 </td>

<td width= "25% ">　 </td>

</tr>

<tr>

<td width= "25% ">　 </td>

<td width= "25% " rowspan="3">　 </td>

<td width= "25% ">　 </td>

</tr>

<tr>

<td width= "25% " colspan="2" >　 </td>

<td width= "25% ">　 </td>

</tr>

<tr>

<td width= "25% ">　 </td>

<td width= "25% ">　 </td>

<td width= "25% ">　 </td>

</tr>

</table>

<div class="3u" style="float:leftwidth:300pxheight:300pxbackground-color:#eee">

左

</div>

<div class="3u" style="float:leftwidth:300px">

<section>

<h2 class="title">Fusce ultrices fringilla</h2>

<p class="subtitle">Pellentesque pede. Donec pulvinar metus. In eu odio at lectus pulvinar mollis. </p>

<p>Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Suspendisse dictum porta lectus. Donec placerat odio vel elit.</p>

<p class="button-style2"><a href="#">More</a></p>

</section>

</div>

<div class="3u" style="float:leftwidth:300px">

<section>

<h2 class="title">Nulla luctus eleifend</h2>

<p class="subtitle">In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula.</p>

<p>Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Suspendisse dictum porta lectus. Donec placerat odio vel elit.</p>

<p class="button-style2"><a href="#">More</a></p>

</section>

</div>

<div class="3u" style="float:leftwidth:300pxheight:300pxbackground-color:#eee">

右

</div>

<div style="clear:both"></div>