HTML 表格尺寸

HTML 表格的每一列、每一行或整个表格都可以有不同的尺寸。

使用 style 属性配合 widthheight 属性来指定表格、行或列的大小。

     
     
     
     
     
     
     
     

HTML 表格宽度

要设置表格的宽度,请向 <table> 元素添加 style 属性:

实例

将表格宽度设置为 100%:

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

亲自试一试

注意:使用百分比作为宽度的尺寸单位意味着该元素与其父元素(在本例中为 <body> 元素)相比的宽度比例。

HTML 表格列宽

要设置特定列的尺寸,请在 <th><td> 元素上添加 style 属性:

     
     
     

实例

将第一列的宽度设置为 70%

<table style="width:100%">
  <tr>
    <th style="width:70%">Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

亲自试一试

HTML 表格行高

要设置特定行的高度,请在表格行元素上添加 style 属性:

     
     
     

实例

将第二行的高度设置为 200 像素:

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr style="height:200px">
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

亲自试一试