如何使用内部样式实现指定效果的HTML表格？

修正后可实现预期效果的完整代码 #

<html>
<head>
<title>TABLES</title>
<style>
table {
  border-collapse: collapse;
}
td {
  border: 1px solid #000;
  padding: 10px 15px;
}
</style>
</head>
<body style="background-color: white; font-family:verdana; color:blue; font-weight:bold;">
<h1>Using tables</h1>
<table>
<tr>
<td>Top left</td>
<td style="border: 2px inset yellow;">Top right</td>
</tr>
<tr>
<td style="background-color:red;">Bottom left</td>
<td style="border: 3px dotted green;">Bottom right</td>
</tr>
</table>
</body>
</html>

调整说明 #

• 新增了<style>内部样式块配置表格基础属性，原有代码没有设置表格和单元格的默认边框、内边距，所以不会显示基础表格结构
• 给table设置border-collapse: collapse属性，可合并相邻单元格的边框，避免出现双边框问题
• 给所有td设置默认1px黑色边框和内边距，有特殊样式需求的单元格之前写的行内样式优先级更高，会自动覆盖默认配置，不需要额外修改

内容的提问来源于stack exchange，提问作者Aslı Kaya