搭建英西双语两栏展示的HTML table时第二列文本不对齐

• 所有HTML表格的<td>单元格，默认垂直对齐方式是居中对齐，不是顶对齐。只要两个单元格的总内容高度差哪怕1像素，文本就会自动在单元格垂直方向居中，最终呈现出来就是两栏顶部对不齐，第二栏整体位置往下掉。
• 你贴的代码里第二栏有半截断的标签：最后那句 <p>&nbsp;a)&nbsp;&nbsp;&nbsp; <u>TEXT TEXT既没闭合<u>，也没闭合外层的<p>。浏览器碰到这种不合法的代码会自动补全标签结构，过程中会生成一些看不见的内边距或者空白块，把第二栏的整体位置再往下挤一截，错位会更明显。

1. 给两个单元格强制顶对齐
   不用写复杂CSS，直接给每个<td>加valign="top"属性就行，这个是HTML原生的表格对齐属性，所有浏览器都兼容：

   <table width="863">
     <tr>
       <td width="428" valign="top">
         <!-- 西语栏原有内容不用改 -->
       </td>
       <td width="435" valign="top">
         <!-- 英语栏原有内容不用改 -->
       </td>
     </tr>
   </table>
   

2. 把断了的标签补全
   把第二栏结尾的截断HTML改成合法结构，避免浏览器自动补全带来的隐形间距：

   <!-- 修正前的截断代码 -->
   <p>&nbsp;a)&nbsp;&nbsp;&nbsp; <u>TEXT TEXT
   <!-- 修正后 -->
   <p>&nbsp;a)&nbsp;&nbsp;&nbsp; <u>TEXT TEXT</u></p>
   

3. 减少无意义的占位空格
   两栏段首的 如果只是用来做缩进，尽量统一用段落样式的text-indent控制，别靠零散的空格占位——不同浏览器对空格高度的计算有细微差别，很容易又攒出高度差导致错位。

内容的提问来源于stack exchange，提问作者Henry B