HTML 表格高度和宽度

HTML 表格高度和宽度格式化

基本标签和属性

表格标签

• <table>: 定义表格

• <tr>: 定义表格行

• <td>: 定义表格单元格

• <th>: 定义表头单元格

宽度和高度属性

• width: 设置表格或单元格宽度

• height: 设置表格或单元格高度

用法

表格宽度设置

<table width="500">
  <!-- 表格内容 -->
</table>

表格高度设置

<table height="300">
  <!-- 表格内容 -->
</table>

单元格宽度设置

<td width="100">单元格内容</td>

单元格高度设置

<td height="50">单元格内容</td>

实例

基础表格示例

<table border="1" width="400" height="200">
  <tr>
    <th width="100">姓名</th>
    <th width="150">邮箱</th>
    <th width="150">电话</th>
  </tr>
  <tr height="50">
    <td>张三</td>
    <td>zhang@example.com</td>
    <td>123456789</td>
  </tr>
  <tr height="50">
    <td>李四</td>
    <td>li@example.com</td>
    <td>987654321</td>
  </tr>
</table>

CSS扩展

使用CSS设置表格尺寸

<style>
  .custom-table {
    width: 600px;
    height: 300px;
  }
  .custom-table td {
    width: 200px;
    height: 60px;
  }
</style>

<table class="custom-table" border="1">
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
</table>

响应式表格

<style>
  .responsive-table {
    width: 100%;
    max-width: 800px;
  }
  .responsive-table th,
  .responsive-table td {
    min-width: 100px;
    height: 40px;
  }
</style>

<table class="responsive-table" border="1">
  <!-- 表格内容 -->
</table>

固定表头和列

<style>
  .fixed-table {
    width: 500px;
    height: 300px;
    overflow: auto;
  }
  .fixed-table thead th {
    position: sticky;
    top: 0;
    background: white;
  }
  .fixed-table td:first-child {
    position: sticky;
    left: 0;
    background: white;
  }
</style>

<div class="fixed-table">
  <table border="1">
    <!-- 表格内容 -->
  </table>
</div>

功能说明

1. 宽度控制:

• 固定宽度: 使用像素值(px)

• 百分比宽度: 相对于父元素

• 自动调整: 不设置或设为auto

2. 高度控制:

• 固定高度: 使用像素值(px)

• 自动高度: 根据内容自动调整

• 最小高度: 确保最小显示区域

3. 响应式设计:

• 使用max-width限制最大宽度

• 使用min-width确保最小可读性

• 结合媒体查询适应不同设备

4. CSS优势:

• 更精确的控制

• 更好的响应式支持

• 可维护性更高

• 支持动画和过渡效果