如何使用HTML创建维基百科风格信息框并解决表格对齐问题

对齐异常由两个问题导致：

• 代码存在语法错误：第一个<tr>行标签缺少对应的闭合标签</tr>，浏览器解析表格结构时会出现错乱
• 表格默认对齐规则不符合需求：<th>、<td>默认垂直对齐方式为居中，当右侧<td>内容行数多、单元格高度更高时，左侧<th>内容会在单元格内垂直居中，无法和行首对齐，视觉上就会出现偏移。

1. 补全所有缺失的闭合标签，保证表格结构合法
2. 给<th>设置vertical-align: top属性，强制表头内容和单元格顶部对齐，即可和右侧多行内容的首行保持水平对齐。

<style>
/* 信息框通用样式，可按需调整 */
.info-box th {
  vertical-align: top;
  text-align: left;
  padding: 6px 10px;
  font-weight: 600;
}
.info-box td {
  padding: 6px 10px;
}
</style>

<table class="info-box">
  <tr>
    <th>Nickname(s)</th>
    <td>
      <span><i>Los Blancos</i> (The Whites)</span><br>
      <span>Los Merengues(The Meringues)</span>
    </td>
  </tr>
  <tr>
    <th>Nickname(s)</th>
    <td>
      <span><i>Los Blancos</i> (The Whites)</span><br>
      <span>Los Merengues(The Meringues)</span>
    </td>
  </tr>
</table>

如果不想写单独的CSS规则，也可以直接给th加行内样式实现相同效果，示例：<th style="vertical-align: top;">Nickname(s)</th>

内容的提问来源于stack exchange，提问作者shekhu verma