HTML 中如何设置单元格的宽度与高度

在 HTML 网页设计中，合理设置单元格的宽度与高度对于页面布局的美观与合理性至关重要。下面就来详细探讨一下在 HTML 里设置单元格宽度与高度的方法。

可以通过 <td> 标签的 width 和 height 属性直接设置单元格的宽度与高度。例如：

<table border="1">
  <tr>
    <td width="200" height="100">这是一个设置了宽度为 200 像素，高度为 100 像素的单元格</td>
  </tr>
</table>

这里的宽度和高度值是以像素为单位指定的，这种方式简单直接，能快速让单元格达到我们期望的尺寸。但要注意，若内容过多，超出设置的宽度或高度，单元格可能会出现内容溢出的情况。

除了固定像素值，也可以使用百分比来设置单元格的宽度与高度。以宽度为例，将单元格宽度设置为百分比，可以让表格根据父元素的宽度进行自适应调整。比如：

<table border="1" width="50%">
  <tr>
    <td width="30%">单元格 1</td>
    <td width="70%">单元格 2</td>
  </tr>
</table>

上述代码中，表格整体宽度是父元素宽度的 50%，而表格内两个单元格分别占表格宽度的 30% 和 70%。这种百分比设置方式在响应式设计中非常实用，能确保网页在不同设备屏幕尺寸下都有良好的显示效果。

另外，CSS 也为我们提供了强大的设置单元格宽度与高度的方式。通过 CSS 选择器选中相应的 <td> 元素，然后使用 width 和 height 属性进行设置。例如：

<style>
  td {
    width: 150px;
    height: 80px;
  }
</style>
<table border="1">
  <tr>
    <td>使用 CSS 设置宽度与高度的单元格</td>
  </tr>
</table>

利用 CSS 设置单元格的宽度与高度，能够实现样式的统一管理，并且方便后期修改和维护。CSS 还可以结合媒体查询，根据不同的屏幕尺寸为单元格设置不同的宽度与高度，进一步优化页面在各种设备上的显示。

在 HTML 中设置单元格的宽度与高度有多种方式，开发者可以根据实际需求灵活选择，以打造出布局合理、美观且适应不同环境的网页。