table的使用,及caption,thead,tbody,tfoot的用法

1. table 表格

table图片
1.1 完整的表格
一个完整的表格应该具有 表格标题(caption) ,第一行的表格头部(thead),中间部分的表格主体(tbody),以及最后一行的==表格脚注(tfoot)==相对而言脚注不重要,可以不写。

1.2. 表格中可以使用的属性:

alignleft (居左); cente(中间); right(居右)
bgcolor背景颜色
border规定边框
cellspacing规定单元格空白间隔
width规定表格的宽度
cellspacing规定单元边与其内容的空白

1.3 完整代码如下:

  • 内联代码片

      <table width="800px" align="center" border="1" height="500px" cellspacing="0">
        <caption><h1>个人简历</h1></caption>
          <tbody align="center">
                 <tr width="500">
                <th>姓名</th>
                <th width="127"></th>
                <th>性别</th>
                <th ></th>
                <th rowspan="5" width="120">照片</th>
            </tr>
            <tr>
                <td>出生年月</td>
                <td></td>
                <td>籍贯</td>
                <td></td>
            </tr>
            <tr>
                <td>政治面貌</td>
                <td></td>
                <td>民族</td>
                <td></td>
              
            </tr>
            <tr>
                <td>健康情况</td>
                <td></td>
                <td>婚姻状况</td>
                <td></td>
               
            </tr>
            <tr>
                <td>联系电话</td>
                <td></td>
                <td>电子邮箱</td>
                <td>www.51jianli.com</td>
            </tr>
            <tr>
                <td>求职意向</td>
                <td colspan="4"></td>
                
            </tr>
            <tr>
                <td>工作经历</td>
                <td colspan="4"></td>
                
            </tr>
            <tr>
                <td>教育经历</td>
                <td colspan="4"></td>
                
            </tr>
            <tr>
                <td  height="68">计算机水<p>平</p></td>
                <td colspan="4"></td>
                
            </tr>
            <tr>
                <td>自我评价</td>
                <td colspan="4"></td>
                
            </tr>
            
        </tbody>
      </table>

caption(表格标题)

2.1 表格的标题,自动在表格顶部居中,语义也便于浏览器解读。
2.2 您只能对每个表格定义一个caption标题。
2.3 表格标题标签是成对出现的,以为开始标签,以为结束标签。
2.4 align可以居中但不建议使用,已废弃,支持用CSS进行书写样式

// <caption> 标签定义表格的标题。
//  <caption> 标签定义表格的标题。
// <caption> 标签必须直接放置到 <table> 标签之后。

thead(表格头部)

3.1 thead是表格的头部,建议在其中书写tr和th
3.2 代码样式为:

      <tbody align="center">
                 <tr width="500">
                <th>姓名</th>
                <th width="127"></th>
                <th>性别</th>
                <th ></th>
                <th rowspan="5" width="120">照片</th>
            </tr>

3.3 在其中可以进行列合并 colspan,写在th标签中

tbody(表格主题)

3.1 tbody表格的主体部分,表格主要内容的书写位置
3.2 tbody中书写tr和th
3.3 可以用colsapn和rowspan进行列合并与行合并
3.4 tbody中书写代码如下:

     <tbody align="center">
                <tr width="500">
               <th>姓名</th>
               <th width="127"></th>
               <th>性别</th>
               <th ></th>
               <th rowspan="5" width="120">照片</th>
           </tr>

tfoot

  • 表格的脚注(可以不写)
  • 里面可以使用tr和th
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值