CSS表格 单元格占两行

html-css016

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表格

1、新建一个html文件,命名为test.html,用于讲解css如何定义表格内外边框颜色各不相同。

2、在test.html文件内,使用table标签创建一个表格,用于测试。

3、在test.html文件内,设置table标签的class属性为otwo。

4、在css标签内,通过class定义表格的外边框的颜色,例如,这里使用border属性设置外边框颜色为红色。

5、在css标签内,再通过class定义表格内边框的颜色,即td单元格的颜色,例如,这里设置为蓝色。