您的位置：首页 > Web前端 > CSS

Table控件及内容居中

2016-04-16 13:24 621 查看

Table控件居中

整个Table控件居中

方法一

<head>
<style type="text/css">
table
{
width:40%;
margin:0 30%;/*40+30+30=100,所以居中*/
}
</style>
</head>
<body >
<form>
<h1>表格</h1>
<div>
<table>
<tr>
<th>FirstName</th>
<th>LastName</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
</tr>
</table>
</div>
</form>
</body>

方法二

<head>
<style type="text/css">
table
{
width:40%;
margin:auto;/*浏览器自动解释为居中，没有验证所有浏览器都支持*/
}
</style>
</head>
<body >
<form>
<h1>表格</h1>
<div>
<table>
<tr>
<th>FirstName</th>
<th>LastName</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
</tr>
</table>
</div>
</form>
</body>

方法三

<head>
<style type="text/css">
table
{
width:40%;
}
</style>
</head>
<body >
<form>
<h1>表格</h1>
<div>
<center><!--Html中的居中-->
<table>
<tr>
<th>FirstName</th>
<th>LastName</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
</tr>
</table>
</center>
</div>
</form>
</body>

内容居中

<head>
<style type="text/css">
table
{
width:40%;
}
td,th
{
border:1px solid green;
border-collapse:collapse;/*是否将边框合成一个*/
padding:5px;
border-spacing:10px;
text-align:center;/*水平对齐方式*/
vertical-align:bottom;/*垂直对齐方式*/
}
</style>
</head>
<body >
<form>
<h1>表格</h1>
<div>
<table>
<tr>
<th>FirstName</th>
<th>LastName</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
</tr>
</table>
</div>
</form>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Html和CSS

相关文章推荐

新的分享

章节导航