1.1表格的基本标签
语法结构:<table> /*整体包裹部分,包裹多个tr */
<tr> /* 表格的每一个行,包裹td */
<td></td> /*表格的单元格,包裹内容 */
</tr> </table>
2.1表格相关属性
属性名 属性值 效果
border 数字 边框宽度
width 数字 表格宽度
height 数字 表格高度
html结构代码:
<table border='1' width='300' height='300'> /* */
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
<tr>
<td>小哥哥</td>
<td>100分</td>
<td>小哥哥真帅</td>
</tr>
<tr>
<td>小姐姐</td>
<td>100分</td>
<td>小姐姐真漂亮</td>
</tr>
<tr>
<td>总结</td>
<td>郎才女貌</td>
<td>郎才女貌</td>
</tr>
</table>

效果图:

2.2 表格标题和表头单元格;表格标题:是表格上方的标题; 表头单元格:表格内部第一行加粗的文字

html 结构代码
<table border='1' width='300' height='300'>
<caption><h3>学生成绩单</h3></caption> /*caption 表格标题*/
<tr>
<th>姓名</th> /*th 是表头单元格*/
<th>成绩</th>
<th>评语</th>
</tr>
<tr>
<td>小哥哥</td>
<td>100分</td>
<td>小哥哥真帅</td>
</tr>
<tr>
<td>小姐姐</td>
<td>100分</td>
<td>小姐姐真漂亮</td>
</tr>
<tr>
<td>总结</td>
<td>郎才女貌</td>
<td>郎才女貌</td>
</tr>
</table>

注意:caption标签一定要写table标签内部
th标签书写在tr标签内部、替换第一个行的td
3.1 表格的结构标签(了解,可有可无)
标签 作用
thead 表格头部
tbody 表格身体
tfoot 表格底部

用于包裹tr标签的

4.1合并单元格

 (1)单元格合并原则 :
1。上下合并 -->只保留最上面的,删除其他
2. 左右合并 -->只保留最左边的,删除其他 (2)给保留的单元格设置:跨行合并(rowspan='2' 2表示合并两行) 跨行合并(colspan='2')

注意:不能夸结构合并的,也就thead和tbody两个结构不能跨过合并

html 结构代码
<table border='1' width='300' height='300'>
<caption><h3>学生成绩单</h3></caption>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
<tr>
<td>小哥哥</td>
<td rowspan="2">100分</td>
<td>小哥哥真帅</td>
</tr>
<tr>
<td>小姐姐</td>
<!-- <td>100分</td> -->
<td>小姐姐真漂亮</td>
</tr>
<tr>
<td>总结</td>
<td colspan="2">郎才女貌</td>
<!-- <td>郎才女貌</td> -->
</tr> </table>

html基础 表格的相关属性使用的更多相关文章

  1. display属性的表格布局相关属性

    基于CSS属性display:table的表格布局的使用   项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的tabl ...

  2. html基础 表单相关属性综合实战案例 附有注释

    html结构代码: <form > <!-- form 为了让重置按钮生效--> <h1>青春不常在,抓紧谈恋爱</h1> <hr> 昵称: ...

  3. 复习-css列表和表格相关属性

    css列表和表格相关属性 list-style:设置所有列表属性 list-style-image:将图像设置为列表项标记,主要有url值 list-style-position:设置列表项标记的放置 ...

  4. GSAP JS基础教程--TweenLite操作元素的相关属性

    今天来学习用TweenLite操作元素的各种属性,以Div为例,其他元素的操作也是一样的,只是可能一些元素有它们的特殊属性,就可能不同罢了.   代码里用详细注释,我就不再重复啦,大家看代码就可以啦! ...

  5. IOS开发UI基础UITextView相关属性

    UITextView相关属性 •    text: 设置textView中文本_textView.text = @"Now is the time for all good develope ...

  6. IOS开发UI基础UITextFidle相关属性

    UITextFidle相关属性 •    enablesReturnKeyAutomatically默认为No,如果设置为Yes,文本框中没有输入任何字符的话,右下角的返回按钮是disabled的. ...

  7. PyQt(Python+Qt)入门:Designer组件属性编辑界面中QWidget类相关属性详解

    本文适用人员:本文比较长,适合不理解Qt Designer部件属性的人员阅读或资料查找. 声明: 1.如果有人认为本文是简单的复制粘贴+翻译而成,敬请读本文最后的后记: 2.本文为老猿Python学习 ...

  8. Activity Intent Flags及Task相关属性

    转自http://www.cnblogs.com/lwbqqyumidi/p/3775479.html 今天我们来讲一下Activity的task相关内容. 上次我们讲到Activity的四种启动模式 ...

  9. Android总结篇系列:Activity Intent Flags及Task相关属性

    同上文一样,本文主要引用自网上现有博文,并加上一些自己的理解,在此感谢原作者. 原文地址: http://blog.csdn.net/liuhe688/article/details/6761337 ...

随机推荐

  1. FindUserByPageServlet

    package com.hopetesting.web.servlet;import com.hopetesting.domain.PageBean;import com.hopetesting.do ...

  2. 转:Java IO

    转自:http://www.cnblogs.com/rollenholt/archive/2011/09/11/2173787.html [案例1]创建一个新文件 ? 1 2 3 4 5 6 7 8 ...

  3. [BUUCTF]PWN——0ctf_2017_babyheap

    0ctf_2017_babyheap 附件 步骤: 例行检查,64位程序,保护全开 本地试运行一下,看看大概的情况,经典的堆题的菜单 main函数 add() edit() delete() show ...

  4. CF701A Cards 题解

    Content 有一个长度为 \(n\) 的数组 \(a_1,a_2,a_3,...,a_n\),试在其中找到 \(\dfrac{n}{2}\) 对数,使得每个数对的元素的和都相等. 数据范围:\(2 ...

  5. redis hash操作 list列表操作

    HSET key 子key 子value 192.168.11.5:6379> HSET stu1 name 'zhangmingda'(integer) 1192.168.11.5:6379& ...

  6. HTML5 head标签meta标签、title的功能

    <!DOCTYPE html> <!-- 解释器--> <html lang="en"> <head> <!--meta标签中 ...

  7. Do PDB Files Affect Performance?

    After a detour into Historical Debugging, it's time to come back to return to answering questions ab ...

  8. uniapp+nvue实现仿微信App界面+功能 —— uni-app实现聊天+语音+视频+图片消息

    基于uniapp + nvue实现的uniapp仿微信界面功能聊天应用 txim 实例项目,实现了以下功能. 1: 聊天会话管理 2: 好友列表 3: 文字.语音.视频.表情.位置等聊天消息收发 4: ...

  9. Vim使用简介

    Vim操作 Vim真的很酷:D 编辑模式 正常模式:在文件中四处移动光标进行修改 插入模式:插入文本 替换模式:替换文本 可视化(一般,行,块)模式:选中文本块 命令模式:用于执行命令 在不同的操作模 ...

  10. 微信公众号开发用户授权登录报"redirect_uri 参数错误"错误

    微信公众号开发 授权获取用户信息报错 "redirect_uri 参数错误" 出现这个情况要检查下 微信公众号配置了网页授权域名 在这里配置微信公众号redirect_uri中的域 ...