我不相信我已正确设置此代码，我花了很多时间和精力。有人可以查看它，并根据代码的外观进行调整。我想保持相同的内联css格式，我只是希望代码清理一下。
我不相信我正在使用正确的标签。
我想保持填充相同，调整其他所有内容。
我的代码：https://jsfiddle.net/t14my17x/
<table align='center' height='100%'>
<tr>
<td valign='middle'>
<table>
<tr>
<td style='color: #0059dd;line-height:1;font-size:30;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 100px; padding-left: 50px;'>
The
<br/>
<span style='color:#000000; display:inline-block; width: 300px; height: 24px;background-color:#E2AB58'>
</span>
</td>
<td style='color: #0059dd;line-height:1;font-size:30;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 100px; padding-left: 50px;'>
--------
<br/>
<span style='color:#000000; display:inline-block; width: 300px; height: 24px;background-color:#E2AB58'>
</span>
</td>
<td style='color: #0059dd;line-height:1;font-size:30;font-weight:bold;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 100px; padding-left: 50px;'>
--------
<br/>
<span style='color:#000000; display:inline-block; width: 300px; height: 24px;background-color:#E2AB58'>
</span>
</td>
</tr>
<tr>
<td style='color: #0059dd;line-height:1;font-size:30;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 100px; padding-left: 50px;'>
--------
<br/>
<span style='color:#000000; display:inline-block; width: 300px; height: 24px;background-color:#E2AB58'>
</span>
</td>
<td style='color: #0059dd;line-height:1;font-size:30;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 100px; padding-left: 50px;'>
--------
<br/>
<span style='color:#000000; display:inline-block; width: 300px; height: 24px;background-color:#E2AB58'>
</span>
</td>
<td style='color: #0059dd;line-height:1;font-size:30;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 100px; padding-left: 50px;'>
---------
<br/>
<span style='color:#000000; display:inline-block; width: 300px; height: 24px;background-color:#E2AB58'>
</span>
</td>
</tr>
<tr>
<td style='color: #0059dd;line-height:1;font-size:30;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 0px; padding-left: 50px;'>
---------
<br/>
<span style='color:#000000; display:inline-block; width: 300px; height: 24px;background-color:#E2AB58'>
</span>
</td>
<td style='color: #0059dd;line-height:1;font-size:30;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 0px; padding-left: 50px;'>
--------
<br/>
<span style='color:#000000; display:inline-block; width: 300px; height: 24px;background-color:#E2AB58'>
</span>
</td>
<td style='color: #0059dd;line-height:1;font-size:30;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 0px; padding-left: 50px;'>
--------
<br/>
<span style='color:#000000; display:inline-block; width: 300px; height: 24px;background-color:#E2AB58'>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
答案 0 :(得分：0)
所以...就像评论中提到的每个人一样，你应该使用CSS来设计风格，特别是因为这里实际上只有4种不同的风格。我所做的是快速而肮脏的修复，我不建议养成像我一样命名类的习惯。它们太模糊了。
这是两个文件。 （如果这令人困惑，请阅读.php vs .html） JSfiddle
<!DOCTYPE html>
<html>
<title>Page Title</title>
<link rel="stylesheet" href="style.css">
<table align='center' height='100%'>
<tr>
<td valign='middle'>
<table>
<tr>
<td class="one">
The
<br/>
<span class="two">
</span>
</td>
<td class="one">
--------
<br/>
<span class="two">
</span>
</td>
<td class="three">
--------
<br/>
<span class="two">
</span>
</td>
</tr>
<tr>
<td class="one">
--------
<br/>
<span class="two">
</span>
</td>
<td class="one">
--------
<br/>
<span class="two">
</span>
</td>
<td class="one">
---------
<br/>
<span class="two">
</span>
</td>
</tr>
<tr>
<td class="four">
---------
<br/>
<span class="two">
</span>
</td>
<td class="four">
--------
<br/>
<span class="two">
</span>
</td>
<td class="four">
--------
<br/>
<span class="two">
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
td.one{
color: #0059dd;
line-height:1;
font-size:30;
font-weight:bold;
padding-top: 0px;
padding-right: 50px;
padding-bottom: 100px;
padding-left: 50px;
}
span.two{
color:#000000;
display:inline-block;
width: 300px;
height: 24px;
background-color:#E2AB58;
}
td.three{
color: #0059dd;
line-height:1;
font-size:30;
font-weight:bold;
font-weight:bold;
padding-top: 0px;
padding-right: 50px;
padding-bottom: 100px;
padding-left: 50px;
}
td.four{
color: #0059dd;
line-height:1;
font-size:30;
font-weight:bold;
padding-top: 0px;
padding-right: 50px;
padding-bottom: 0px;
padding-left: 50px;
}
我没有改变你的规则，只是移动了它们，然后格式化它们。