在HTML中如何设置边框?

html-css012

在HTML中如何设置边框?,第1张

HTML中设置边框方法:

方法/步骤

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:centerwidth: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、每一个表格都是一个完整的方框,如果想要线条更细。

6、看如下代码:

<style type="text/css">.onecentertext-align:centerwidth:200pxheight:50px}#sebackground-color:#006699 padding:20pxcolor:#FFF}</style><table border='1'cellspacing="0" cellpadding="20" > <tr> <td class='onecenter'>1</td> <td class='onecenter' style='border-left:0pxborder-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>

7、这段代码主要是针对某些表格做了些设置,让某些表格不显示出来。

div设置外边框相关如下:\x0d\x0aborder-color:#000设置4边边框颜色为黑色;\x0d\x0aborder-color:+颜色值,即可设置对象边框颜色;\x0d\x0aborder-left-color:#000设置左边框颜色为黑色;\x0d\x0aborder-right-color:#000设置右边框颜色为黑色;\x0d\x0aborder-top-color:#000设置上边框颜色为黑色;\x0d\x0aborder-bottom-color:#000设置下边框颜色为黑色;\x0d\x0a条件:必须设置对象边框存在,设置边框宽度必须大于或等于1px,边框颜色才会显示并有存在意义。\x0d\x0a.divcss5{border-style:solidborder-width:1pxborder-color:#000}\x0d\x0a这样就设置对象边框为实线边框,参数就是solid,边框宽度(厚度)为1px,边框颜色为黑色,这样设置边框颜色才会生效。

在边框上加文字可以用以下办法实现:

<!DOCTYPE HTML>

<html>

<body>

<form>

<fieldset>

<legend>在边框上的字</legend>

可以输入内容:<input type="text" />

随便输入内容:<input type="text" />

</fieldset>

</form>

</body>

</html>

扩展资料:

编辑方式:

HTML其实是文本,它需要浏览器的解释,它的编辑器大体可以分为以下几种:

1、基本文本、文档编辑软件,使用微软自带的记事本或写字板都可以编写,当然,如果你用WPS来编写,也可以。不过存盘时请使用.htm或.html作为扩展名,这样就方便浏览器认出直接解释执行了。

2、半所见即所得软件,如:FCK-Editer、E-webediter等在线网页编辑器;尤其推荐:SublimeText代码编辑器(由JonSkinner开发,SublimeText2收费但可以无限期试用)。

3、所见即所得软件,使用最广泛的编辑器,完全可以一点不懂HTML的知识就可以做出网页,如:AMAYA(出品单位:万维网联盟);FRONTPAGE(出品单位:微软);Dreamweaver(出品单位Adobe)。

MicrosoftVisualStudio(出品公司:微软):其中所见即所得软件与半所见即所得的软件相比,开发速度更快,效率更高,且直观的表现更强。任何地方进行修改只需要刷新即可显示。缺点是生成的代码结构复杂,不利于大型网站的多人协作和精准定位等高级功能的实现。

参考资料来源:百度百科-HTML