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

如题所述

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

效果图如下:

温馨提示:内容为网友见解,仅供参考
第1个回答  2016-07-30
方法/步骤

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本回答被网友采纳
相似回答