无论出于何种原因，我表格中的文字都没有正确对齐。我认为它涉及每列之间的内容差异，但即使尝试在每个表中放置空格也似乎无法修复它。
编辑：Woops！感谢ddenhartog让我知道，我忘了添加我想要的东西！例如，与我的中间列相比，我的左栏上的文字在页面的下方开始，中间列正好从我想要的位置开始，表格从哪里开始。我最右边的列从左侧和中间列的中间开始。我想让我的列对齐，以便它们从每列的开头起始于相同的位置。
我希望我的解释有意义！小提琴提供了更好的可视化。
这是我的HTML：
<title>Liberty | Las Vegas | Home</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine4//style.css" media="screen" />
<script type="text/javascript" src="engine4//jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
<link href="stylesheet_2.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a:visited {
color: #666;
}
a:active {
color: #D00E16;
}
a:hover {
color: #33BDFF;
}
</style>
</head>
<body>
<div id="banner">
<a href="index.html"><h1>LIBERTY</h1>
<hr color=white />
<h3>High School</h3></a>
</div>
<div id="schedule">
<p> </p>
</div>
<div id="wrap">
<ul class="navbar">
<li><a href="index.html">LHS Home</a></li>
<li><a target="_blank" href="PDFs/2014/LHS Course Catalog 2013-2014.pdf">Courses</a> </li>
<li><a href="Faculty.html">Faculty</a></li>
<li><a href="Programs.html">Programs and Athletics</a></li>
<li><a href="">Information ▽</a>
<ul>
<li><a target="_blank" href="https://parentlink.ccsd.net/html/ContentBase/Content/Home/Login">ParentLink</a></li>
<li><a target="_blank" href="https://twitter.com/">Twitter</a></li>
<li><a target="_blank" href="https://www.facebook.com/">Facebook</a></li>
<li><a href="Handouts.html">Important Handouts</a>
</ul>
</li>
</ul>
</div>
<br />
<div id="slide_background">
<!-- Start WOWSlider.com BODY section id=wowslider-container4 -->
<div id="wowslider-container4">
<div class="ws_images"><ul>
<li><img src="#" alt="Photo by" title="Photo by Krystel Tirso" id="wows4_0"/></li>
<li><img src="#" alt="Photo by " title="Photo by Christine Fuhler" id="wows4_1"/></li>
<li><img src="#" alt="Photo by" title="Photo by Sharon Deleon" id="wows4_2"/></li>
<li><img src="#" alt="Photo by " title="Photo by Sharon Deleon" id="wows4_3"/></li>
<li><img src="#" alt="Photo by " title="Photo by Jessica Lopez" id="wows4_4"/></li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title="Photo by o">1</a>
<a href="#" title="Photo by ">2</a>
<a href="#" title="Photo by n">3</a>
<a href="#" title="Photo by eon">4</a>
<a href="#" title="Photo by z">5</a>
</div></div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine4//wowslider.js"></script>
<script type="text/javascript" src="engine4//script.js"></script>
<!-- End WOWSlider.com BODY section -->
</div>
<div id="frontpage">
<table border="0" cellspacing="10" cellpadding="10">
<!-- Row 1 -->
<tr>
<th style="width:20em;" align="left">Announcements</th>
<th style="width:20em;" align="center">Weekly Schedule</th>
<th style="width:20em;" align="right">Celebrations</th>
</tr>
<!-- Row 2 -->
<tr>
<td style="width:20em;" align="left">
<h2 class="schedule_day"><a href="#" title="L6TV" target="_blank" dir="ltr" data-sessionlink="ei=Dl8rU_bBDsil-QObpYDoCA">Morning announcements l6tv</a></h2>
<p class="schedule_day"><a href="http://webstores.activenetwork.com/school-software/liberty_high_schow32/index.php?l=product_detail&p=485#.UxoMA86POB6#.UydqU6hdV8E" target="_blank">Spring Reverse Tickets!</a></p>
<br />
<a href="http://webstores.activenetwork.com/school-software/liberty_high_schow32/index.php?l=product_detail&p=485#.UxoMA86POB6#.UydqU6hdV8E" target="_blank"><img src="images\2014 spring reverse tickets.jpg" /></a>
<p>Purchase your tickets <a style="text-decoration:underline" href="http://webstores.activenetwork.com/school-software/liberty_high_schow32/index.php? l=product_detail&p=485#.UxoMA86POB6#.UydqU6hdV8E">here!</a></p>
</td>
<td style="width:20em;" align="center">
<p class="schedule_day">March 24th - 28th<br />
Spring reverse<br />
Spirit Days<br /></p>
<p><span class="bold_pink">Mocking Jay Monday – 3/24</span><br />
STUCO will hand out Mocking Jay stickers <br />
</p>
<p><span class="bold_pink">Crowning Victor Tuesday – 3/25</span><br />
Students decorate crowns at home to wear today. At lunch, there will be a competition for the best decorated crown. Winner will receive a free Spring Reverse ticket</p>
<p><span class="bold_pink">Crazy Capitol Wednesday – 3/26</span><br />
crazy hair and outfits that are bright with with elaborate, crazy, exotic patterns, etc.<br />
</p>
<p><span class="bold_pink">Peacekeeper Thursday – 3/27</span><br />
Camouflage/army wear</p>
<p><span class="bold_pink">Catching Fire Friday – 3/28</span><br />
Wear your class colors</p>
<p><span class="bold_red">Freshmen: Red</span> – <span class="bold_blue">Sophomore: Blue</span></p>
<p><span class="bold_orange">Junior: Orange</span> – <span class="bold_yellow">Seniors: Yellow</span></p>
<p class="schedule_day">Friday (3/21)</p>
<p> <span class="bold">Last Day of 3rd Quarter</span><br />
2p - Orchestra Festival - UNLV<br />
3:30p - Baseball Varsity vs. Green Valley - Home<br />
5p - Swim/Diving vs. Del sol - UNLV<br />
</p>
<p class="schedule_day">Saturday (3/22)</p>
<p> Baseball Junior Varsity Tournament <br />
Track - Chandler, AZ <br />
Track - Faith Lutheran High School <br />
SAVE/Law Club - CA<br />
9a - State Theater Conference - Liberty <br />
12p - Swim vs. Del Sol - Multi Gen Pool <br />
6p - ROTC - Revere Country Club <br />
</p>
</td>
<td style="width:20em;" align="right">
<p class="schedule_day">Photography Contest Winners!</p>
<p>Liberty's very own name and name have won first and second place, respectively, in the Landscape, Nature, and Cityscape category of the Annual Louis J. Hendrickson Memorial Photography Contest! Please congratulate them! You can view their work <a href="#" target="_blank" style="text-decoration:underline;">here!</a> (WARNING: Bug!)</p>
<p class="schedule_day">Hard Rock Pin Contest Winner!</p>
<img style="width:20em; height:13em;" src="images\2014 hard rock pin contest winner.png" />
<p>Please congratulate name - she won the Hard Rock Hotel's Pin Design Contest! Her super cool design was chosen out of 2,000 designs submitted this year. Proceeds from the pin made from her design go to the Public Ed Foundation.</p>
</td>
</tr>
</table>
</div>
<footer>
<p align="center">This website was created by the Liberty High School Career and Technical Education Program Web Design & Development Students. ©2014-2015<br />
All Photos taken by Liberty High School Photography Students.
<br />
Web Design Advisor – </p>
<p align="center">#</p>
</footer>
我的CSS
body {
background-image:url(images/images/banner_repeat_01.jpg);
width:auto;
height:auto;
background-repeat:repeat-x;
}
footer {
background-color:#c3c3c3;
background-repeat:repeat-x;
background-position:bottom;
width:100%;
left:0;
right:0;
position:absolute;
}
#banner {
width:auto;
height:auto;
margin-left:auto;
margin-right:auto;
text-align:center;
color:white;
text-shadow: 2px 2px 5px #000;
font-family:"Times New Roman", Times, serif;
}
#schedule {
color:white;
margin-left:auto;
margin-right:auto;
text-align:center;
margin-top:2.9em;
}
#slide_background {
background-color:#c3c3c3;
margin-left:auto;
margin-right:auto;
width:100%;
position:absolute;
left:0;
right:0;
}
#slides {
background-color:#000;
margin-left:auto;
margin-right:auto;
text-align:center;
height:13em;
width:70%;
margin-top:-1em;
color:white;
}
#frontpage {
margin-left:auto;
margin-right:auto;
width:100%;
color:#333;
margin-top:23em;
}
#banner hr {
width:15em;
margin-top:-1.8em
}
#frontpage table th {
color:#333;
border-collapse:collapse;
font-size:2em;
text-decoration:underline;
font-variant:small-caps;
}
#frontpage table td {
color:#161616;
border-collapse:collapse;
font-size:1.3em;
}
h1 {
font-size:2.8em;
margin-top:-.1em;
}
h3 {
font-variant:small-caps;
margin-top:-.2em;
letter-spacing:4px;
}
a:link {
text-decoration: none;
color:black;
}
a:visited {
text-decoration:none;
font-weight:bold;
color:black;
}
a:active {
text-decoration:underline;
color: #00F;
}
table a:hover {
text-decoration:underline;
font-weight:bold;
color:#33F;
}
#banner a:active {
text-decoration:none;
}
a h3 {
color: #FFF;
text-decoration: none;
}
a h1 {
color: #FFF;
text-decoration: none;
}
table {
font-family:"Times New Roman", Times, serif;
font-size:1em;
margin-left:auto;
margin-right:auto;
letter-spacing:2px;
margin-top:-.5em;
}
body table td:nth-child(n) {
border-right:solid thin;
}
#programs_content table td:nth-child(1) {
border-left:solid thin;
}
td:nth-child(1) {
border-right:solid thin;
}
td:nth-child(2) {
border-right:solid thin;
}
td:nth-child(3) {
border-right:solid thin;
}
#frontpage td:nth-child(3) {
border-right:none;
}
.schedule_day {
font-weight:bold;
font-size:1.3em;
text-decoration:underline;
color:black;
font-variant:small-caps;
}
#banner a h1 {
text-decoration: none;
}
.bold {
font-weight: bold;
color: #333;
}
.bold_pink {
font-weight: bold;
color: #CF016E;
}
.bold_red {
font-weight: bold;
color: #F00;
}
.bold_blue {
font-weight: bold;
color: #00F;
}
.bold_yellow {
font-weight: bold;
color: #FC0;
}
.bold_orange {
font-weight: bold;
color: #D94F26;
}
#wrap {
width: 100%; /* Spans the width of the page */
height: 3.8em;
margin: 0; /* Ensures there is no space between sides of the screen and the menu */
z-index: 99; /* Makes sure that your menu remains on top of other page elements */
position: absolute;
background-color:#FFF;
left:-3px;
right:0;
top: 153px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
body {
width:100%;
height:100%;
}
.navbar {
display:inline-block;
}
.navbar li {
height: 1.5em;;
width: 10em; /* Each menu item is 150px wide */
float:left;
text-align: center; /* All text is placed in the center of the box */
list-style: none; /* Removes the default styling (bullets) for the list */
font: "Times New Roman", Times, serif;
font-size:1em;
padding: 0;
margin:0;
border-left:thin solid #000;
border-right:thin solid #000;
}
.navbar a {
padding: 0; /* Adds a padding on the top and bottom so the text appears centered vertically */
text-decoration: none; /* Removes the default hyperlink styling. */
color: #000; /* Text color is white */
display: block;
}
.navbar li ul {
display: none; /* Hides the drop-down menu */
height: auto;
margin: 0; /* Aligns drop-down box underneath the menu item */
}
.navbar li:hover ul {
display: block; /* Displays the drop-down box when the menu item is hovered over */
border: none;
padding: .7em;
}
li:nth-child(1) {
border-right:solid thin;
}
li:nth-child(2) {
border-right:solid thin;
}
li:nth-child(3) {
border-right:solid thin;
}
li:nth-child(4) {
border-right:solid thin;
}
.navbar li ul li {
border:none;
background-color:#CCC;
border:thin solid #000;
padding:5px;
width:130px;
}
.navbar li ul li a:hover {
background-color: #CCC;
}
#programs_content {
text-align:center;
}
谢谢大家！
答案 0 :(得分：0)
问题是默认情况下表格是vertical-align：middle，所以你的所有内容都是中间对齐的
将垂直对齐顶部添加到你的td应该得到你想要的东西
#frontpage table td {
vertical-align: top;
color:#161616;
border-collapse:collapse;
font-size:1.3em;
}
旁注：
然而，在这种情况下，表格可能不是最具语义的选择，因为这不是真正的表格数据，此时我很好奇，您是否正在使用表格来均匀分布列？您可以使用div来执行此操作，然后您不必取消任何默认表格样式的设计。
答案 1 :(得分：0)
我想让我的列对齐，以便它们从每列的开头开始于同一位置。
你忽略了告诉你的表格单元格：
td { vertical-align:top; }