我的网站上有预订表格,我有一家豪华轿车公司。
但为了节省我网站的空间,我想知道如何制作2列表格。
这是我现在的表格:
<form method="post" id="myForm" action="send2.php" class="sendmail" onsubmit="return validateForm()" style="text-align:center;">
<h1 class="lead" align="center" style="font-size:35; font-weight:800">RESERVE TRIP</h1>
<ul li><h1 class="lead" align="center" style="color:black;font-weight:bold;list-style:none;">Contact Information</h1></ul li>
<ul li style="list-style:none">
<li>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<p>
<table>
<td><p><label>Full Name:<input type="text" id="name" name="name" style="margin:10px; width:285px; height:15px"></td>
<td><p><label>Company Name:<input type="text" id="company" name="company" style="margin:10px; width:340px; height:15px"></label></p>
</table>
<table align="center">
<tr>
<td class="width:110px; height:15px">
<p><label>Phone #:<input type="text" id="phone" name="phone" placeholder="###-###-####" style="margin:10px; width:100px; height:15px">
</td>
<td class="width:70px; height:15px">
<p><label>E-mail:<input type="text" id="email" name="email" style="margin:10px; width:220px; height:15px">
</td>
</tr>
<tr>
</td>
</tr>
</table>
</li>
</ul>
<ul li><h1 class="lead" align="center" style="font-weight:bold;color:black;list-style:none">Pick-Up Information</h1></ul li>
<ul li style="list-style:none">
<li>
<option selected="">--</option>
<option>AM</option>
<option>PM</option>
</select></td>
</p>
</table>
<table align="center">
<tr>
<td class="width:110px; height:15px">
<label style="font-size:15px">Airport Name: <span class="error"></span></label>
<td class="width30">
<input type="text" id="rtairport" name="rtairport" class="input85" style="width:180px; margin:10px" value="">
</td>
</td>
<td class="width:110px; height:15px" align="center">
<label style="font-size:15px">Airline/Code:</label>
<td class="width30">
<input type="text" id="rtairline" name="rtairline" class="input85" style="width:75px; margin:10px" value="">
</td>
</td>
<td class="width:70px; height:15px">
<label style="font-size:15px">Flight #:</label>
<td class="width30">
<input type="text" id="rtfnumber" name="rtfnumber" class="input85" style="width:40px;margin:10px" value="">
</td>
</td>
</tr>
<tr>
<td>
</tr>
</td>
</table>
<br>
<li><h1 class="lead" align="center" style="font-weight:bold;color:black;list-style:none">Drop-Off Information</h1></li>
<ul li style="list-style:none">
<center><p><label>Full Address:<input type="text" id="rtstreet" name="rtstreet" style="margin:10px; width:360px; height:15px"></label></p></center>
<table align="center">
<tr>
<td class="width:110px; height:15px">
<label style="font-size:15px">Airport Name: <span class="error"></span></label>
<td class="width30">
<input type="text" id="doairport" name="doairport" class="input85" style="width:200px; margin:10px" value="">
</td>
</td>
<td class="width:110px; height:15px" align="center">
<label style="font-size:15px">Airline/Code:</label>
<td class="width30">
<input type="text" id="doairline" name="doairline" class="input85" style="width:75px; margin:10px" value="">
</td>
</td>
<td class="width:70px; height:15px">
<label style="font-size:15px">Flight #:</label>
<td class="width30">
<input type="text" id="dofnumber" name="dofnumber" class="input85" style="width:40px;margin:10px" value="">
</td>
</table>
</div>
</ul></li>
任何帮助/建议都会有所帮助。谢谢。
答案 0 :(得分:1)
将表单字段放在两个单独的div中并向左浮动它们。还要确保设置它们的宽度并使它们彼此相邻。
答案 1 :(得分:0)
制作两个<div>
个。这些将是两列。然后,在他们的CSS中,添加float: left
。如果您需要更多帮助,请询问。
答案 2 :(得分:0)
您需要支持哪些浏览器?如果您可以使用在旧版浏览器中无法使用的半实验性CSS3功能,请使用CSS3 columns。
答案 3 :(得分:-1)
看起来你需要对表进行一些工作
通用表格格式可能类似于
<form action="checkInput.php" method="POST">
<table border="1px solid #C00">
<tr>
<th colspan="2">Table Heading</th>
</tr>
<tr>
<td>Column 1</td><td>Column 2</td>
</tr>
<tr>
<td>An Input for Column 1
<input class="inputCSS" type="text" id="col1input" placeholder="Input Column 1" />
</td>
<td>An Input for Column 2
<input class="inputCSS" type="text" id="col2input" placeholder="Input Column 2" />
</td>
</tr>
<tr>
<td>Another row down for<br>Column 1</td><td>Another row down for<br>Column 2</td>
</tr>
</table>
</form>
此示例显示标题“表格标题”和3行2列。如果您使用&lt; tr&gt;跟随模式(表格行)和&lt; td&gt; (单个单元格)您可以扩展此2列格式。然后你可以根据自己的喜好调整它。另外,将要排列的列保持在同一个表中,以便浏览器为您排列
一旦你开始了解如何键入表格,那么2列表格就不会很难了。