这是我到目前为止得到的：
<center><table border="0"
width="100%">
<tr>
<td></td>
<td align="center" valign="top" colspan="8"
bgcolor="#000000" bordercolor="#FFFFFF"><p
align="center"><font color="#FFFFFF" face="Arial">Table title</font></p>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td align="center" valign="top" width="200" colspan="2"
bgcolor="#F0F0F0" bordercolor="#FFFFFF"><div style="max-width: 200px"><p
align="center"><a href="link url"
title="1" style="text-decoration: none"><font face="Arial">1</font></a></p></div>
</td>
<td align="center" valign="top" width="200" colspan="2"
bgcolor="#F0F0F0" bordercolor="#FFFFFF"><div style="max-width: 200px"><p
align="center"><a href="link url"
title="2" style="text-decoration: none"><font face="Arial">2</font></a></p></div>
</td>
<td align="center" valign="top" width="200" colspan="2"
bgcolor="#F0F0F0" bordercolor="#FFFFFF"><div style="max-width: 200px"><p
align="center"><a href="link url"
title="3" style="text-decoration: none"><font face="Arial">3</font></a></p></div>
</td>
<td align="center" valign="top" width="200" colspan="2"
bgcolor="#F0F0F0" bordercolor="#FFFFFF"><div style="max-width: 200px"><p
align="center"><a href="link url"
title="4" style="text-decoration: none"><font face="Arial">4</font></a></p></div>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td align="center" valign="top" width="200" colspan="2"
bgcolor="#C0C0C0" bordercolor="#FFFFFF"><div style="max-width: 200px"><p
align="center"><a href="link url"
title="5" style="text-decoration: none"><font face="Arial">5</font></a></p></div>
</td>
<td align="center" valign="top" width="200" colspan="2"
bgcolor="#C0C0C0" bordercolor="#FFFFFF"><div style="max-width: 200px"><p
align="center"><a href="link url"
title="6" style="text-decoration: none"><font face="Arial">6</font></a></p></div>
</td>
<td align="center" valign="top" width="200" colspan="2"
bgcolor="#C0C0C0" bordercolor="#FFFFFF"><div style="max-width: 200px"><p
align="center"><a href="link url"
title="7" style="text-decoration: none"><font face="Arial">7</font></a></p></div>
</td>
<td align="center" valign="top" width="200" colspan="2"
bgcolor="#C0C0C0" bordercolor="#FFFFFF"><div style="max-width: 200px"><p
align="center"><a href="link url"
title="8" style="text-decoration: none"><font face="Arial">8</font></a></p></div>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td align="center" valign="top" width="100"
bgcolor="#F0F0F0" bordercolor="#FFFFFF"><div style="max-width: 100px"></div>
</td>
<td align="center" valign="top" width="200" colspan="2"
bgcolor="#F0F0F0" bordercolor="#FFFFFF"><div style="max-width: 200px"><p
align="center"><a href="link url"
title="9" style="text-decoration: none"><font face="Arial">9</font></a></p></div>
</td>
<td align="center" valign="top" width="200" colspan="2"
bgcolor="#F0F0F0" bordercolor="#FFFFFF"><div style="max-width: 200px"><p
align="center"><a href="link url"
title="10" style="text-decoration: none"><font face="Arial">10</font></a></p></div>
</td>
<td align="center" valign="top" width="100" colspan="2"
bgcolor="#F0F0F0" bordercolor="#FFFFFF"><div style="max-width: 200px"><p
align="center"><a href="link url"
title="11" style="text-decoration: none"><font face="Arial">11</font></a></p></div>
</td>
<td align="center" valign="top" width="100"
bgcolor="#F0F0F0" bordercolor="#FFFFFF"><div style="max-width: 100px"></div>
</td>
<td></td>
</tr>
</table>
</center>
问题在于它没有按应有的方式对齐。每个单元格应限制为 200 像素，最后一行的两个外部单元格应限制为 100 像素。
有十一个选项可供选择，我希望在表格中正确对齐。由于 11 是素数，因此总是有一个空单元格，我尝试通过将底行的一个单元格切成两半来解决这个问题。
结果看起来不正常，表格太宽并且所有单元格宽度不均。它们都不受指定宽度的限制。
我没有使用CSS，我不知道它是如何工作的。毕竟我只是 HTML 的初学者。
我很确定我做错了一件简单的事情，但它是什么？
嗨帕特里克
我很抱歉，但整个方法是错误的......
首先，您正在使用的一半 html 标签已被弃用，其次，您尝试使用表格单元格来“填充”表格的内容，这对于一个或两个单元格来说很好，但不适合作为一种设计方法。
我建议你退一步学习 CSS 基础知识并分离 CSS 代码。
这将使表格工作变得更容易，因为所有混乱的属性都将从 html 代码中消失。
我复制了你的代码并对其进行了修改，以便：
.tableLayout{
table-layout: fixed;
width: 100%;
}
.centerAlignText{
text-align: center;
}
.tableHead{
vertical-align: top;
background-color: #000000;
color: white;
border-color: #FFFFFF;
}
.tableData{
vertical-align: top;
width: 200px;
background-color: #F0F0F0;
border-color: #FFFFFF;
}
.tableDataWhiteRow{
vertical-align: top;
width: 200px;
background-color: #F0F0F0;
}
.tableDataGreyRow{
vertical-align: top;
width: 200px;
background-color: #C0C0C0;
bordercolor: #FFFFFF;
}
.tableDataPadding{
vertical-align: top;
width: 100px;
background-color: #F0F0F0;
bordercolor: #FFFFFF;
}
.fontClass{
font-family: Arial;
text-decoration: none;
}
/*
attributes changed:
valign to vertical-align
bgcolor with background-color
bordercolor with border-color
*/ <div class="centerAlignText">
<table class="tableLayout">
<thead>
<tr>
<th class="tableHead" colspan="8">
<p class="centerAlignText">
<span class="fontClass">Table title</span>
</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableDataWhiteRow" colspan="2">
<p>
<a class="fontClass" href="link url" title="1">
<span>1</span>
</a>
</p>
</td>
<td class="tableDataWhiteRow" colspan="2">
<p>
<a class="fontClass" href="link url" title="2">
<span>2</span>
</a>
</p>
</td>
<td class="tableDataWhiteRow" colspan="2">
<p>
<a class="fontClass" href="link url" title="3">
<span>3</span>
</a>
</p>
</td>
<td class="tableDataWhiteRow" colspan="2">
<p>
<a class="fontClass" href="link url" title="4">
<span>4</span>
</a>
</p>
</td>
</tr>
<tr>
<td class="tableDataGreyRow" colspan="2">
<p>
<a class="fontClass" href="link url" title="5">
<span>5</span>
</a>
</p>
</td>
<td class="tableDataGreyRow" colspan="2">
<p>
<a class="fontClass" href="link url" title="6">
<span>6</span>
</a>
</p>
</td>
<td class="tableDataGreyRow" colspan="2">
<p>
<a class="fontClass" href="link url" title="7">
<span>7</span>
</a>
</p>
</td>
<td class="tableDataGreyRow" colspan="2">
<p>
<a class="fontClass" href="link url" title="8">
<span>8</span>
</a>
</p>
</td>
</tr>
<tr>
<td class="tableDataPadding" colspan="1">
</td>
<td class="tableDataWhiteRow" colspan="2">
<p>
<a class="fontClass" href="link url" title="9">
<span>9</span>
</a>
</p>
</td>
<td class="tableDataWhiteRow" colspan="2">
<p>
<a class="fontClass" href="link url" title="10">
<span>10</span>
</a>
</p>
</td>
<td class="tableDataWhiteRow" colspan="2">
<p>
<a class="fontClass" href="link url" title="11">
<span>11</span>
</a>
</p>
</td>
<td class="tableDataPadding" colspan="1">
</td>
</tr>
</tbody>
</table>
</div>
<!--
deprecated tags:
<center></center> changed to div with text-align: center;
<font></font> changed to span
-->相信我，使用分离的 CSS 进行编码要容易得多