CSS表格属性:
显示表格边框有时候特别重要,它能让表格结构更清晰。
默认的表格有双边框,这是因为表和th/ td元素有独立的边界。border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开。
指定的<table>为细边框,把<table>放在<div>中即可。
一、首先新建表格,代码如下:
<table width="500" border="1"> <tr><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td></tr><tr><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td></tr><tr> <td>&nbsp</td><td>&nbsp</td><td>&nbsp</td></tr</table>。
二、在table里加css样式,代码如下:
<table width="500" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse"> <tr><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td </tr><tr><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td></tr><tr><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td></table>。
三、单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间。单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离,border-collapse:collapse表示表格的两边框合并为一条即可。
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表格