在学习html css js，在编写html静态的页面中遇到了问题，需要帮助
想把这几个输入框放在中上方，而且把扫描更新都横过来，尝试过dir但是没效果，不知道该怎么操作了，代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script type="text/javascript" src="script/bootstrap.js"></script>
<script type="text/javascript" src="script/bootstrap.min.js"></script>
<script type="text/javascript" src="script/npm.js"></script>
<link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<style>
img{
display: block;
}
body {
margin: 2%, 20%;
border: 2px;
height: 800px;
}
body,html,span{
margin:0;
border:0;
padding:0;
font-family: Tahoma, Geneva, sans-serif;
font-style:normal;
}
table{
height: 100px;
width: 100px;
margin-top: 10%;
}
</style>
</head>
<body
style="background-image: url('image/loginbg.jpg');background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;">
<div
style="height:300px; text-align: center;width: 200px;padding-top: 25%;padding-right: 25%;padding-bottom: 25%;padding-left: 25%;margin: 25% 25%;">
<!---- <h1 style="background-color: bisque;text-align: center;">登陆界面</h1>-->
<table style="margin-top: 20%;margin-left: 1px;">
<tr>
<td>
<!---- <input type="text" class="caption">
<input type="text" class="pre">-->
<input type="text"placeholder="请扫入工位、设备" style="background-color:rgb(0, 162, 255);-index:-10;padding-left:45px;border:5px;
font-size:24px;height: 30px;border-radius: 10px;margin-left: 10px; " >
<!--<button type="button"class="pre code" >扫描</button>-->
</td>
<td><span class="blockquote" dir="ltr" >扫描</span></td>
</tr>
<tr>
<td>
<input type="text" placeholder="请扫入工牌号"class="" style="background-color:rgb(0, 162, 255);z-index:-10;padding-left:45px;border:10px;
font-size:24px;height: 30px;border-radius: 10px;margin-left: 10px; ">
</td>
<td><span >扫描</span></td>
</tr>
<tr>
<td>
<input type="text" placeholder="请输入服务器" style="background-color:rgb(0, 162, 255);-index:-10;padding-left:45px;border:5px;
font-size:24px;height: 30px;border-radius: 10px;margin-left: 10px; ">
</td>
<td>
<span dir="ltr" >更新</span>
</td>
</tr>
</table>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script type="text/javascript" src="script/bootstrap.js"></script>
<script type="text/javascript" src="script/bootstrap.min.js"></script>
<script type="text/javascript" src="script/npm.js"></script>
<link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<style>
img{
display: block;
}
body {
margin: 2%, 20%;
border: 2px;
height: 800px;
}
body,html,span{
margin:0;
border:0;
padding:0;
font-family: Tahoma, Geneva, sans-serif;
font-style:normal;
}
table{
height: 100px;
width: 100px;
margin-top: 10%;
}
</style>
</head>
<body
style="background-image: url('image/loginbg.jpg');background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;">
<div
style="height:300px; text-align: center;position: absolute;top: 25%;left: 50%;transform: translateX(-50%);">
<!---- <h1 style="background-color: bisque;text-align: center;">登陆界面</h1>-->
<table style="margin-top: 20%;margin-left: 1px;">
<tr>
<td>
<!---- <input type="text" class="caption">
<input type="text" class="pre">-->
<input type="text"placeholder="请扫入工位、设备" style="background-color:rgb(0, 162, 255);-index:-10;padding-left:45px;border:5px;
font-size:24px;height: 30px;border-radius: 10px;margin-left: 10px; " >
<!--<button type="button"class="pre code" >扫描</button>-->
</td>
<td><span class="blockquote" dir="ltr" style='white-space: nowrap;'>扫描</span></td>
</tr>
<tr>
<td>
<input type="text" placeholder="请扫入工牌号"class="" style="background-color:rgb(0, 162, 255);z-index:-10;padding-left:45px;border:10px;
font-size:24px;height: 30px;border-radius: 10px;margin-left: 10px; ">
</td>
<td><span class='ltr' style='white-space: nowrap;'>扫描</span></td>
</tr>
<tr>
<td>
<input type="text" placeholder="请输入服务器" style="background-color:rgb(0, 162, 255);-index:-10;padding-left:45px;border:5px;
font-size:24px;height: 30px;border-radius: 10px;margin-left: 10px; ">
</td>
<td>
<span dir="ltr" style='white-space: nowrap;'>更新</span>
</td>
</tr>
</table>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script type="text/javascript" src="script/bootstrap.js"></script>
<script type="text/javascript" src="script/bootstrap.min.js"></script>
<script type="text/javascript" src="script/npm.js"></script>
<link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<style>
img{
display: block;
}
body {
margin: 2%, 20%;
border: 2px;
height: 800px;
}
body,html,span{
margin:0;
border:0;
padding:0;
font-family: Tahoma, Geneva, sans-serif;
font-style:normal;
}
table{
/* height: 100px; */
/* width: 100px; */
/* margin-top: 10%; */
}
</style>
</head>
<body
style="background-image: url('image/loginbg.jpg');background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;">
<div
style="height:300px; text-align: center;padding-top: 10%;margin:0 auto;width: 400px; ">
<!---- <h1 style="background-color: bisque;text-align: center;">登陆界面</h1>-->
<table style="margin-top: 20%;margin-left: 1px;">
<tr>
<td>
<!---- <input type="text" class="caption">
<input type="text" class="pre">-->
<input type="text"placeholder="请扫入工位、设备" style="background-color:rgb(0, 162, 255);-index:-10;padding-left:45px;border:5px;
font-size:24px;height: 30px;border-radius: 10px;margin-left: 10px; " >
<!--<button type="button"class="pre code" >扫描</button>-->
</td>
<td><span class="blockquote" dir="ltr" >扫描</span></td>
</tr>
<tr>
<td>
<input type="text" placeholder="请扫入工牌号"class="" style="background-color:rgb(0, 162, 255);z-index:-10;padding-left:45px;border:10px;
font-size:24px;height: 30px;border-radius: 10px;margin-left: 10px; ">
</td>
<td><span >扫描</span></td>
</tr>
<tr>
<td>
<input type="text" placeholder="请输入服务器" style="background-color:rgb(0, 162, 255);-index:-10;padding-left:45px;border:5px;
font-size:24px;height: 30px;border-radius: 10px;margin-left: 10px; ">
</td>
<td>
<span dir="ltr" >更新</span>
</td>
</tr>
</table>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script type="text/javascript" src="script/bootstrap.js"></script>
<script type="text/javascript" src="script/bootstrap.min.js"></script>
<script type="text/javascript" src="script/npm.js"></script>
<link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<style>
img {
display: block;
}
body {
margin: 2%, 20%;
border: 2px;
height: 800px;
}
body,
html,
span {
margin: 0;
border: 0;
padding: 0;
font-family: Tahoma, Geneva, sans-serif;
font-style: normal;
}
table {
height: 100px;
width: 400px; /*增加宽度*/
margin:0 auto;/*水平居中*/
}
</style>
</head>
<body
style="background-image: url('image/loginbg.jpg');background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;">
<div
style="height:300px; text-align: center;">
<!---- <h1 style="background-color: bisque;text-align: center;">登陆界面</h1>-->
<!-- 距离顶部距离 -->
<table style="margin-top: 20%;">
<tr>
<td>
<!---- <input type="text" class="caption">
<input type="text" class="pre">-->
<input type="text" placeholder="请扫入工位、设备" style="background-color:rgb(0, 162, 255);-index:-10;padding-left:45px;border:5px;
font-size:24px;height: 30px;border-radius: 10px;margin-left: 10px; ">
<!--<button type="button"class="pre code" >扫描</button>-->
</td>
<td><span class="blockquote" dir="ltr">扫描</span></td>
</tr>
<tr>
<td>
<input type="text" placeholder="请扫入工牌号" class="" style="background-color:rgb(0, 162, 255);z-index:-10;padding-left:45px;border:10px;
font-size:24px;height: 30px;border-radius: 10px;margin-left: 10px; ">
</td>
<td><span>扫描</span></td>
</tr>
<tr>
<td>
<input type="text" placeholder="请输入服务器" style="background-color:rgb(0, 162, 255);-index:-10;padding-left:45px;border:5px;
font-size:24px;height: 30px;border-radius: 10px;margin-left: 10px; ">
</td>
<td>
<span dir="ltr">更新</span>
</td>
</tr>
</table>
</div>
</body>
</html>