码农教程 - 一技在手,衣食无忧! tools

HTML 表格大小

❮ 上一节 下一节 ❯

HTML 表格的每列、行或整个表格可以有不同的大小。

     
     
     
     
     
     
     
     

使用style属性与width或者height属性来指定表、行或列的大小。

HTML 表格宽度

要设置表格的宽度，请添加style归因于<table>元素：

示例

将表格的宽度设置为 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 表格列宽

     
     
     

要设置特定列的大小，请添加style上的属性<th>或者<td>元素：

示例

将第一列的宽度设置为 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>
亲自试一试 »

HTML练习

通过练习测试一下

练习:

使用 CSS 样式使表格宽 300 像素。

<table >
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
</table>

开始练习


❮ 上一节 下一节 ❯