CSS表格 单元格占两行

html-css030

CSS表格 单元格占两行,第1张

CSS表格单元格占两行可以参考以下的代码:

<!-- 这是占两行的 -->

<table border=1>

<tr><td rowspan="2">单元格占两行的</td><td>......</td></tr>

<tr><td>....</td><tr>

</table>

<!-- 这是占两列的 -->

<table border=1>

<tr><td colspan="2">单元格占两列的</td></tr>

<tr><td>..........</td><td>..........</td><tr>

</table>

扩展资料:

CSS 表格属性

表格边框

如需在 CSS 中设置表格边框,请使用 border 属性。

下面的例子为 table、th 以及 td 设置了蓝色边框:

table, th, td

{

border: 1px solid blue

}

请注意,上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。

如果需要把表格显示为单线条边框,请使用 border-collapse 属性。

折叠边框

border-collapse 属性设置是否将表格边框折叠为单一边框:

table

{

border-collapse:collapse

}

table,th, td

{

border: 1px solid black

}

参考资料来源:百度百科-CSS表格

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>