作者:电脑信息网日期:
返回目录:设置问题
需要准百备的材料分别有:电脑、浏览器、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属性即可,具体代码如下:
<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、这段代码主要是针对某些表格做了些设置,让某些表格不显示出来。