Question

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

Answer 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>

效果图如下：

Answer 2

方法/步骤

1
一个普通的表格如下：

2
相关设置
单元格边距(表格填充)(cellpadding) -- 代表单元格外面距离,用于隔开单元格与单元格之间的空间 单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离。
具体代码如下：
<table
border='1'cellspacing="0" cellpadding="0" > <tr> <td
width="200">1</td> <td width="200">2</td> <td
width="200">3</td> </tr> <tr>
<td>a</td> <td>b</td> <td>c</td>
</tr> <tr> <td>中国</td> <td>我</td>
<td>爱你</td> </tr> </table>
效果如图

3
文字不居中？
设置一下就好了。
代码如下：
<style

type="text/css">.onecenter{text-align:center;width:200px;}</style><table
border='1'cellspacing="0" cellpadding="0" > <tr> <td
class='onecenter'>1</td> <td
class='onecenter'>2</td> <td
class='onecenter'>3</td> </tr> <tr> <td
class='onecenter'>a</td> <td class='onecenter'>
b</td> <td class='onecenter' > c</td> </tr >
<tr> <td class='onecenter' >中国</td> <td
class='onecenter' >我</td> <td class='onecenter'
>爱你</td> </tr> </table>
为了方便一点我直接把样式写在上面了。

4
效果如图：

5
每一个表格都是一个完整的方框，如果想要线条更细。
看如下代码：
<style

type="text/css">.onecentertext-align:center;width:200px;height:50px;}#sebackground-color:#006699
;padding:20px;color:#FFF;}</style><table
border='1'cellspacing="0" cellpadding="20" > <tr> <td
class='onecenter'>1</td> <td class='onecenter'
style='border-left:0px;border-right:0px;' >2</td> <td
class='onecenter'>3</td> </tr> <tr> <td
class='onecenter'>a</td> <td class='onecenter'
style='border:0px'> b</td> <td class='onecenter' >
c</td> </tr > <tr id='se'> <td class='onecenter'
>中国</td> <td class='onecenter' >我</td> <td
class='onecenter' >爱你</td> </tr> </table>
这段代码主要是针对某些表格做了些设置，让某些表格不显示出来。

http://jingyan.baidu.com/article/15622f247e6b06fdfdbea54f.html