表格细边框的CSS样式怎么设置？

html-css013

表格细边框的CSS样式怎么设置？,第1张

指定的<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表示表格的两边框合并为一条即可。

内嵌标签： thead (可选)、 tbody (可选)、td、tr、colgroup 、 caption (可选)

属性：align ，bgcolor ，bordercolor，border ，cellpadding ，cellspacing ，frame ，width ，summary ，rules 。

现在的table的属性基本已经过时，都使用css进行设置table样式。

1.border-collapsecollapse | separate

collapse : border线合并

separate： border线分隔，默认属性

ps: 使用collapse 此属性时， border-spacing 、empty-cells和 border-radius 失效 ，无任何效果。

2.border-spacinghorizontal <length >| vertical <length >

3.vertical-align 设置内容与图片位置

4.table-layout auto | fixed

ps: auto 表格布局自适应宽度

fixed 表格布局固定宽度，文字内容等可能会溢出

5.caption-side 针对于caption标签的css样式设置

6.empty-cells 但单元格内无内容时候，可设置隐藏

参考：

https://www.sitepoint.com/community/t/table-format-using-css-border-issue/36882/3

https://css-tricks.com/almanac/properties/b/border-collapse/

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Table

CSS（层叠样式表）级联样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML

（标准通用标记语言的一个子集）等文件样式的计算机语言。

有三种方法可以在站点网页上使用样式表：

外联式Linking（也叫外部样式）：将网页链接到外部样式表。

嵌入式Embedding（也叫内页样式）：在网页上创建嵌入的样式表。

内联式Inline（也叫行内样式）：应用内嵌样式到各个网页元素。

在Dreamweaver 8中，可以在开始弹出框中点击新建CSS文件。也可以在最上面的菜单栏里占击

文件，新建。在弹出框中选择CSS文件就可以了。