HTML表格

表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

属性:
    summary -- 代表表格的摘要说明
    width -- 代表表格的宽度
    border -- 代表表格边框(此属性应该使用CSS实现)
    cellspacing -- 代表表格边框与表格内容填充的距离,也是内容填充之间的距离(此属性应该使用CSS实现)
    cellpadding -- 代表内容填充的宽度(此属性应该使用CSS实现)
示例:
<table border="1" width="200">
    <tr><th>姓名<th><th>性别<th><th>年龄<th></tr>
    <tr><td>张三<td><td>女   <td><td>20     <td></tr>
    <tr><td>李四<td><td>男   <td><td>21     <td></tr>
    <tr><td>王二<td><td>男   <td><td>22     <td></tr>
</table>

    width -- 是表格的宽度,可以使用象素px或者百分比
    border -- 是表格的边框的宽度,使用px表示,此属性应该使用CSS实现
    tr -- 代表一行
    th -- 代表表格头
    td -- 代表一个单元格
    
HTML的tr标签

tr,是"table row"的缩写,中文"表行",tr标签代表HTML表格中的一行
属性 :  
    align -- 代表行的水平对齐方式(left(左对齐) | center(居中对齐) |right(右对齐) | justify)(此属性应该使用CSS实现)
    valign -- 代表行的垂直对齐方式(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | baseline(基线对齐))(此属性应该使用CSS实现)

HTML的th标签

th,是"table header cell"的缩写,中文"表头单元格"
属性
    abbr -- 代表表头的简写
    axis -- 对单元格在概念上分类
    colspan -- 一行跨越多列
    headers -- 连接表格的数据与表头
    rowspan -- 一列跨越多行
    scope -- 定义行或列的表头
    align -- 代表水平对齐方式(left(左对齐) | center(居中对齐) | right(右对齐) | justify)(此属性应该使用CSS实现)
    valign -- 代表垂直对齐方式(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | baseline(基线对齐))(此属性应该使用CSS实现)
    
HTML的td标签

td,是"table data cell"的缩写,中文"表中的数据单元"
属性
    abbr -- 代表表头的简写
    axis -- 对单元格在概念上分类
    colspan -- 一行跨越多列
    headers -- 连接表格的数据与表头
    rowspan -- 一列跨越多行
    scope -- 定义行或列的表头
    align -- 代表水平对齐方式(left(左对齐) | center(居中对齐) | right(右对齐) | justify)(此属性应该使用CSS实现)
    valign -- 代表垂直对齐方式(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | baseline(基线对齐))(此属性应该使用CSS实现)

HTML的cellspacing和cellpadding标签

    单元格(cell) -- 表格的内容
    单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间
    单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离 
上图说明了表格的几个属性,其中黑色部分就是单元格(cell),白色的区域是单元格边距(表格填充),灰色的区域是单元格间距(表格间距)。

HTML rowspan 属性
rowspan 属性 --规定单元格可横跨的行数。

HTML colspan 属性
rowspan 属性 -- 规定单元格可横跨的列数。
示例:

<table border="1" width="350">
       <tr><th>姓名</th><th colspan="2">性别</th></tr>
       <tr><td>张三</td><td >女</td><td>20</td></tr>
       <tr><td rowspan="2" >李四</td><td>男</td><td>21</td></tr>
       <tr><td>男</td><td>22</td></tr>
</table>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值