怎么用CSS设置html中的表格边框样式 / 木子杰软件教程

table表格边框如果不做设置，出来很不美观。

操作方法

01

一个普通的表格如下：
02

相关设置单元格边距(表格填充)(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> 效果如图
03

文字不居中？设置一下就好了。代码如下： <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> 为了方便一点我直接把样式写在上面了。
04

效果如图：
05

每一个表格都是一个完整的方框，如果想要线条更细。看如下代码： <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> 这段代码主要是针对某些表格做了些设置，让某些表格不显示出来。

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

操作方法

相关推荐