在HTML中如何设置边框?

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、这段代码主要是针对某些表格做了些设置，让某些表格不显示出来。

1.所有的 HTML 元素本质上是小的矩形块，代表着某一小块区域。

有三个影响HTML元素布局的重要属性：padding(内边距)、margin(外边距)、border(边框)。

元素的 padding 控制元素内容 content和元素边框 border 之间的距离

在这儿，我们可以看到绿方块和红方块都位于黄方块之中，但是红方块比绿方块具有更大的 padding。

当你加大绿方块的 padding, 它将扩大元素内容和元素边框的距离。

<style>

.injected-text {

margin-bottom: -25px

text-align: center

}

.box {

border-style: solid

border-color: black

border-width: 5px

text-align: center

}

.yellow-box {

background-color: yellow

padding: 10px

}

.red-box {

background-color: red

padding: 20px

}

.green-box {

background-color: green

padding: 10px

}

</style>

<h5 class="injected-text">margin</h5>

<div class="box yellow-box">

<h5 class="box red-box">padding</h5>

<h5 class="box green-box">padding</h5>

</div>

2.元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离

3.如果你将一个元素的 margin 设置为负值，元素将会变大。

4.有时你想要自定义元素，使它的每一个边具有不同的 padding。

CSS 允许你使用 padding-top、padding-right、padding-bottom 和 padding-left来控制元素上右下左四个方向的 padding

<style>

.green-box {

background-color: green

padding-top: 40px

padding-right: 20px

padding-bottom: 20px

padding-left: 40px

}

</style>

<div class="box yellow-box">

<h5 class="box red-box">padding</h5>

<h5 class="box green-box">padding</h5>

</div>

5.有时你想要自定义元素，使它的每一个边具有不同的 margin。

CSS 允许你使用 margin-top、margin-right、margin-bottom 和 margin-left 来控制元素上右下左四个方向的 margin。

<style>

.green-box {

background-color: green

margin-top: 40px

margin-left: 40px

margin-right: 20px

margin-bottom: 20px

}

</style>

<div class="box yellow-box">

<h5 class="box red-box">padding</h5>

<h5 class="box green-box">padding</h5>

</div>

6.除了分别指定元素的 padding-top、padding-right、padding-bottom 和 padding-left 属性外，你还可以集中起来指定它们，举例如下：

padding: 10px 20px 10px 20px

这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左

<style>

.red-box {

background-color: red

padding: 20px 40px 20px 40px

}

</style>

7.除了分别指定元素的 margin-top、margin-right、margin-bottom 和 margin-left 属性外，你还可以集中起来指定它们，举例如下：

margin: 10px 20px 10px 20px

这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左

<style>

.red-box {

background-color: red

margin: 20px 40px 20px 40px

}

</style>

在使用表单设计调查表时，为了减少用户的 *** 作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。请看下面的例子:

语法：

<input type="radio/checkbox" value="值"name="名称" checked="checked"/>

1、type:

当 type="radio" 时，控件为单选框

当 type="checkbox" 时，控件为复选框

2、value：提交数据到服务器的值（后台程序PHP使用）

3、name：为控件命名，以备后台程序 ASP、PHP 使用

4、checked：当设置 checked="checked" 时，该选项被默认选中

注意:同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。

---