HTML中如何将表格居中排列
发布网友
发布时间:2022-03-30 19:24
我来回答
共5个回答
热心网友
时间:2022-03-30 20:53
这位网友你好,你可以将两个表格分别设置为左浮动,然后用一个大的div将两个表格包起来,设置大div左右margin为auto即可。
如果不会请贴代码。
热心网友
时间:2022-03-30 22:11
刚写的,能达到你的要求。代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格居中</title>
</head>
<body>
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="50%">
<table width="100%%" border="1" cellspacing="1" cellpadding="1">
<tr>
<td colspan="3" align="center">第一个表格</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table></td>
<td width="50%">
<table width="100%%" border="1" cellspacing="1" cellpadding="1">
<tr>
<td colspan="3" align="center">第二个表格</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
热心网友
时间:2022-03-30 23:46
在表格标签前面加上<center>,表格标签后面加上</center>就可以了。
热心网友
时间:2022-03-31 01:37
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
RunJS 演示代码
</title>
<style>
.content{
border:1px solid black;
width:500px;
margin:auto;
}
table {
border:1px solid black;
border-collapse:collapse;
position: relative;
height: 100px;
}
td {
border:1px solid black;
}
.t1 {
width: 200px;
}
.t2 {
width: 300px;
margin: -100px 0px 0px 200px;
}
</style>
</head>
<body>
<div class='content'>
<table class="t1">
<tr>
<td>
11
</td>
</tr>
</table>
<table class="t2">
<tr>
<td>
22
</td>
</tr>
</table>
</div>
</body>
</html>
热心网友
时间:2022-03-31 03:45
<style type="text/css">
#biaoge{
margin:6px;
padding:2px;
text-align:center;
}
#biaoge table{
margin:0px auto;
}
</style>
<div id="biaoge">
<table>
<tr><td>单元格1</td><td>单元格2</td></tr>
<tr><td>单元格3</td><td>单元格4</td></tr>
<tr><td>单元格5</td><td>单元格6</td></tr>
<tr><td>单元格7</td><td>单元格8</td></tr>
</table>
</div>