怎么用CSS设置html中的表格边框样式

html-css020

怎么用CSS设置html中的表格边框样式,第1张

用CSS设置html中的表格边框样式，要设计的样式非常多，下面举例说明

工具：

记事本

浏览器

方法如下：

CSS代码：

table-a table{border:1px solid #F00}

<!--关键代码：设置表格边框为1像素，实体，红色-->

HTML代码：

<div class="table-a">

<table width="400" border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="105">站名</td>

<td width="181">网址</td>

<td width="112">说明</td>

</tr>

<tr>

<td>网站名称</td>

<td>具体网址</td>

<td>网站说明</td>

</tr>

<tr>

<td>网站名称</td>

<td>具体网址</td>

<td>网站说明</td>

</tr>

</table>

</div>

效果图如下：

这是设置的边框，将边框的样式设置为 dashed就行，举个例子：

table{

width: 320px

height: 320px

}

tr td{

border:1px dashed #333

}

可以这样写

CSS表格属性用于设置HTML表格的样式，HTML表格由 <table></table> 标签嵌套 <tbody>， <tr>， <td>等标签组成，一个HTML表格默认至少包含table，tbody，tr，td四个元素。

CSS表格属性：

显示表格边框有时候特别重要，它能让表格结构更清晰。

默认的表格有双边框，这是因为表和th/ td元素有独立的边界。border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开。