如何用HTML制作右侧带文本的2×2表格？代码问题求助

存在的问题 #

• 表格中间有大片空白
• 文本未在aside区域内
• 文本尺寸过大
• 背景颜色未生效

修正后的代码 #

CSS 代码 #

/* 父容器清除浮动，确保背景色生效 */
.tabla-con-imagenes {
  background-color: #6655b3;
  overflow: hidden;
}

aside {
  width: 50%; /* 改用百分比适配，避免固定宽度导致布局问题 */
  float: right;
  height: 600px;
  margin-bottom: 10px;
  padding: 10px; /* 添加内边距让文本不贴边 */
}

.tabla-con-imagenes table {
  float: left;
  border-collapse: collapse; /* 合并边框，避免单元格间隙 */
  width: 50%; /* 和aside各占50%，布局更均衡 */
}

.tabla-con-imagenes img {
  width: 100%; /* 图片填满单元格，消除空白 */
  height: auto;
  display: block;
}

/* 调整文本尺寸 */
aside p {
  font-size: 16px;
  text-align: right; /* 用CSS替代过时的ALIGN属性 */
}

HTML 代码 #

<h2 style="text-align:center;">Sinopsis</h2>
<div class="tabla-con-imagenes">
  <table cellspacing="0" cellpadding="0">
    <tr>
      <td>
        <img src="imagen1.jpg" alt="Imagen 1">
      </td>
      <td>
        <img src="imagen2.jpg" alt="Imagen 2">
      </td>
    </tr>
    <tr>
      <td>
        <img src="imagen3.jpg" alt="Imagen 3">
      </td>
      <td>
        <img src="imagen4.jpg" alt="Imagen 4">
      </td>
    </tr>
  </table>
  <aside>
    <p>Your text</p>
    <p>TEXT.</p>
  </aside>
</div>

修复细节说明 #

• 消除表格空白：将图片max-width:40%改为width:100%，让图片完全填充单元格；给表格添加border-collapse: collapse确保单元格无额外间隙。
• 文本归位aside：把原本在aside外的Your text移入<aside>标签内部，确保所有右侧文本都在指定区域。
• 调整文本尺寸：给aside p设置font-size属性，按需调整字号大小；同时用CSS的text-align: right替代过时的ALIGN属性。
• 背景色生效：给父容器.tabla-con-imagenes添加overflow: hidden清除浮动（浮动元素会脱离文档流，导致父容器高度塌陷，背景色无法显示），并直接给父容器设置背景色替代通用div选择器，提升样式优先级。

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