• 微信号
  • 微信号
目录

HTML笔记

您当前的位置:首页 > 我的笔记 > HTML笔记>html表格

上一篇: html表单

下一篇: html属性

html表格

在Html中 <table> 标签表示一个表格,每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)

表格属性:

  • border :设置表格边框
  • width :设置表格宽度
  • align :设置表格对齐
  • cellpadding :设置单元格间距
  • cellspacing :设置像素间隙

实例

<table width="500" border="1" align="center" cellpadding="0" cellspacing="0" > 
 <tr> 
 <td>编号</td> 
 <td>姓名</td> 
 <td>性别</td> 
 </tr> 
 <tr> 
 <td>1</td> 
 <td>张三</td> 
 <td>男/td> 
 </tr> 
</table>

td跨行、跨列属性

rowspan 属性定义单元格应该纵跨的行数

<!-- 单元格跨两列 --> 
<table border="1"> 
 <tr> 
 <th>名字</th> 
 <td>编号</td> 
 </tr> 
 <tr> 
 <th>李四</th> 
 <td>123456</td> 
 </tr> 
 <tr> 
 <td>75891561</td> 
 </tr> 
</table>

colspan 属性定义单元格应该横跨的列数

<!-- 单元格横跨两格 --> 
<table border="1"> 
 <tr> 
 <th>名字</th> 
 <th>王五</th> 
 </tr> 
 <tr> 
 <td>编号</td> 
 <td>123456</td> 
 <td>456789</td> 
 </tr> 
</table>

完整表格展示

一个完整table表格一般包含<thead> 、<tbody> 、和 <tfoot> 元素结合,用来规定表格的各个部分(表头、主体、页脚)。

  • <thead> 标签用于组合 HTML 表格的表头内容
  • <tbody> 标签用于组合 HTML 表格的主体内
  • <tfoot> 标签用于组合 HTML 表格的页脚内容

实例

<!-- 完整表格实例 --> 
<table width="500" border="1" align="center" cellpadding="0" cellspacing="0" > 
 <thead> 
 <tr align="center"> 
 <td>姓名</td> 
 <td>年龄</td> 
 </tr> 
 </thead> 
 <tbody> 
 <tr align="center"> 
 <td>杨六</td> 
 <td>18</td> 
 </tr> 
 </tbody> 
 <tfoot> 
 <tr align="center"> 
 <td colspan="2">底部</td> 
 </tr> 
 </tfoot> 
</table>

上一篇: html表单

下一篇: html属性