HTML表格

基础表格

表格使用的标签是<table> </table>,表格中的行使用的标签是<tr> </tr>,表格中的单元格使用的标签是<td> </td>。每一行中有多少个单元格就有多少列,相互之间为包含关系。如从效果上看到表格框线,需在table标签上添加属性border,宽度属性是width=“500px",代码如下。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Page Title</title>

</head>
<body>
    <table border="1">   <!--表格边框,两行三列的表格-->
        <tr>             <!--行-->
            <td>2014</td>       <!--单元格-->
            <td>2015</td>
            <td>2016</td>
        </tr>
        <tr>
            <td>10000</td>
            <td>12000</td>
            <td>14000</td>
        </tr>
    </table>
    
</body>
</html>

表格操作

添加行和删除行要对一组tr标签操作,添加列和删除列要将每一行对应位置上的单元格进行操作。

带标题、表头和结构的表格

表头单元格的定义方法:使用<th> </th>标签,表头单元格中的内容居中、加粗显示。使用方法和td标签完全一样。

标题的定义方法:使用<caption> </caption>标签,必须紧跟在table标签的后面。表格标题会居中显示。

浏览器在解析表格时是将表格作为一个整体解析的,只有整个表格被解析出来后才会显示,如果表格复杂加载时间会长,用户体验不好。因此使用表格结构标签进行表格优化显示,使得表格解析出一部分就可以显示一部分。

表格划分三部分:表头、主体、脚注,使用时把对应的tr标签放到表格结构标签内即可,代码中结构标签的顺序不会影响显示时的顺序。

thead标签:表格的头(放标题之类的内容)

tbody标签:表格的主体(放数据主体)

tfoot标签:表格的脚(放表格的脚注)

表格属性(1)

table标签的属性:

1. width | height属性:宽 | 高 。

2. align属性:表格在包容它的容器里的位置 默认值:left 左 | right 右 | center 居中。

3. border属性: 表格边框 。

4. bgcolor属性: 背景颜色 。

5. cellpadding属性: 单元格边与内容间距 。

6. cellspacing属性: 单元格间间距 。

7. frame属性: 外侧边框可见 。

默认值:void 不显示 | above 上 | below 下 | hsides 上下 | vsides 左右 | lhs 左 | rhs 右 | box 所有四个边上显示外侧边框 / border 所有四个边上显示外侧边框 。

8. rules属性: 内侧边框可见 。

默认值: none 没有 | groups 位于行组和列组间的线条 | rows 行间 | cols 列间 | all 位于行组和列组间的线条。

表格属性(2)

tr标签的属性:align,valign【top,middle,bottom,baseline(与基线对齐)】,bgcolor(三种方法,red,#ff0000,rgb(255,0,0))。

td和th的属性:align,valign,bgcolor,width,height。

thead,tbody,tfoot的属性:align,valign。

表格跨行列

跨列属性colspan="2",跨行属性rowspan="2"。跨列属性其实就是对两个左右并列的单元格进行合并,跨行属性就是对两个上下并列的单元格进行合并。之后要将对应跨行的单元格删掉。

表格嵌套

嵌套的表格必须是一个完整的表格结构,嵌套表格要放在外层表格的<td>标签内。使用表格进行网页布局时,不使用border属性,不美观。

注意:1、尽量少的使用表格嵌套

           2、尽量少的使用跨行和跨列

 

 

 

 

 

 

 

 

 

 

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值