Question

我的HTML表格无法正常显示。这是问题的图片：

我的问题是“当前车辆数量”和“当前家庭成员数量”之间的分隔线并不在两个按钮之间。我怎样才能集中精力呢？

通过执行以下操作，我尝试在“当前车辆数量”之后添加空格：

<TD ALIGN="center"><p id="t_4"><pre> Curent Number of Cars is          </pre><p id="t_red">6</p></p></TD>

但这会改变我文字的字体。

这是页面来源

<HTML>
<HEAD>
<LINK REL="stylesheet" HREF="/edartcss/edart_style.css" TYPE="text/css">
<LINK REL="stylesheet" HREF="/edartcss/button.css" TYPE="text/css">
<LINK REL="stylesheet" HREF="/edartcss/CalendarControl.css" TYPE="text/css">
<TITLE>eDART Generation Tickets</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<META HTTP-EQUIV="Refresh" CONTENT="30;URL=/edartsql/john_package.loadpage">
<SCRIPT language="JavaScript" src="/edartjs/geneneration.js"></SCRIPT>
<SCRIPT language="JavaScript" src="/edartjs/CalendarControl.js"></SCRIPT>
</HEAD>
<body OnLoad="placeFocus()">
<TITLE>August Vehicle Directory</TITLE>
<TABLE  border=1 align=center>
<TR>
<TD ALIGN="center" COLSPAN="5"><p id="t_1">August Family Vehicle Listing Directory</p></TD>
</TR>
<TR>
 <TD ALIGN="center" COLSPAN="11"><p id="t_msg">This page lists all of the vehicles and their owners within the August family. 
            Please see the table below for the latest listing.</p></TD>
</TR>
<TR>
<td align =center colspan=2>
<TABLE  border>
<TR>
<TD ALIGN="center"><p id="t_b">Owner</p></TD>
<TD ALIGN="center"><p id="t_b">Make</p></TD>
<TD ALIGN="center"><p id="t_b">Model</p></TD>
<TD ALIGN="center"><p id="t_b">Year</p></TD>
<TD ALIGN="center"><p id="t_b">Additional Specs</p></TD>
</TR>
<TR>
<TD ALIGN="center"><p id="t_i">John, August</p></TD>
<TD ALIGN="center"><p id="t_i">Honda</p></TD>
<TD ALIGN="center"><p id="t_i">Civic</p></TD>
<TD ALIGN="center"><p id="t_i">2012</p></TD>
<TD ALIGN="center"><div id="s_button_1" ><a href="john_package.add_car">Vehicle  Details</a></div></TD>
</TR>
</TABLE>
</td>
</TR>
<TR>
<TD ALIGN="center"><p id="t_4">Curent Number of Cars is <p id="t_red">6</p></p></TD>
<TD ALIGN="center"><p id="t_4">Curent Number of Family Members is <p id="t_red">2</p></p></TD>
</TR>
<TR>
<td align =center colspan=2>
<TABLE >
<TD ALIGN="center"><div id="s_button_1" ><a href="john_package.add_car">Add      Vehicle</a></div></TD>
<TD ALIGN="center"><div id="s_button_1" ><a href="john_package.add_family_member">Add Member</a></div></TD>
</TABLE>
</td>
</TR>
</TABLE>
</BODY>
</HTML>

Answer 1

添加样式=“宽度：50％;”对元素。以下是一个示例：http://codepen.io/markhkr/pen/XdxbrP

<TD ALIGN="center" style="width:50%;"><p id="t_4">Curent Number of Cars is <p id="t_red">6</p></p></TD>
<TD ALIGN="center" style="width:50%;"><p id="t_4">Curent Number of Family Members is <p id="t_red">2</p></p></TD>

Answer 2

您可以向表中添加columns属性，以指定每行50％的宽度，以便：

<table columns="50%,50%">

但请注意，使用表格进行此类布局会被视为过时。通常，您可以将每个并排元素设置为浮动<div>，宽度为50％。

Answer 3

给“汽车”一个左边的id，“家庭成员”一个右边的id。

将每个id的with设置为50％，并使用text-align：center。

如何将分隔线居中放在HTML表格中？

3 个答案: