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

HTML 表列跨度和行跨度

❮ 上一节 下一节 ❯

HTML 表格可以包含跨越多行和/或多列的单元格。

姓名  
     
     
     
     
四月    
   
   
     
     
2022
     
嘉年华  
 
     

HTML 表格 - Colspan

要使单元格跨越多列，请使用colspan属性：

示例

<table>
  <tr>
    <th colspan="2">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>43</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>57</td>
  </tr>
</table>
亲自试一试 »

笔记：的值colspan属性表示要跨越的列数。

HTML 表格 - Rowspan

要使单元格跨越多行，请使用rowspan属性：

示例

<table>
  <tr>
    <th>Name</th>
    <td>Jill</td>
  </tr>
  <tr>
    <th rowspan="2">Phone</th>
    <td>555-1234</td>
  </tr>
  <tr>
    <td>555-8745</td>
</tr>
</table>
亲自试一试 »

笔记：的值rowspan属性表示要跨越的行数。

HTML练习

通过练习测试一下

练习:

使用正确的 HTML 属性使第一个 TH 元素跨越两列。

<table>
  <tr>
    <th >Name</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>

开始练习


❮ 上一节 下一节 ❯