<small id='ht1esi52'></small><noframes id='4mc1yqsn'>

  • <tfoot id='gdaprgq9'></tfoot>
  • 您的位置:荆州电脑信息网 > 设置问题 > 在HTML中如何设置边框?

    在HTML中如何设置边框?

    作者:电脑信息网日期:

    返回目录:设置问题


    需要准备的材料分别有:电脑、浏览器、html编辑器。

    1、首先,打开html编辑器,新建html文件,例如:index.html。

    2、在index.html中的<body>标签中,输入html代码:

    <table>

    <tr><td>1</td><td style="border: 1px solid black">2</td><td>3</td></tr>

    <tr><td>4</td><td>5</td><td>6</td></tr>

    </table>

    3、浏览器运行index.html页面,此时表格内只有第2个单元格有线框显示



    在html当中,为标签设置底部边框,采用border-bottom的CSS属性即可,具体代码如下:

    1. <style>

    2.con {

    3.  border-bottom: 5px solid #000;4.    }5.</style>6.<div class="con">标签底部有5像素黑色边框</div>




    HTML中设置边框方法:

    方法/步骤

    1、一个普通的表格如下:

    相关设置

    2、单元格边e799bee5baa6e79fa5e98193e58685e5aeb9332距(表格填充)(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、每一个表格都是一个完整的方框,如果想要线条更细。

    6、看如下代码:

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

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

      <tbody id='nv5vggzv'></tbody>

    <small id='0b81qxhe'></small><noframes id='bcaqwk67'>

    • <tfoot id='ds13fgpx'></tfoot>
    • 相关阅读