这个效果一般不用边框来设置的，而是用一个标签或者竖线来实现的
<style>nav span{ display:block;height: 20px;width: 1px;background: #333;}</style><ul class="nav">
<li><a href="">a</a></li>
<li><span></span></li>
<li><a href="">b</a></li>
</ul>
<!-- 或者 ><!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
pone {
border-style: solid;
border-width: medium;
border-color: red;
width: 522px;
}
</style>
</head>
<body>
<center>
<h1><font color="#FF0000">Tutorial 1</font></h1>
</center>
<center>
<p class="one">What is your favourite <strong>Doctor</strong> For me, 10<sup>th</sup> Doctor is the best!!</p>
<center>
</center>
</ br>
<table>
<tr>
<td><center>
<strong><font color="#0000FF">Series Lead</font></strong>
</center></td>
<td><center>
<strong><font color="#0000FF">Internation</font></strong>
</center></td>
<td><center>
<strong><font color="#0000FF">Tenure</font></strong>
</center></td>
</tr>
<tr>
<td>Christopher Eccleston</td>
<td>Ninth Doctor</td>
<td>2005</td>
</tr>
<tr>
<td>David Tennant</td>
<td>Tenth Doctor</td>
<td>2005-2010</td>
</tr>
<tr>
<td>Matt Smith</td>
<td>Eleventh Doctor</td>
<td>2010-2013</td>
</tr>
</table>
<p class="one">Have you even seen the <strong>TARDIS</strong></p>
<img style="margin:20px auto 0;" src="Tigerjpg" width="800"/>
</body>
</html>
src="Tigerjpg" 现在这个我是跟HTML文件同时放在桌面的 你别按部就班啊
要是你放在images文件夹里，那就是src="image/Tigerjpg"
这边打开的时候内容是正常显示在居中位置的。再检查是不是其他地方的样式影响到了container里面的文本吧。container{
height:110px;
border:5px dashed #ccc;
width:80%;
background-color:#84AF9B;
color:rgb(209,128,36);
font-family:STXinwei;
align-items:center;
text-align:center;
line-height:110px;
margin:auto;
}<table width="X" height="Y" border="1" style="margin-top:50%; margin-left:50%; position:relative;
left:-X/2 px; top:-Y/2 px;">先让表的原点（左上角）居中，然后再相对移动就可以让表格的中心在页面的中心了。
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: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、这段代码主要是针对某些表格做了些设置，让某些表格不显示出来。
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: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
每一个表格都是一个完整的方框，如果想要线条更细。
看如下代码：
<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>
这段代码主要是针对某些表格做了些设置，让某些表格不显示出来。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）